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

banking/.env.production

@@ -0,0 +1 @@
+VITE_BASE_NAME="banking"

banking/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

banking/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

banking/eslint.config.js

@@ -0,0 +1,24 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+	globalIgnores(["dist"]),
+	{
+		files: ["**/*.{ts,tsx}"],
+		extends: [
+			js.configs.recommended,
+			tseslint.configs.recommended,
+			reactHooks.configs.flat.recommended,
+			reactRefresh.configs.vite,
+		],
+		languageOptions: {
+			ecmaVersion: 2020,
+			globals: globals.browser,
+		},
+		onlyExportComponents: false,
+	},
+]);

banking/index.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="{{ lang }}" dir="{{layout_direction}}">
+
+<head>
+  <meta charset="UTF-8" />
+  <!-- Chrome, Firefox OS and Opera -->
+  <meta name="theme-color" content="#0089FF">
+  <!-- Windows Phone -->
+  <meta name="msapplication-navbutton-color" content="#0089FF">
+  <!-- iOS Safari -->
+  <meta name="apple-mobile-web-app-status-bar-style" content="#0089FF">
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
+  <meta name="author" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0,
+        maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="white">
+  <meta name="mobile-web-app-capable" content="yes">
+  <link rel="shortcut icon" href="{{ favicon or ' /assets/erpnext/images/erpnext-favicon.svg' }}" type="image/x-icon">
+  <link rel="icon" href="{{ favicon or ' /assets/erpnext/images/erpnext-favicon.svg' }}" type="image/x-icon">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Banking | {{ app_name }}</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script>window.csrf_token = '{{ frappe.session.csrf_token }}';
+    if (!window.frappe) window.frappe = {};
+
+    frappe.boot = JSON.parse({{ boot }});
+    frappe.boot.layout_direction = "{{ layout_direction }}";
+
+    frappe._translations_loaded = fetch(
+      `/api/method/frappe.translate.get_boot_translations?v=${frappe.boot.translations_version}&lang=${frappe.boot.lang}`,
+      {
+        credentials: "same-origin",
+        headers: {
+          "X-Frappe-CSRF-Token": frappe.csrf_token,
+          "Accept": "application/json"
+        }
+      }
+    ).then(r => r.json()).then(data => {
+      frappe._messages = data.message || {};
+    }).catch(() => { });
+  </script>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

banking/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "banking",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --base=/assets/erpnext/banking/ && yarn copy-html-entry",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "copy-html-entry": "cp ../erpnext/public/banking/index.html ../erpnext/www/banking.html"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.24",
+    "@vitejs/plugin-react": "^6.0.1",
+    "chrono-node": "^2.9.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "dayjs": "^1.11.20",
+    "frappe-react-sdk": "^1.14.0",
+    "fuse.js": "^7.3.0",
+    "jotai": "^2.20.0",
+    "jotai-family": "^1.0.1",
+    "lodash.isplainobject": "^4.0.6",
+    "lucide-react": "^1.14.0",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.6",
+    "react-currency-input-field": "^4.0.5",
+    "react-day-picker": "9.14.0",
+    "react-dom": "^19.2.6",
+    "react-dropzone": "^15.0.0",
+    "react-hook-form": "^7.75.0",
+    "react-hotkeys-hook": "^5.3.2",
+    "react-markdown": "^10.1.0",
+    "react-router": "^7.15.0",
+    "react-router-dom": "^7.15.0",
+    "react-virtuoso": "^4.18.6",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.3.0",
+    "tw-animate-css": "^1.4.0",
+    "usehooks-ts": "^3.1.1",
+    "vite": "^8.0.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^25.3.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0"
+  }
+}

banking/proxyOptions.ts

@@ -0,0 +1,13 @@
+const common_site_config = require('../../../sites/common_site_config.json');
+const { webserver_port } = common_site_config;
+
+export default {
+	'^/(app|api|assets|files|private)': {
+		target: `http://127.0.0.1:${webserver_port}`,
+		ws: true,
+		router: function(req) {
+			const site_name = req.headers.host.split(':')[0];
+			return `http://${site_name}:${webserver_port}`;
+		}
+	}
+};

banking/src/App.tsx

@@ -0,0 +1,65 @@
+import { useEffect } from 'react'
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
+import { FrappeProvider } from 'frappe-react-sdk'
+import { Toaster } from '@/components/ui/sonner'
+import BankReconciliation from '@/pages/BankReconciliation'
+import { TooltipProvider } from './components/ui/tooltip'
+import BankStatementImporter from '@/pages/BankStatementImporter'
+import { LucideProvider } from 'lucide-react'
+import { ThemeProvider } from './components/ui/theme-provider'
+import ViewBankStatementImportLog from './pages/ViewBankStatementImportLog'
+import BankStatementImporterContainer from './pages/BankStatementImporterContainer'
+
+function App() {
+	useEffect(() => {
+		// Check if user is logged in by checking the Cookie "user_id"
+		// In Frappe, unauthenticated users are "Guest"
+		const userId = document.cookie?.split('; ').find(row => row.startsWith('user_id='))?.split('=')[1]?.trim()
+		const isLoggedIn = userId !== 'Guest'
+
+		if (!isLoggedIn) {
+			if (import.meta.env.DEV) {
+				return
+			}
+			// Redirect to Frappe login page
+			window.location.href = '/login?redirect-to=/banking'
+			return
+		}
+	}, [])
+
+	return (
+		<LucideProvider
+			strokeWidth={1.5}
+		>
+			<TooltipProvider>
+				<FrappeProvider
+					swrConfig={{
+						errorRetryCount: 2
+					}}
+					socketPort={import.meta.env.VITE_SOCKET_PORT}
+					siteName={window.frappe?.boot?.sitename ?? import.meta.env.VITE_SITE_NAME}>
+					<ThemeProvider
+						defaultTheme={window.frappe?.boot?.desk_theme ?? "Automatic"}
+					>
+						{window.frappe?.boot?.user?.name && window.frappe?.boot?.user?.name !== 'Guest' &&
+							<BrowserRouter basename={import.meta.env.VITE_BASE_NAME ? `/${import.meta.env.VITE_BASE_NAME}` : ''}>
+
+								<Routes>
+									<Route index element={<BankReconciliation />} />
+									<Route path="/statement-importer" element={<BankStatementImporterContainer />}>
+										<Route index element={<BankStatementImporter />} />
+										<Route path=":id" element={<ViewBankStatementImportLog />} />
+									</Route>
+									<Route path="*" element={<Navigate to="/" />} />
+								</Routes>
+							</BrowserRouter>
+						}
+						<Toaster richColors />
+					</ThemeProvider>
+				</FrappeProvider>
+			</TooltipProvider>
+		</LucideProvider>
+	)
+}
+
+export default App

banking/src/components/common/AccountsDropdown.tsx

@@ -0,0 +1,228 @@
+import { Button } from "@/components/ui/button"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { useCurrentCompany } from "@/hooks/useCurrentCompany"
+import _ from "@/lib/translate"
+import { cn } from "@/lib/utils"
+import { useFrappeGetDocList } from "frappe-react-sdk"
+import Fuse from "fuse.js"
+import { ChevronDownIcon } from "lucide-react"
+import { useLayoutEffect, useMemo, useRef, useState } from "react"
+import { FormControl } from "../ui/form"
+
+
+export interface AccountsDropdownProps {
+    root_type?: ('Asset' | 'Liability' | 'Equity' | 'Income' | 'Expense')[],
+    report_type?: 'Balance Sheet' | 'Profit and Loss',
+    account_type?: string[],
+    value?: string,
+    onChange?: (value: string) => void,
+    readOnly?: boolean,
+    disabled?: boolean,
+    company?: string,
+    filterFunction?: (account: Account) => boolean,
+    // If true, the component will be wrapped in a FormControl component
+    useInForm?: boolean,
+    buttonClassName?: string,
+    size?: 'sm' | 'md' | 'lg',
+}
+/**
+ * Component to select an account - supports fuzzy search
+ * @param root_type - The root type of the account
+ * @param report_type - The report type of the account
+ * @param account_type - The type of the account
+ * @param value - The value of the account field
+ * @param onChange - The function to call when the value changes
+ * @returns 
+ */
+const AccountsDropdown = ({ root_type, report_type, account_type, value, onChange, readOnly, disabled, company, filterFunction, useInForm, buttonClassName, size = 'md' }: AccountsDropdownProps) => {
+
+    const { data } = useGetAccounts(root_type, report_type, account_type, company, filterFunction)
+
+    const groupedAccounts = useMemo(() => {
+        if (!data) return []
+
+        const grouped: Record<string, Account[]> = data.reduce((acc, account) => {
+            const parentAccount = account.parent_account
+            if (!parentAccount) return acc
+
+            if (!acc[parentAccount]) {
+                acc[parentAccount] = []
+            }
+
+            acc[parentAccount].push(account)
+            return acc
+        }, {} as Record<string, Account[]>)
+
+
+        return Object.entries(grouped).map(([parentAccount, accounts]) => ({
+            // Remove the last abbreviation from the parent account name like "Assets - TCC" should be "Assets", and "Assets - USD - TCC" should be "Assets - USD"
+            parentAccount: parentAccount.split(" - ").slice(0, -1).join(" - "),
+            accounts
+        }))
+
+    }, [data])
+
+    const searchIndex = useMemo(() => {
+
+        if (!data) {
+            return null
+        }
+
+        return new Fuse(data, {
+            keys: ['name'],
+            threshold: 0.5,
+            includeScore: true
+        })
+    }, [data])
+
+    const [search, setSearch] = useState("")
+
+    const recommendedAccounts = useMemo(() => {
+
+        if (!searchIndex || !search) {
+            return []
+        }
+
+        return searchIndex.search(search).map((result) => result.item)
+
+    }, [searchIndex, search])
+
+    const [open, setOpen] = useState(false)
+
+    const onOpenChange = (open: boolean) => {
+        if (readOnly) return
+        setOpen(open)
+        // setSearch("")
+    }
+
+    const onSelect = (value: string) => {
+        onChange?.(value)
+        setOpen(false)
+        setSearch(value)
+    }
+
+    const buttonRef = useRef<HTMLButtonElement>(null)
+
+    const [width, setWidth] = useState(320)
+
+    useLayoutEffect(() => {
+        if (buttonRef.current) {
+            setWidth(buttonRef.current.getBoundingClientRect().width)
+        }
+    }, [])
+
+    return (
+        <Popover open={open} onOpenChange={onOpenChange} modal={true}>
+            <PopoverTrigger asChild>
+                {useInForm ? <FormControl>
+                    <Button
+                        variant="subtle"
+                        type='button'
+                        size={size}
+                        role="combobox"
+                        ref={buttonRef}
+                        tabIndex={0}
+                        disabled={disabled || readOnly}
+                        aria-readonly={readOnly}
+                        aria-expanded={open}
+                        className={cn("w-full justify-between font-normal",
+                            readOnly ? "bg-surface-gray-1 pointer-events-none" : ""
+                            , buttonClassName)}>
+                        {value || _('Select Account')}
+
+                        <ChevronDownIcon className="ms-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                </FormControl>
+                    : <Button
+                        variant="subtle"
+                        size={size}
+                        type='button'
+                        role="combobox"
+                        ref={buttonRef}
+                        disabled={disabled}
+                        aria-expanded={open}
+                        className={cn("w-full justify-between font-normal",
+                            readOnly ? "bg-surface-gray-1" : ""
+                        )}>
+                        {value || _('Select Account')}
+
+                        <ChevronDownIcon className="ms-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>}
+            </PopoverTrigger>
+            <PopoverContent className="p-0" style={{ minWidth: width }} align="start">
+                <Command shouldFilter={false} className="w-full">
+                    <CommandInput placeholder={_("Search account...")} onValueChange={setSearch} value={search} />
+                    <CommandList>
+                        <CommandEmpty>{_("No accounts found.")}</CommandEmpty>
+
+                        {recommendedAccounts.length > 0 && (
+                            <CommandGroup heading={_("Search Results")}>
+                                {recommendedAccounts.map((account) => (
+                                    <CommandItem key={account.name} onSelect={() => onSelect(account.name)}>{account.name}</CommandItem>
+                                ))}
+                            </CommandGroup>
+                        )}
+
+                        {!search && groupedAccounts.map((group) => (
+                            <CommandGroup key={group.parentAccount} heading={group.parentAccount}>
+                                {group.accounts.map((account) => (
+                                    <CommandItem key={account.name} onSelect={() => onSelect(account.name)}>{account.name}</CommandItem>
+                                ))}
+                            </CommandGroup>
+                        ))}
+
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+
+        </Popover>
+    )
+}
+
+
+interface Account {
+    name: string
+    root_type: 'Asset' | 'Liability' | 'Equity' | 'Income' | 'Expense'
+    report_type: 'Balance Sheet' | 'Profit and Loss'
+    account_type: string
+    account_currency: string
+    parent_account: string
+}
+
+export const useGetAccounts = (root_type?: ('Asset' | 'Liability' | 'Equity' | 'Income' | 'Expense')[], report_type?: 'Balance Sheet' | 'Profit and Loss', account_type?: string[], company?: string,
+    filterFunction?: (account: Account) => boolean) => {
+
+    const currentCompany = useCurrentCompany()
+    const { data, isLoading, error, mutate } = useFrappeGetDocList<Account>("Account", {
+        fields: ["name", "root_type", "report_type", "account_type", "account_currency", "parent_account"],
+        filters: [["is_group", "=", 0], ["disabled", "=", 0], ["company", "=", company ?? currentCompany]],
+        limit: 1000,
+        orderBy: {
+            "field": "root_type",
+            // @ts-expect-error - we can pass in additional fields to orderBy
+            "order": "asc, account_number asc"
+        }
+    }, `accounts-${company ?? currentCompany}`, {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+    })
+
+    const filteredData = useMemo(() => {
+
+        return data?.filter((account) => {
+            if (root_type && !root_type.includes(account.root_type)) return false
+            if (report_type && account.report_type !== report_type) return false
+            if (account_type && !account_type.includes(account.account_type)) return false
+
+            if (filterFunction) return filterFunction(account)
+            return true
+        }) ?? []
+
+    }, [data, root_type, report_type, account_type, filterFunction])
+
+    return { data: filteredData, isLoading, error, mutate }
+}
+
+export default AccountsDropdown

banking/src/components/common/BankLogo.tsx

@@ -0,0 +1,26 @@
+import { cn } from '@/lib/utils'
+import { SelectedBank } from '../features/BankReconciliation/bankRecAtoms'
+import { useTheme } from '../ui/theme-provider'
+import { Landmark } from 'lucide-react'
+import { H4 } from '../ui/typography'
+
+const BankLogo = ({ bank, className, imageClassName, iconSize = '18px', iconClassName }: { bank?: SelectedBank | null, className?: string, imageClassName?: string, iconSize?: string, iconClassName?: string }) => {
+
+    const { themeValue } = useTheme()
+    return (
+        <div className={cn('h-6 flex items-center gap-1', className)}> {bank?.logo ? <img
+            src={`/assets/erpnext/images/bank-logos/${themeValue === 'Dark' ? (bank.logoDark ?? bank.logo) : bank.logo}`}
+            alt={bank.bank || bank.name || ''}
+            className={cn("h-6 max-w-22 me-auto object-contain", imageClassName, {
+                'dark:invert dark:brightness-0': bank.darkModeInvert
+            }, bank.logoClassName)}
+        /> : <>
+            <Landmark size={iconSize} className={iconClassName} />
+            <H4 className={cn("text-xs -mb-0.5", {
+            })}>{bank?.bank ?? ''}</H4>
+        </>
+        }</div>
+    )
+}
+
+export default BankLogo

banking/src/components/common/FileUploadBanner.tsx

@@ -0,0 +1,17 @@
+import { CheckCircle } from 'lucide-react'
+import { Progress } from '../ui/progress'
+import _ from '@/lib/translate'
+
+const FileUploadBanner = ({
+    uploadProgress,
+}: { uploadProgress: number }) => {
+    return <div className="flex items-center justify-center flex-col gap-4">
+        <div className="flex flex-col items-center gap-4">
+            <CheckCircle size={48} className="text-ink-green-3" />
+            <span className="text-ink-gray-8 text-p-base">{_("The document has been created and reconciled. Uploading attachments...")}</span>
+            <Progress value={Math.round(uploadProgress * 100)} size="lg" />
+        </div>
+    </div>
+}
+
+export default FileUploadBanner

banking/src/components/common/LinkFieldCombobox.tsx

@@ -0,0 +1,301 @@
+import { useDocType } from "@/hooks/useDocType";
+import { getSystemDefault, slug } from "@/lib/frappe";
+import { Filter, useFrappeGetCall } from "frappe-react-sdk"
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { canCreateDocument } from "@/lib/permissions";
+import { useDebounceValue } from "usehooks-ts";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { FormControl } from "../ui/form";
+import { ChevronDownIcon, ExternalLink } from "lucide-react";
+import { Button } from "../ui/button";
+import { cn } from "@/lib/utils";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../ui/command";
+import _ from "@/lib/translate";
+import ErrorBanner from "../ui/error-banner";
+import MarkdownRenderer from "../ui/markdown";
+
+export interface ResultItem {
+    value: string,
+    description: string,
+    label?: string
+}
+
+export interface LinkFieldComboboxProps {
+    /** DocType to be fetched */
+    doctype: string;
+    /** Filters to be applied. Default: none */
+    filters?: Filter[]
+    /** Number of records to paginate with. Default: Comes from System Settings or 10 */
+    limit?: number;
+    /** 
+   * API to call to fetch records.
+   * 
+   * Default: `frappe.desk.search.search_link`
+   * 
+   * If you want to use a custom API, you can pass the path to the API here.
+   * 
+   * The API should return a list of documents in the following format:
+   * [{value: string, description: string, label?: string}] - where the value is the ID of the document.
+   * 
+   * If the API sends a label, it will be used as the label in the dropdown.
+  */
+    searchAPIPath?: string;
+    /**
+    * Field you want to search against in the doctype.
+    * 
+    * Default: `name`
+    * 
+    * If you want to search against a different field, you can pass the fieldname here.
+    * 
+    * If you want to search against multiple fields, you can try using the `searchAPIPath` prop to call a custom API,
+    * or use a custom query in the `customQuery` prop.
+    */
+    searchfield?: string;
+    /** 
+     * Custom query to be used to fetch records.
+     * 
+     * If you want to use a custom query, you can pass the query here.
+     * 
+     * The query should be in the following format:
+     * {
+     *  query: string,
+     *  filters: {
+     *      fieldname: string,
+     *      operator: string,
+     *      value: string
+     *  }
+     * }
+     */
+    customQuery?: {
+        /** Path to function for the query. 
+         * 
+         * Refer: Item/Supplier query
+         */
+        query: string,
+        /** Filters are usually an object instead of an array in a custom query */
+        filters?: Record<string, string | number | boolean>,
+    },
+    /** 
+     * Used for certain queries where a reference doctype is needed.
+     * 
+     * For example when searching a supplier in a "Purchase Invoice", the reference_doctype is "Purchase Invoice"
+     */
+    reference_doctype?: string,
+    /** Placeholder for the dropdown. Default: `doctype` */
+    placeholder?: string;
+    /** 
+     * Should the field be read-only. 
+     */
+    readOnly?: boolean;
+    /** Should the field be disabled. Default: false */
+    disabled?: boolean;
+    /**
+    * Function to filter the options based on the input value/other criteria.
+    * 
+    * For example, you might want to limit the companies shown in the dropdown since they have been already added (like in Cost Codes)
+    */
+    filterFn?: (option: ResultItem, inputValue: string) => boolean,
+    value?: string,
+    onChange: (value: string) => void,
+    /** If true, the component will be wrapped in a FormControl component */
+    useInForm?: boolean,
+    /** Button Class name */
+    buttonClassName?: string,
+    size?: 'sm' | 'md' | 'lg',
+}
+const LinkFieldCombobox = ({
+    doctype,
+    reference_doctype,
+    filters = [],
+    value,
+    onChange,
+    readOnly,
+    disabled,
+    filterFn,
+    placeholder = `Select ${doctype}`,
+    customQuery,
+    searchfield,
+    searchAPIPath = "frappe.desk.search.search_link",
+    limit,
+    useInForm,
+    buttonClassName,
+    size = 'md'
+}: LinkFieldComboboxProps) => {
+
+    const pageLimit = useMemo(() => limit || getSystemDefault('link_field_results_limit') || 20, [limit])
+
+    /** Load the Doctype meta so that we can determine the search fields + the name of the title field */
+    const { data: meta } = useDocType(doctype)
+
+    const userCanCreate = useMemo(() => canCreateDocument(doctype), [doctype])
+
+    const [open, setOpen] = useState(false)
+
+    const [searchInput, setSearchInput] = useDebounceValue('', 400)
+
+    const { data: linkTitleData } = useFrappeGetCall('frappe.client.get_value', {
+        doctype,
+        filters: JSON.stringify({
+            name: value
+        }),
+        fieldname: meta?.title_field
+    }, (meta?.show_title_field_in_link ?? false) && (meta?.title_field) && value ? `link_title::${doctype}::${value}` : null, {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+    })
+
+    const linkTitle = meta?.title_field && meta?.show_title_field_in_link ? (linkTitleData?.message?.[meta?.title_field] ?? value) : value
+
+    const buttonRef = useRef<HTMLButtonElement>(null)
+
+    const [width, setWidth] = useState(320)
+
+    useLayoutEffect(() => {
+        if (buttonRef.current) {
+            setWidth(buttonRef.current.getBoundingClientRect().width)
+        }
+    }, [])
+
+    const { data, error, isLoading } = useFrappeGetCall<{ message: ResultItem[] }>(searchAPIPath, {
+        doctype,
+        txt: searchInput,
+        page_length: pageLimit,
+        query: customQuery?.query,
+        searchfield,
+        filters: JSON.stringify(customQuery?.filters || filters || []),
+        reference_doctype,
+    }, () => {
+        if (!open) {
+            return null
+        } else {
+            let key = `${searchAPIPath}_${doctype}_${searchInput}`
+
+            if (pageLimit) {
+                key += `_${pageLimit}`
+            }
+
+            if (customQuery?.filters) {
+                key += `_${JSON.stringify(customQuery.filters)}`
+            } else if (filters) {
+                key += `_${JSON.stringify(filters)}`
+            }
+
+            if (customQuery && customQuery.query) {
+                key += `_${customQuery.query}`
+            }
+
+            if (reference_doctype) {
+                key += `_${reference_doctype}`
+            }
+
+            if (searchfield && searchfield !== 'name') {
+                key += `_${searchfield}`
+            }
+
+            return key
+
+        }
+    }, {
+        revalidateOnFocus: false,
+        revalidateIfStale: false,
+        shouldRetryOnError: false,
+        revalidateOnReconnect: false,
+    })
+
+    const onOpenChange = (open: boolean) => {
+        if (readOnly) return
+        setOpen(open)
+        setSearchInput("")
+    }
+
+    const onSelect = (value: string) => {
+        onChange?.(value)
+        setOpen(false)
+    }
+
+    const items = filterFn ? data?.message?.slice(0, 50).filter((item) => filterFn(item, searchInput)) : data?.message
+
+    const buttonProps = {
+        variant: "subtle",
+        type: 'button',
+        size: size,
+        role: "combobox",
+        "data-state": open ? "open" : "closed",
+        ref: buttonRef,
+        tabIndex: 0,
+        disabled: disabled || readOnly,
+        "aria-expanded": open,
+        "aria-readonly": readOnly,
+        className: cn("w-full justify-between font-normal group border border-transparent outline-none",
+            "data-[state=open]:bg-surface-white data-[state=open]:border-outline-gray-4 data-[state=open]:shadow-sm",
+            readOnly ? "bg-surface-gray-1" : "",
+            // Placeholder and value styling
+            linkTitle ? "text-ink-gray-7" : "text-ink-gray-4",
+            buttonClassName)
+    } as const
+
+    return (
+        <Popover open={open} onOpenChange={onOpenChange} modal={true}>
+            <PopoverTrigger asChild>
+                {useInForm ? <FormControl>
+                    <Button {...buttonProps}>
+                        {linkTitle || placeholder}
+
+                        <div className="flex items-center gap-1">
+                            {value && <a href={`/desk/${slug(doctype)}/${value}`} target="_blank" className="group-hover:block hidden">
+                                <ExternalLink className="size-4 shrink-0 opacity-50" />
+                            </a>}
+                            <ChevronDownIcon className="ms-2 size-4 shrink-0" />
+                        </div>
+                    </Button>
+                </FormControl>
+                    : <Button {...buttonProps}>
+                        {linkTitle || placeholder}
+                        <div className="flex items-center gap-1">
+                            {value && <a href={`/desk/${slug(doctype)}/${value}`} target="_blank" className="group-hover:block hidden">
+                                <ExternalLink className="size-4 shrink-0 opacity-50" />
+                            </a>}
+                            <ChevronDownIcon className="ms-2 size-4 shrink-0" />
+                        </div>
+                    </Button>}
+            </PopoverTrigger>
+            <PopoverContent className="p-0" style={{ minWidth: width }} align="start">
+                {error && <ErrorBanner error={error} />}
+                <Command shouldFilter={false} className="w-full">
+                    <CommandInput placeholder={placeholder} onValueChange={setSearchInput} />
+                    <CommandList>
+                        <CommandEmpty>{isLoading ? _("Loading...") : _("No results found.")}</CommandEmpty>
+                        <CommandGroup>
+                            {items?.map((result) => (
+                                <CommandItem key={result.value} onSelect={() => onSelect(result.value)} className="flex flex-col items-start gap-0.5">
+                                    <span className="font-medium">
+                                        {result.label || result.value}
+                                    </span>
+                                    {result.description && <span className="text-xs text-ink-gray-5">
+                                        <MarkdownRenderer content={result.description} />
+                                    </span>}
+                                </CommandItem>
+                            ))}
+                            {userCanCreate && <CommandItem asChild>
+                                <a href={`/desk/${slug(doctype)}/new-${slug(doctype)}-1`}
+                                    target="_blank"
+                                    className="hover:underline underline-offset-4 cursor-pointer flex justify-between items-center">
+                                    {_("Create New {0}", [doctype])}
+
+                                    <ExternalLink />
+                                </a>
+
+                            </CommandItem>}
+                        </CommandGroup>
+
+
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+
+        </Popover>
+    )
+}
+
+export default LinkFieldCombobox

banking/src/components/common/PartyTypeDropdown.tsx

@@ -0,0 +1,82 @@
+import { Select, SelectValue, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/select'
+import _ from '@/lib/translate'
+import { useFrappeGetDocList } from 'frappe-react-sdk'
+import { ComponentProps, useMemo } from 'react'
+import { FormControl } from '../ui/form'
+
+export type PartyTypeDropdownProps = {
+    value?: string,
+    onChange?: (value: string) => void,
+    readOnly?: boolean,
+    disabled?: boolean,
+    /** Set this to order the parties so that suggested types are shown first */
+    type?: 'Receivable' | 'Payable'
+    /** Set this to true if you want to hide other options by type. e.g. - if type is Receivable, Payable options like "Supplier" will be hidden */
+    hideOptionsByType?: boolean,
+    valueProps?: ComponentProps<typeof SelectValue>,
+    triggerProps?: ComponentProps<typeof SelectTrigger>,
+    // If true, the component will be wrapped in a FormControl component
+    useInForm?: boolean
+}
+
+const PartyTypeDropdown = ({ value, onChange, readOnly, disabled, type, hideOptionsByType, valueProps, triggerProps, useInForm }: PartyTypeDropdownProps) => {
+
+    const { data } = useFrappeGetDocList("Party Type", {
+        fields: ['name', 'account_type'],
+        orderBy: {
+            field: 'creation',
+            order: 'asc'
+        }
+    }, `party_types`, {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+    })
+
+    const filteredData = useMemo(() => {
+
+        let options = data ?? [
+            { name: "Customer", account_type: "Receivable" },
+            { name: "Supplier", account_type: "Payable" },
+            { name: "Employee", account_type: "Payable" },
+            { name: "Shareholder", account_type: "Payable" },
+        ]
+
+        if (hideOptionsByType && type) {
+            options = options.filter((option) => option.account_type === type)
+        }
+
+        // Order by type if type is set
+        if (type) {
+            options = options.sort((a) => a.account_type === type ? -1 : 1)
+        }
+
+        return options
+    }, [data, type, hideOptionsByType])
+
+    const onSelect = (value: string) => {
+        if (!readOnly) {
+            onChange?.(value)
+        }
+    }
+
+    return (
+        <Select onValueChange={onSelect} value={value} disabled={disabled}>
+            {useInForm ? <FormControl>
+                <SelectTrigger tabIndex={0} aria-readonly={readOnly} disabled={disabled || readOnly} {...triggerProps}>
+                    <SelectValue placeholder={_("Type")} aria-readonly={readOnly} {...valueProps} />
+                </SelectTrigger>
+            </FormControl> : <SelectTrigger tabIndex={0} {...triggerProps}>
+                <SelectValue placeholder={_("Type")} aria-readonly={readOnly} {...valueProps} />
+            </SelectTrigger>
+            }
+            <SelectContent>
+                {filteredData.map((option) => (
+                    <SelectItem key={option.name} value={option.name}>{option.name}</SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+    )
+}
+
+export default PartyTypeDropdown

banking/src/components/features/ActionLog/ActionLog.tsx

@@ -0,0 +1,475 @@
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import _ from '@/lib/translate'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { ArrowDownRight, ArrowRightLeftIcon, ArrowUpRight, CalendarIcon, CircleXIcon, GitCompareIcon, HistoryIcon, LandmarkIcon, Loader2Icon, ReceiptIcon, ReceiptTextIcon, UserIcon, WalletIcon } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { ActionLogItem, ActionLog as ActionLogType, bankRecActionLog, bankRecDateAtom, bankRecMatchFilters, SelectedBank, selectedBankAccountAtom } from '../BankReconciliation/bankRecAtoms'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { useGetBankAccounts } from '../BankReconciliation/utils'
+import { getCompanyCurrency } from '@/lib/company'
+import { formatCurrency } from '@/lib/numbers'
+import dayjs from 'dayjs'
+import { cn } from '@/lib/utils'
+import { formatDate } from '@/lib/date'
+import { Separator } from '@/components/ui/separator'
+import { slug } from '@/lib/frappe'
+import { PaymentEntry } from '@/types/Accounts/PaymentEntry'
+import { JournalEntry } from '@/types/Accounts/JournalEntry'
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
+import { Table, TableCell, TableBody, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
+import { useFrappePostCall, useSWRConfig } from 'frappe-react-sdk'
+import { toast } from 'sonner'
+import { getErrorMessage } from '@/lib/frappe'
+import ErrorBanner from '@/components/ui/error-banner'
+import SelectedTransactionDetails from '../BankReconciliation/SelectedTransactionDetails'
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty'
+import BankLogo from '@/components/common/BankLogo'
+
+const ActionLog = () => {
+
+    const [isOpen, setIsOpen] = useState(false)
+
+    useHotkeys('meta+z', () => {
+        setIsOpen(true)
+    }, {
+        enabled: true,
+        enableOnFormTags: false,
+        preventDefault: true
+    })
+
+    return (
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <DialogTrigger asChild>
+                        <Button variant={'outline'} isIconButton size='md'>
+                            <HistoryIcon />
+                        </Button>
+                    </DialogTrigger>
+                </TooltipTrigger>
+                <TooltipContent>
+                    {_("Reconciliation History")}
+                </TooltipContent>
+            </Tooltip>
+            <DialogContent className='min-w-[90vw]'>
+                <DialogHeader>
+                    <DialogTitle>{_("Reconciliation History")}</DialogTitle>
+                    <DialogDescription>{_("View all reconciliation actions taken in this session.")}</DialogDescription>
+                </DialogHeader>
+                <ActionLogDialogContent />
+                <DialogFooter>
+                    <DialogClose asChild>
+                        <Button variant={'outline'} size='md' onClick={() => setIsOpen(false)}>{_("Close")}</Button>
+                    </DialogClose>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+const ActionLogDialogContent = () => {
+
+    const actionLog = useAtomValue(bankRecActionLog)
+
+    return <div className='flex flex-col gap-2'>
+        {actionLog.map((action) => (
+            <div key={action.timestamp} className='flex flex-col gap-1'>
+                <ActionGroupHeader action={action} />
+                <div>
+                    <div className='ms-2 border-s border-s-outline-gray-2 py-1'>
+                        <div className='ms-5'>
+                            {action.items.map((item, index) => (
+                                <Row
+                                    item={item}
+                                    key={item.bankTransaction.name}
+                                    index={index}
+                                    action={action}
+                                    isLast={index === action.items.length - 1} />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        ))}
+
+        {actionLog.length === 0 && <Empty>
+            <EmptyMedia>
+                <HistoryIcon />
+            </EmptyMedia>
+            <EmptyHeader>
+                <EmptyTitle>{_("No reconciliation actions found")}</EmptyTitle>
+                <EmptyDescription>{_("You have not performed any reconciliations in this session yet.")}</EmptyDescription>
+            </EmptyHeader>
+        </Empty>}
+    </div>
+}
+
+
+
+const ActionGroupHeader = ({ action }: { action: ActionLogType }) => {
+
+    const label = useMemo(() => {
+        switch (action.type) {
+            case 'match':
+                return _("Matched")
+            case 'payment':
+                if (action.isBulk) {
+                    return _("Bulk Payment")
+                }
+                return _("Payment")
+
+            case 'transfer':
+                if (action.isBulk) {
+                    return _("Bulk Transfer")
+                }
+                return _("Transfer")
+
+            case 'bank_entry':
+                if (action.isBulk) {
+                    return _("Bulk Bank Entry")
+                }
+                return _("Bank Entry")
+
+            default:
+                return _("Action")
+        }
+    }, [action])
+
+    return <div className='flex items-center gap-2 text-ink-gray-5'>
+        {action.type === 'match' && <GitCompareIcon className='w-4 h-4' />}
+        {action.type === 'payment' && <ReceiptIcon className='w-4 h-4' />}
+        {action.type === 'transfer' && <ArrowRightLeftIcon className='w-4 h-4' />}
+        {action.type === 'bank_entry' && <LandmarkIcon className='w-4 h-4' />}
+        <span className='flex items-center gap-2 text-sm'>
+            {label} - {dayjs(action.timestamp).fromNow()}
+        </span>
+    </div>
+}
+
+const Row = ({ item, index, isLast, action }: { item: ActionLogItem, index: number, isLast: boolean, action: ActionLogType }) => {
+
+    const isWithdrawal = item.bankTransaction.withdrawal && item.bankTransaction.withdrawal > 0
+
+    const { banks } = useGetBankAccounts()
+
+    const bank = useMemo(() => {
+        if (item.bankTransaction.bank_account) {
+            return banks?.find((bank) => bank.name === item.bankTransaction.bank_account)
+        }
+        return null
+    }, [item.bankTransaction.bank_account, banks])
+
+    const amount = item.bankTransaction.withdrawal ? item.bankTransaction.withdrawal : item.bankTransaction.deposit
+
+    const currency = item.bankTransaction.currency || getCompanyCurrency(item.bankTransaction.company ?? '')
+
+    return <div className='flex items-center gap-2 group'>
+        <div className={cn('p-3.5 group-hover:bg-surface-gray-1 border-s border-e border-t w-full', isLast ? 'rounded-b border-b' : '', index === 0 ? 'rounded-t' : '')}>
+            <div className='flex justify-between items-center'>
+                <div className='flex flex-col gap-2'>
+                    <p className='text-p-base'>{item.bankTransaction.description}</p>
+                    <div className='flex items-center gap-3'>
+                        <div className='flex gap-2 items-center'>
+                            <BankLogo bank={bank} className='h-4 mb-0' iconSize='16px' />
+                            <span className='text-sm text-ink-gray-5'>{item.bankTransaction.bank_account}</span>
+                        </div>
+                        <Separator orientation='vertical' />
+                        <div className='flex items-center gap-2 text-ink-gray-5 text-sm' title={_("Transaction Date")}>
+                            <CalendarIcon className='w-4 h-4' />
+                            <span className='text-sm'>{formatDate(item.bankTransaction.date, 'Do MMM YYYY')}</span>
+                        </div>
+                        <Separator orientation='vertical' />
+                        <div>
+                            <div className='flex items-center gap-1' title={isWithdrawal ? _("Spent") : _("Received")}>
+                                {isWithdrawal ? <ArrowUpRight className="w-5 h-5 text-ink-red-3" /> : <ArrowDownRight className="w-5 h-5 text-ink-green-3" />}
+                                <span className='text-sm text-ink-gray-5'>{formatCurrency(amount, currency)}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className='flex justify-end items-center gap-2'>
+                    <div className='text-end flex flex-col gap-2'>
+                        <a
+                            href={`/desk/${slug(item.voucher.reference_doctype)}/${item.voucher.reference_name}`}
+                            target='_blank'
+                            className='underline underline-offset-4 text-base'>
+                            {["Payment Entry", "Journal Entry"].includes(item.voucher.reference_doctype) ? "" : _("{} :", [item.voucher.reference_doctype])} {item.voucher.reference_name}
+                        </a>
+                        {item.voucher.reference_doctype === "Payment Entry" && item.voucher.doc && <PaymentEntryDetails item={item} />}
+                        {item.voucher.reference_doctype === "Journal Entry" && <JournalEntryDetails item={item} bank={bank} />}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div className='w-10 h-10 flex items-center justify-center'>
+            <CancelActionLogItem item={item} type={action.type} timestamp={action.timestamp} bank={bank} />
+        </div>
+    </div>
+}
+
+const JournalEntryDetails = ({ item, bank }: { item: ActionLogItem, bank?: SelectedBank | null }) => {
+
+    return <div className='flex items-center gap-2 text-ink-gray-5 justify-end'>
+        <WalletIcon className='w-4 h-4' />
+        <JournalEntryAccountsTable item={item} bank={bank} />
+    </div>
+}
+
+const JournalEntryAccountsTable = ({ item, bank }: { item: ActionLogItem, bank?: SelectedBank | null }) => {
+
+    const accounts = useMemo(() => {
+
+        const allAccounts = (item.voucher.doc as JournalEntry).accounts
+
+        return allAccounts.filter((acc) => bank ? acc.account !== bank.account : true)
+
+    }, [item, bank])
+
+    return <>
+        {accounts.length === 1 ? <span className='text-sm'>{accounts[0].account}</span> :
+            <HoverCard>
+                <HoverCardTrigger>
+                    <span className='text-sm cursor-pointer hover:underline underline-offset-4'>{_("Split across {} accounts", [accounts.length.toString()])}</span>
+                </HoverCardTrigger>
+                <HoverCardContent className='w-full p-2' align='end'>
+                    <Table>
+                        <TableHeader>
+                            <TableRow>
+                                <TableHead>{_("Account")}</TableHead>
+                                <TableHead className='text-end'>{_("Debit")}</TableHead>
+                                <TableHead className='text-end'>{_("Credit")}</TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {accounts.map((account) => (
+                                <TableRow key={account.account}>
+                                    <TableCell>{account.account}</TableCell>
+                                    <TableCell className='text-end font-numeric'>{formatCurrency(account.debit ?? 0, account.account_currency ?? '')}</TableCell>
+                                    <TableCell className='text-end font-numeric'>{formatCurrency(account.credit ?? 0, account.account_currency ?? '')}</TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </HoverCardContent>
+            </HoverCard>
+        }</>
+}
+
+const PaymentEntryDetails = ({ item, className }: { item: ActionLogItem, className?: string }) => {
+    if ((item.voucher.doc as PaymentEntry).payment_type === "Internal Transfer") {
+        return <TransferDetails item={item} className={className} />
+    }
+
+    const invoices = (item.voucher.doc as PaymentEntry).references ?? []
+
+    const currency = item.bankTransaction.withdrawal && item.bankTransaction.withdrawal > 0 ? (item.voucher.doc as PaymentEntry)?.paid_to_account_currency : (item.voucher.doc as PaymentEntry)?.paid_from_account_currency
+
+    return <div className='flex items-center gap-3'>
+        <div className={cn('flex items-center gap-2 text-ink-gray-5 text-sm', className)}>
+            <UserIcon className='w-4 h-4' />
+            <span className='text-sm'>{(item.voucher.doc as PaymentEntry).party_name}</span>
+        </div>
+        <Separator orientation='vertical' />
+        <HoverCard>
+            <HoverCardTrigger>
+                <div className={cn('flex items-center gap-2 text-ink-gray-5 text-sm', className)}>
+                    <ReceiptTextIcon className='w-4 h-4' />
+                    <span className='text-sm cursor-pointer hover:underline underline-offset-4'>{invoices.length === 0 ? _("No invoice linked") : invoices.length === 1 ? _("1 invoice") : _("{} invoices", [invoices.length.toString()])}</span>
+                </div>
+            </HoverCardTrigger>
+            <HoverCardContent className='w-full p-2' align='end'>
+                <div className='flex flex-col gap-2'>
+                    {invoices.map((invoice) => (
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead>{_("Document")}</TableHead>
+                                    <TableHead>{_("Invoice No")}</TableHead>
+                                    <TableHead>{_("Due Date")}</TableHead>
+                                    <TableHead className='text-end'>{_("Grand Total")}</TableHead>
+                                    <TableHead className='text-end'>{_("Allocated")}</TableHead>
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                <TableRow>
+                                    <TableCell><a href={`/desk/${slug(invoice.reference_doctype)}/${invoice.reference_name}`} target='_blank' className='underline underline-offset-4'>{invoice.reference_doctype}: {invoice.reference_name}</a></TableCell>
+                                    <TableCell>{invoice.bill_no ?? "-"}</TableCell>
+                                    <TableCell>{formatDate(invoice.due_date)}</TableCell>
+                                    <TableCell className='text-end font-numeric'>{formatCurrency(invoice.total_amount, currency ?? '')}</TableCell>
+                                    <TableCell className='text-end font-numeric'>{formatCurrency(invoice.allocated_amount, currency ?? '')}</TableCell>
+                                </TableRow>
+                            </TableBody>
+                        </Table>
+                    ))}
+                </div>
+            </HoverCardContent>
+        </HoverCard>
+
+    </div>
+}
+
+const TransferDetails = ({ item, className }: { item: ActionLogItem, className?: string }) => {
+
+    const { banks } = useGetBankAccounts()
+
+    const bank = useMemo(() => {
+
+        const isWithdrawal = item.bankTransaction.withdrawal && item.bankTransaction.withdrawal > 0
+
+        let transferAccount = ""
+
+        if (isWithdrawal) {
+            transferAccount = (item.voucher.doc as PaymentEntry).paid_to
+        } else {
+            transferAccount = (item.voucher.doc as PaymentEntry).paid_from
+        }
+
+        const transferBankAccount = banks?.find((bank) => bank.account === transferAccount)
+
+        return transferBankAccount
+
+    }, [banks, item])
+
+    return <div className={cn('flex items-center gap-2 text-ink-gray-5 text-sm', className)}>
+        <BankLogo bank={bank} className='h-5 mb-0' iconSize='16px' imageClassName='max-h-5' />
+        <span className='text-sm'>{bank?.account}</span>
+    </div>
+}
+
+const ACTION_TYPE_MAP = {
+    'bank_entry': _("Bank Entry"),
+    'payment': _("Payment"),
+    'transfer': _("Transfer"),
+    'match': _("Match"),
+}
+
+const CancelActionLogItem = ({ item, type, timestamp, bank }: { item: ActionLogItem, type: ActionLogType['type'], timestamp: number, bank?: SelectedBank | null }) => {
+
+    const [isOpen, setIsOpen] = useState(false)
+
+    const { call, loading, error } = useFrappePostCall('erpnext.accounts.doctype.bank_transaction.bank_transaction.unreconcile_transaction_entry')
+    const { mutate } = useSWRConfig()
+    const actionLog = useSetAtom(bankRecActionLog)
+    const dates = useAtomValue(bankRecDateAtom)
+    const matchFilters = useAtomValue(bankRecMatchFilters)
+    const selectedBank = useAtomValue(selectedBankAccountAtom)
+
+    const onUndo = () => {
+        call({
+            bank_transaction_id: item.bankTransaction.name,
+            voucher_type: item.voucher.reference_doctype,
+            voucher_id: item.voucher.reference_name,
+        }).then(() => {
+            toast.success(type === 'match' ? _("Unmatched") : _("Cancelled"))
+
+            if (selectedBank?.name === item.bankTransaction.bank_account) {
+                mutate(`bank-reconciliation-unreconciled-transactions-${selectedBank?.name}-${dates.fromDate}-${dates.toDate}`)
+                mutate(`bank-reconciliation-account-closing-balance-${selectedBank?.name}-${dates.toDate}`)
+                // Update the matching vouchers for the selected transaction
+                mutate(`bank-reconciliation-vouchers-${item.bankTransaction.name}-${dates.fromDate}-${dates.toDate}-${matchFilters.join(',')}`)
+            }
+
+            setTimeout(() => {
+                actionLog((prev) => {
+                    // Find the action and then remove the item from the action. If the action is empty, remove the action from the array
+                    const action = prev.find((action) => action.timestamp === timestamp)
+
+                    if (action) {
+                        action.items = action.items.filter((i) => i.bankTransaction.name !== item.bankTransaction.name)
+                    }
+                    // If the action is empty, remove the action from the array
+                    if (action && action.items.length === 0) {
+                        return prev.filter((a) => a.timestamp !== timestamp)
+                    } else {
+                        return prev.map((a) => a.timestamp === timestamp ? { ...a, items: action?.items ?? [] } : a)
+                    }
+                })
+            }, 100)
+
+            setIsOpen(false)
+
+        }).catch((error) => {
+            toast.error(_("There was an error while performing the action."), {
+                duration: 5000,
+                description: getErrorMessage(error),
+            })
+        })
+    }
+
+    return <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <AlertDialogTrigger asChild>
+                    <Button
+                        variant={'ghost'}
+                        isIconButton
+                        theme='red'
+                        title={_("Cancel")}
+                        className='hover:text-ink-red-3 hover:bg-destructive/5 text-ink-gray-5 hidden group-hover:inline-flex'>
+                        <CircleXIcon className='w-8 h-8' />
+                    </Button>
+                </AlertDialogTrigger>
+            </TooltipTrigger>
+            <TooltipContent>
+                {_("Cancel")}
+            </TooltipContent>
+        </Tooltip>
+        <AlertDialogContent className='min-w-3xl'>
+            <AlertDialogHeader>
+                <AlertDialogTitle>{type === 'match' ? _("Unmatch Transaction?") : _("Undo {}?", [item.voucher.reference_doctype])}</AlertDialogTitle>
+                <AlertDialogDescription>{type === 'match' ? _("Are you sure you want to unmatch the voucher from this transaction?") : _("Are you sure you want to cancel this {} {}?", [_(item.voucher.reference_doctype), item.voucher.reference_name])}</AlertDialogDescription>
+            </AlertDialogHeader>
+            {error && <ErrorBanner error={error} />}
+            <div className='flex flex-col gap-2'>
+                <SelectedTransactionDetails transaction={item.bankTransaction} />
+                <Table>
+                    <TableRow>
+                        <TableHead>{_("Action Type")}</TableHead>
+                        <TableCell>{ACTION_TYPE_MAP[type]}</TableCell>
+                    </TableRow>
+                    <TableRow>
+                        <TableHead>{_("Voucher Type")}</TableHead>
+                        <TableCell>{_(item.voucher.reference_doctype)}</TableCell>
+                    </TableRow>
+                    <TableRow>
+                        <TableHead>{_("Voucher Name")}</TableHead>
+                        <TableCell><a href={`/desk/${slug(item.voucher.reference_doctype)}/${item.voucher.reference_name}`} target='_blank' className='underline underline-offset-4'>{item.voucher.reference_name}</a></TableCell>
+                    </TableRow>
+                    <TableRow>
+                        <TableHead>{_("Posting Date")}</TableHead>
+                        <TableCell>{formatDate(item.voucher.posting_date, 'Do MMM YYYY')}</TableCell>
+                    </TableRow>
+                    {type === 'transfer' && item.voucher.doc && <TableRow>
+                        <TableHead>{_("Transfer Account")}</TableHead>
+                        <TableCell>
+                            <TransferDetails item={item} className='text-ink-gray-8' />
+                        </TableCell>
+                    </TableRow>}
+                    {type === 'payment' && item.voucher.doc && <TableRow>
+                        <TableHead>{_("Payment Details")}</TableHead>
+                        <TableCell>
+                            <PaymentEntryDetails item={item} className='text-ink-gray-8' />
+                        </TableCell>
+                    </TableRow>}
+                    {type === 'bank_entry' && item.voucher.doc && <TableRow>
+                        <TableHead>{_("Account")}</TableHead>
+                        <TableCell><JournalEntryAccountsTable item={item} bank={bank} /></TableCell>
+                    </TableRow>}
+                </Table>
+            </div>
+            <AlertDialogFooter>
+                <AlertDialogCancel disabled={loading}>
+                    {_("Close")}
+                </AlertDialogCancel>
+                <Button theme="red" size='md' disabled={loading} onClick={onUndo}>
+                    {loading ? <Loader2Icon className='w-4 h-4 animate-spin' /> : _(("Undo"))}
+                </Button>
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+}
+
+export default ActionLog

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

@@ -0,0 +1,334 @@
+import { useAtomValue, useSetAtom } from "jotai"
+import { bankRecClosingBalanceAtom, bankRecDateAtom, SelectedBank, selectedBankAccountAtom } from "./bankRecAtoms"
+import { FrappeConfig, FrappeContext, useFrappeGetDocCount, useFrappeGetDocList, useFrappePostCall, useSWRConfig } from "frappe-react-sdk"
+import { BankTransaction } from "@/types/Accounts/BankTransaction"
+import { Progress } from "@/components/ui/progress"
+import { useGetAccountClosingBalance, useGetAccountClosingBalanceAsPerStatement, useGetAccountOpeningBalance, useGetUnreconciledTransactions } from "./utils"
+import { flt, formatCurrency } from "@/lib/numbers"
+import { Skeleton } from "@/components/ui/skeleton"
+import { StatContainer, StatLabel, StatValue } from "@/components/ui/stats"
+import { Edit, Info, Trash2 } from "lucide-react"
+import { H4, Paragraph } from "@/components/ui/typography"
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
+import { getCompanyCurrency } from "@/lib/company"
+import _ from "@/lib/translate"
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { formatDate } from "@/lib/date"
+import { Form } from "@/components/ui/form"
+import { CurrencyFormField } from "@/components/ui/form-elements"
+import { useForm } from "react-hook-form"
+import { Button } from "@/components/ui/button"
+import { useContext, useState } from "react"
+import { Separator } from "@/components/ui/separator"
+import { BankAccountBalance } from "@/types/Accounts/BankAccountBalance"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { toast } from "sonner"
+import ErrorBanner from "@/components/ui/error-banner"
+
+const BankBalance = () => {
+
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+
+    if (!bankAccount) {
+        return null
+    }
+    return (
+        <div className="flex justify-between">
+            <div className="w-[80%] flex flex-wrap justify-between gap-2 pe-8 border-e-border border-e">
+                <OpeningBalance />
+                <ClosingBalance />
+                <ClosingBalanceAsPerStatement />
+                <Difference />
+            </div>
+
+            <ReconcileProgress />
+        </div>
+    )
+}
+
+const OpeningBalance = () => {
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+    const { data, isLoading } = useGetAccountOpeningBalance()
+
+    return <StatContainer className="min-w-48">
+        <StatLabel>{_("Opening Balance")}</StatLabel>
+        {isLoading ? <Skeleton className="w-[150px] h-9" /> : <StatValue className="font-numeric">{formatCurrency(flt(data?.message, 2), bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? ''))}</StatValue>}
+    </StatContainer>
+}
+
+const ClosingBalance = () => {
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+    const { data, isLoading } = useGetAccountClosingBalance()
+
+    return (
+        <StatContainer className="min-w-48">
+            <div className="flex items-start gap-1">
+                <StatLabel>
+                    {_("Closing Balance as per system")}
+                </StatLabel>
+                <HoverCard openDelay={100}>
+                    <HoverCardTrigger>
+                        <Info className="size-3.5 text-ink-gray-6 -mt-px" />
+                    </HoverCardTrigger>
+                    <HoverCardContent className="w-96" align="start" side="right">
+                        <H4 className="text-base">{_("Closing balance as per system")}</H4>
+                        <Paragraph className="mt-2 text-p-sm">
+                            {_("This is what the system expects the closing balance to be in your bank statement.")}
+                            <br />
+                            {_("It takes into account all the transactions that have been posted and subtracts the transactions that have not cleared yet.")}
+                            <br />
+                            {_("If your bank statement shows a different closing balance, it is because all transactions have not reconciled yet.")}
+                            <br /><br />
+                            For more information, click on the <strong>Bank Reconciliation Statement</strong> tab below.
+                        </Paragraph>
+                    </HoverCardContent>
+                </HoverCard>
+
+            </div>
+            {isLoading ? <Skeleton className="w-[150px] h-9" /> : <StatValue className="font-numeric">{formatCurrency(flt(data?.message, 2), bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? ''))}</StatValue>}
+        </StatContainer>
+    )
+}
+
+const Difference = () => {
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+
+    const { data, isLoading } = useGetAccountClosingBalance()
+
+    const value = useAtomValue(bankRecClosingBalanceAtom(bankAccount?.name ?? ''))
+
+    const difference = flt(value.value - (data?.message ?? 0))
+
+    const isError = difference !== 0
+
+    return <StatContainer className="w-fit text-end sm:min-w-56">
+        <StatLabel className="text-end">{_("Difference")}</StatLabel>
+        {isLoading ? <Skeleton className="w-[150px] h-9" /> : <StatValue className={isError ? 'text-ink-red-3 font-numeric' : 'font-numeric'}>
+            {formatCurrency(difference,
+                bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? ''))
+            }</StatValue>}
+    </StatContainer>
+}
+
+const ReconcileProgress = () => {
+
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+
+    const dates = useAtomValue(bankRecDateAtom)
+
+    const { data: totalCount } = useFrappeGetDocCount<BankTransaction>('Bank Transaction', [
+        ["bank_account", "=", bankAccount?.name ?? ''],
+        ['docstatus', '=', 1],
+        ['date', '<=', dates?.toDate],
+        ['date', '>=', dates?.fromDate]
+    ], false, undefined, {
+        revalidateOnFocus: false
+    })
+
+    const { data: unreconciledTransactions, } = useGetUnreconciledTransactions()
+
+    const reconciledCount = (totalCount ?? 0) - (unreconciledTransactions?.message?.length ?? 0)
+
+    const progress = (totalCount ? reconciledCount / totalCount : 0) * 100
+
+    return <div className="w-[18%] flex flex-col gap-1 items-end">
+        <div className="w-full">
+            <Progress
+                value={progress}
+                max={100}
+                size="md"
+                label="Progress"
+                hint
+                hintText={`${reconciledCount} / ${totalCount} ${_("reconciled")}`} />
+        </div>
+    </div>
+}
+
+const ClosingBalanceAsPerStatement = () => {
+
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+    const dates = useAtomValue(bankRecDateAtom)
+    const setValue = useSetAtom(bankRecClosingBalanceAtom(bankAccount?.name ?? ''))
+
+    const { data, isLoading } = useGetAccountClosingBalanceAsPerStatement({
+        onSuccess: (data) => {
+            if (data?.message && data?.message?.balance) {
+                setValue({
+                    value: data?.message?.balance,
+                    stringValue: data?.message?.balance.toString()
+                })
+            }
+        }
+    })
+
+    const isDateSame = data?.message?.date === dates.toDate
+
+    const [isOpen, setIsOpen] = useState(false)
+
+
+    return <StatContainer className="min-w-48">
+        <StatLabel>{_("Closing Balance as per statement")}</StatLabel>
+        <div className="flex flex-col gap-2 items-start">
+            <Dialog open={isOpen} onOpenChange={setIsOpen}>
+                <DialogTrigger>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <div className="flex items-center gap-4 underline cursor-pointer underline-offset-6" role="button">
+                                {isLoading ? <Skeleton className="w-[150px] h-9" /> : <StatValue className="font-numeric">{formatCurrency(flt(data?.message?.balance, 2), bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? ''))}</StatValue>}
+                                <Edit className="w-4 h-4" />
+                            </div>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                            {_("Click to set the closing balance as per statement")}
+                        </TooltipContent>
+                    </Tooltip>
+                </DialogTrigger>
+                <DialogContent className="min-w-xl">
+                    <ClosingBalanceForm
+                        defaultBalance={data?.message?.balance ?? 0}
+                        date={dates.toDate}
+                        bankAccount={bankAccount}
+                        onClose={() => setIsOpen(false)}
+                    />
+
+
+                </DialogContent>
+            </Dialog>
+            {!isDateSame && data?.message.date && <span className="text-xs font-medium text-ink-red-3">{_("As of {0}", [formatDate(data?.message?.date ?? '', 'Do MMM YYYY')])}</span>}
+        </div>
+    </StatContainer>
+
+}
+
+const ClosingBalanceForm = ({ defaultBalance, date, bankAccount, onClose }: { defaultBalance: number, date: string, bankAccount: SelectedBank | null, onClose: VoidFunction }) => {
+
+    const { mutate } = useSWRConfig()
+
+    const form = useForm<{ balance: number }>({
+        defaultValues: {
+            balance: defaultBalance
+        }
+    })
+
+    const setValue = useSetAtom(bankRecClosingBalanceAtom(bankAccount?.name ?? ''))
+
+    const { call, loading, error } = useFrappePostCall("erpnext.accounts.doctype.bank_account.bank_account.set_closing_balance_as_per_statement")
+
+    const onSubmit = (data: { balance: number }) => {
+        if (data.balance) {
+            call({
+                bank_account: bankAccount?.name ?? '',
+                date: date,
+                balance: data.balance
+            })
+                .then(() => {
+                    // Mutate the closing balance as per statement
+                    mutate(`bank-reconciliation-account-closing-balance-as-per-statement-${bankAccount?.name}-${date}`)
+                    setValue({
+                        value: data.balance,
+                        stringValue: data.balance.toString()
+                    })
+                    toast.success(_("Closing balance set."))
+                    onClose()
+
+
+                })
+        } else {
+            toast.error(_("Closing balance is required."))
+        }
+    }
+
+    const currency = bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? '')
+
+
+    return <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+            <DialogHeader>
+                <DialogTitle>{_("Set closing balance as per bank statement")}</DialogTitle>
+                <DialogDescription>
+                    {_("Enter the closing balance you see in your bank statement for {0} as of the {1}", [bankAccount?.account_name ?? bankAccount?.name ?? '', formatDate(date, 'Do MMM YYYY')])}
+                </DialogDescription>
+            </DialogHeader>
+            {error && <ErrorBanner error={error} />}
+            <div className="py-4">
+                <CurrencyFormField
+                    name="balance"
+                    label={_("Closing balance on bank statement as of {0}", [formatDate(date, 'Do MMM YYYY')])}
+                    isRequired
+                    currency={currency}
+                />
+            </div>
+
+            <DialogFooter>
+                <DialogClose asChild>
+                    <Button variant={'outline'} size='md' disabled={loading}>{_("Cancel")}</Button>
+                </DialogClose>
+                <Button type='submit' size='md' disabled={loading}>{_("Save")}</Button>
+            </DialogFooter>
+
+            <ClosingBalancesList bankAccount={bankAccount} date={date} />
+        </form>
+    </Form>
+}
+
+const ClosingBalancesList = ({ bankAccount, date }: { bankAccount: SelectedBank | null, date: string }) => {
+
+    const { data, mutate } = useFrappeGetDocList<BankAccountBalance>("Bank Account Balance", {
+        filters: [["bank_account", "=", bankAccount?.name ?? ''], ["date", "<=", date]],
+        orderBy: {
+            field: "date",
+            order: "desc"
+        },
+        fields: ["date", "balance", "name"],
+        limit: 10
+    })
+
+    const { db } = useContext(FrappeContext) as FrappeConfig
+
+    const onDelete = (name: string) => {
+        toast.promise(db.deleteDoc("Bank Account Balance", name).then(() => {
+            mutate()
+        }), {
+            loading: _("Deleting closing balance..."),
+            success: _("Closing balance deleted."),
+            error: _("Failed to delete closing balance.")
+        })
+    }
+
+    if (data?.length === 0) {
+        return null
+    }
+
+    return <div>
+        <Separator className="my-8" />
+        <p className="text-sm text-center">{_("Balances as per bank statement before {0}", [formatDate(date, 'Do MMM YYYY')])}</p>
+        <Table>
+            <TableHeader>
+                <TableRow>
+                    <TableHead>{_("Date")}</TableHead>
+                    <TableHead className="text-end">{_("Balance")}</TableHead>
+                    <TableHead></TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {data?.map((item) => (
+                    <TableRow key={item.name}>
+                        <TableCell>{formatDate(item.date, 'Do MMM YYYY')}</TableCell>
+                        <TableCell className="text-end">{formatCurrency(flt(item.balance, 2), bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? ''))}</TableCell>
+                        <TableCell className="text-end">
+                            <Button
+                                title={_("Delete")}
+                                type='button' isIconButton variant='ghost' onClick={() => onDelete(item.name)}>
+                                <Trash2 />
+                            </Button>
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    </div>
+
+}
+
+export default BankBalance

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

@@ -0,0 +1,355 @@
+import { useAtomValue } from "jotai"
+import { MissingFiltersBanner } from "./MissingFiltersBanner"
+import { bankRecDateAtom, SelectedBank, selectedBankAccountAtom } from "./bankRecAtoms"
+import { useCurrentCompany } from "@/hooks/useCurrentCompany"
+import { Paragraph } from "@/components/ui/typography"
+import type { ColumnDef } from "@tanstack/react-table"
+import { useCallback, useMemo, useState } from "react"
+import { useFrappeGetCall, useFrappePostCall, useSWRConfig } from "frappe-react-sdk"
+import { QueryReportReturnType } from "@/types/custom/Reports"
+import { formatDate } from "@/lib/date"
+import { ListView, type ListViewColumnMeta } from "@/components/ui/list-view"
+import { Table, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { formatCurrency } from "@/lib/numbers"
+import { getCompanyCurrency } from "@/lib/company"
+import { slug } from "@/lib/frappe"
+import { CheckCircle2, ReceiptTextIcon, XCircle } from "lucide-react"
+import ErrorBanner from "@/components/ui/error-banner"
+import { Badge } from "@/components/ui/badge"
+import _ from "@/lib/translate"
+import { useCopyToClipboard } from "usehooks-ts"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { toast } from "sonner"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Form } from "@/components/ui/form"
+import { useForm } from "react-hook-form"
+import { DateField } from "@/components/ui/form-elements"
+import { Empty, EmptyMedia, EmptyHeader, EmptyTitle, EmptyDescription } from "@/components/ui/empty"
+
+const BankClearanceSummary = () => {
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+    const dates = useAtomValue(bankRecDateAtom)
+
+    if (!bankAccount) {
+        return <MissingFiltersBanner text={_("Please select a bank account to view the bank clearance summary.")} />
+    }
+
+    if (!dates) {
+        return <MissingFiltersBanner text={_("Please select dates to view the bank clearance summary.")} />
+    }
+
+    return <BankClearanceSummaryView />
+}
+interface BankClearanceSummaryEntry {
+    payment_document_type: string
+    payment_entry: string
+    posting_date: string,
+    cheque_no?: string,
+    amount: number,
+    against: string,
+    clearance_date: string,
+}
+
+const BankClearanceSummaryView = () => {
+
+    const companyID = useCurrentCompany()
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+    const dates = useAtomValue(bankRecDateAtom)
+
+    const filters = useMemo(() => {
+        return JSON.stringify({
+            account: bankAccount?.account,
+            from_date: dates.fromDate,
+            to_date: dates.toDate
+        })
+    }, [bankAccount, dates])
+
+    const { data, error, mutate } = useFrappeGetCall<{ message: QueryReportReturnType<BankClearanceSummaryEntry> }>('frappe.desk.query_report.run', {
+        report_name: 'Bank Clearance Summary',
+        filters,
+        ignore_prepared_report: 1,
+        are_default_filters: false,
+    }, `Report-Bank Clearance Summary-${filters}`, { keepPreviousData: true, revalidateOnFocus: false }, 'POST')
+
+    const formattedFromDate = formatDate(dates.fromDate)
+    const formattedToDate = formatDate(dates.toDate)
+
+    const [, copyToClipboard] = useCopyToClipboard()
+
+    const onCopy = useCallback(
+        (text: string) => {
+            copyToClipboard(text).then(() => {
+                toast.success(_("Copied to clipboard"))
+            })
+        },
+        [copyToClipboard, _],
+    )
+
+    const accountCurrency = useMemo(
+        () => bankAccount?.account_currency ?? getCompanyCurrency(companyID),
+        [bankAccount?.account_currency, companyID],
+    )
+
+    const clearanceColumns = useMemo<ColumnDef<BankClearanceSummaryEntry, unknown>[]>(
+        () => [
+            {
+                accessorKey: "payment_document_type",
+                header: _("Document Type"),
+                size: 140,
+                cell: ({ row }) => _(row.original.payment_document_type),
+            },
+            {
+                id: "payment_entry",
+                header: _("Payment Document"),
+                size: 160,
+                meta: {
+                    getTooltipText: (r) => {
+                        const x = r as BankClearanceSummaryEntry
+                        return [x.payment_document_type, x.payment_entry].filter(Boolean).join(" · ") || undefined
+                    },
+                } satisfies ListViewColumnMeta,
+                cell: ({ row }) => (
+                    <a
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-ink-gray-8 block min-w-0 w-full underline underline-offset-4"
+                        href={`/desk/${slug(row.original.payment_document_type)}/${row.original.payment_entry}`}
+                    >
+                        {row.original.payment_entry}
+                    </a>
+                ),
+            },
+            {
+                accessorKey: "posting_date",
+                header: _("Posting Date"),
+                size: 118,
+                meta: { tabularNums: true } satisfies ListViewColumnMeta,
+                cell: ({ row }) => formatDate(row.original.posting_date),
+            },
+            {
+                accessorKey: "cheque_no",
+                header: _("Cheque/Reference Number"),
+                size: 160,
+                cell: ({ row }) => {
+                    const ref = row.original.cheque_no ?? ""
+                    return (
+                        <Tooltip delayDuration={500}>
+                            <TooltipTrigger asChild>
+                                <button
+                                    type="button"
+                                    className="text-ink-gray-8 hover:underline min-w-0 w-full cursor-pointer truncate text-start underline-offset-4"
+                                    onClick={() => onCopy(ref)}
+                                >
+                                    {ref}
+                                </button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                                {ref}
+                            </TooltipContent>
+                        </Tooltip>
+
+                    )
+                },
+            },
+            {
+                accessorKey: "clearance_date",
+                header: _("Clearance Date"),
+                size: 118,
+                meta: { tabularNums: true } satisfies ListViewColumnMeta,
+                cell: ({ row }) => formatDate(row.original.clearance_date),
+            },
+            {
+                accessorKey: "against",
+                header: _("Against Account"),
+                size: 250,
+            },
+            {
+                accessorKey: "amount",
+                header: _("Amount"),
+                size: 150,
+                meta: { align: "right" } satisfies ListViewColumnMeta,
+                cell: ({ row }) => <span className="font-numeric">{formatCurrency(row.original.amount, accountCurrency)}</span>,
+            },
+            {
+                id: "status",
+                header: _("Status"),
+                size: 200,
+                meta: { truncate: false, truncateTooltip: false } satisfies ListViewColumnMeta,
+                cell: ({ row }) => {
+                    const r = row.original
+                    return r.clearance_date ? (
+                        <Badge theme="green">
+                            <CheckCircle2 />
+                            {_("Cleared")}
+                        </Badge>
+                    ) : (
+                        <div className="flex min-w-0 flex-wrap items-center gap-2">
+                            <Badge theme="red">
+                                <XCircle />
+                                {_("Not Cleared")}
+                            </Badge>
+                            <SetClearanceDateButton
+                                voucher={r}
+                                bankAccount={bankAccount}
+                                companyID={companyID}
+                                mutate={mutate}
+                            />
+                        </div>
+                    )
+                },
+            },
+        ],
+        [_, accountCurrency, bankAccount, companyID, mutate, onCopy],
+    )
+
+    return <div className="space-y-4 py-2">
+
+        <div>
+            <Paragraph className="text-sm">
+                <span dangerouslySetInnerHTML={{
+                    __html: _("Below is a list of all accounting entries posted against the bank account {0} between {1} and {2}.", [`<strong>${bankAccount?.account}</strong>`, `<strong>${formattedFromDate}</strong>`, `<strong>${formattedToDate}</strong>`])
+                }} />
+            </Paragraph>
+        </div>
+
+        {error && <ErrorBanner error={error} />}
+
+        {data && data.message.result.length > 0 ? (
+            <ListView
+                data={data.message.result}
+                columns={clearanceColumns}
+                getRowId={(row) => `${row.payment_entry}-${row.posting_date}`}
+                maxHeight="calc(100vh - 200px)"
+                scrollAreaClassName="min-h-[calc(100vh-200px)]"
+                emptyState={_("No rows to display.")}
+            />
+        ) : null}
+
+        {data && data.message.result.length == 0 &&
+            <Empty>
+                <EmptyMedia>
+                    <ReceiptTextIcon />
+                </EmptyMedia>
+                <EmptyHeader>
+                    <EmptyTitle>{_("No entries found")}</EmptyTitle>
+                    <EmptyDescription>{_("There are no accounting entries in the system for the selected account and dates.")}</EmptyDescription>
+                </EmptyHeader>
+            </Empty>
+        }
+
+
+    </div>
+}
+
+const SetClearanceDateButton = ({ voucher, bankAccount, companyID, mutate }: { voucher: BankClearanceSummaryEntry, bankAccount: SelectedBank | null, companyID: string, mutate: VoidFunction }) => {
+
+    const [open, setOpen] = useState(false)
+
+    const onClose = () => {
+        setOpen(false)
+        mutate()
+    }
+
+    return <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger disabled={!bankAccount}>
+            <Tooltip delayDuration={500}>
+                <TooltipTrigger>
+                    <Button variant='link' size="sm" className="px-0" theme="red">{_("Force Clear")}</Button>
+                </TooltipTrigger>
+                <TooltipContent align='start'>
+                    {_("Set the clearance date for this voucher without reconciling with a bank transaction.")}
+                </TooltipContent>
+            </Tooltip>
+        </DialogTrigger>
+        <DialogContent className="min-w-2xl">
+            {bankAccount && <ForceClearVoucherForm voucher={voucher} bankAccount={bankAccount} companyID={companyID} onClose={onClose} />}
+        </DialogContent>
+    </Dialog>
+}
+
+const ForceClearVoucherForm = ({ voucher, bankAccount, companyID, onClose }: { voucher: BankClearanceSummaryEntry, bankAccount: SelectedBank, companyID: string, onClose: () => void }) => {
+
+    const { mutate } = useSWRConfig()
+
+    const dates = useAtomValue(bankRecDateAtom)
+    const form = useForm<{ clearance_date: string }>({
+        defaultValues: {
+            clearance_date: voucher.posting_date,
+        }
+    })
+
+    const { call, loading, error } = useFrappePostCall('erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.update_clearance_date')
+
+    const onSubmit = (data: { clearance_date: string }) => {
+        call({
+            payment_document: voucher.payment_document_type,
+            payment_entry: voucher.payment_entry,
+            account: bankAccount.account,
+            clearance_date: data.clearance_date,
+        })
+            .then(() => {
+                toast.success(_("Clearance date updated"))
+                onClose()
+                mutate(`bank-reconciliation-account-closing-balance-${bankAccount?.name}-${dates.toDate}`)
+            })
+    }
+
+    return <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+
+            <div className='flex flex-col gap-4'>
+
+                <DialogHeader>
+                    <DialogTitle>{_("Force Clear Voucher")}</DialogTitle>
+                    <DialogDescription>
+                        {_("Set the clearance date for this voucher without reconciling with a bank transaction.")}
+                    </DialogDescription>
+                </DialogHeader>
+                {error && <ErrorBanner error={error} />}
+                <div>
+                    <Table>
+                        <TableHeader>
+                            <TableRow>
+                                <TableHead>{_("Payment Document")}</TableHead>
+                                <TableCell><a target="_blank" className="underline underline-offset-4"
+                                    href={`/desk/${slug(voucher.payment_document_type)}/${voucher.payment_entry}`}>{_(voucher.payment_document_type)} : {voucher.payment_entry}</a></TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableHead>{_("Posting Date")}</TableHead>
+                                <TableCell>{formatDate(voucher.posting_date)}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableHead>{_("Cheque/Reference Number")}</TableHead>
+                                <TableCell title={voucher.cheque_no}>{voucher.cheque_no?.slice(0, 40)}{voucher.cheque_no?.length && voucher.cheque_no?.length > 40 ? "..." : ""}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableHead>{_("Amount")}</TableHead>
+                                <TableCell className="text-end">{formatCurrency(voucher.amount, bankAccount?.account_currency ?? getCompanyCurrency(companyID))}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableHead>{_("Against Account")}</TableHead>
+                                <TableCell><a target="_blank" className="underline underline-offset-4" href={`/desk/account/${voucher.against}`}>{voucher.against}</a></TableCell>
+                            </TableRow>
+                        </TableHeader>
+                    </Table>
+                </div>
+                <DateField
+                    name='clearance_date'
+                    label={_("Clearance Date")}
+                    isRequired
+                    inputProps={{ autoFocus: true }}
+                />
+
+                <DialogFooter>
+                    <DialogClose asChild>
+                        <Button variant={'outline'} disabled={loading} size='md'>{_("Cancel")}</Button>
+                    </DialogClose>
+                    <Button type='submit' disabled={loading} size='md'>{_("Submit")}</Button>
+                </DialogFooter>
+            </div>
+        </form>
+    </Form>
+}
+
+export default BankClearanceSummary

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

@@ -0,0 +1,831 @@
+import { useAtom, useAtomValue, useSetAtom } from "jotai"
+import { bankRecRecordJournalEntryModalAtom, bankRecSelectedTransactionAtom, bankRecUnreconcileModalAtom, selectedBankAccountAtom } from "./bankRecAtoms"
+import { Dialog, DialogContent, DialogTitle, DialogDescription, DialogHeader, DialogFooter, DialogClose } from "@/components/ui/dialog"
+import _ from "@/lib/translate"
+import { UnreconciledTransaction, useGetRuleForTransaction, useRefreshUnreconciledTransactions, useUpdateActionLog } from "./utils"
+import { useFieldArray, useForm, useFormContext, useWatch } from "react-hook-form"
+import { JournalEntry } from "@/types/Accounts/JournalEntry"
+import { getCompanyCostCenter, getCompanyCurrency } from "@/lib/company"
+import { FrappeConfig, FrappeContext, useFrappePostCall } from "frappe-react-sdk"
+import { toast } from "sonner"
+import ErrorBanner from "@/components/ui/error-banner"
+import { Button } from "@/components/ui/button"
+import SelectedTransactionDetails from "./SelectedTransactionDetails"
+import { AccountFormField, CurrencyFormField, DataField, DateField, LinkFormField, PartyTypeFormField, SmallTextField } from "@/components/ui/form-elements"
+import { Form } from "@/components/ui/form"
+import { useCallback, useContext, useMemo, useRef, useState } from "react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Checkbox } from "@/components/ui/checkbox"
+import { ArrowDownRight, ArrowUpRight, Plus, Trash2 } from "lucide-react"
+import { flt, formatCurrency } from "@/lib/numbers"
+import { cn } from "@/lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import SelectedTransactionsTable from "./SelectedTransactionsTable"
+import { JournalEntryAccount } from "@/types/Accounts/JournalEntryAccount"
+import { BankTransaction } from "@/types/Accounts/BankTransaction"
+import FileUploadBanner from "@/components/common/FileUploadBanner"
+import { Label } from "@/components/ui/label"
+import { FileDropzone } from "@/components/ui/file-dropzone"
+import { useGetAccounts } from "@/components/common/AccountsDropdown"
+import { useHotkeys } from "react-hotkeys-hook"
+
+const BankEntryModal = () => {
+
+    const [isOpen, setIsOpen] = useAtom(bankRecRecordJournalEntryModalAtom)
+
+    return (
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <DialogContent className='min-w-[95vw]'>
+                <DialogHeader>
+                    <DialogTitle>{_("Bank Entry")}</DialogTitle>
+                    <DialogDescription>
+                        {_("Record a journal entry for expenses, income or split transactions.")}
+                    </DialogDescription>
+                </DialogHeader>
+                <RecordBankEntryModalContent />
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+const RecordBankEntryModalContent = () => {
+
+    const selectedBankAccount = useAtomValue(selectedBankAccountAtom)
+
+    const selectedTransaction = useAtomValue(bankRecSelectedTransactionAtom(selectedBankAccount?.name ?? ''))
+
+    if (!selectedTransaction || !selectedBankAccount || selectedTransaction.length === 0) {
+        return <div className='p-4'>
+            <span className='text-center'>{_("No transaction selected")}</span>
+        </div>
+    }
+
+    if (selectedTransaction.length === 1) {
+        return <BankEntryForm
+            selectedTransaction={selectedTransaction[0]} />
+    }
+
+    return <BulkBankEntryForm
+        selectedTransactions={selectedTransaction}
+    />
+
+}
+
+const BulkBankEntryForm = ({ selectedTransactions }: { selectedTransactions: UnreconciledTransaction[] }) => {
+
+    const form = useForm<{
+        account: string
+    }>({
+        defaultValues: {
+            account: ''
+        }
+    })
+
+    const { call, loading, error } = useFrappePostCall<{ message: { transaction: BankTransaction, journal_entry: JournalEntry }[] }>('erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.create_bulk_bank_entry_and_reconcile')
+
+    const onReconcile = useRefreshUnreconciledTransactions()
+    const addToActionLog = useUpdateActionLog()
+
+    const setIsOpen = useSetAtom(bankRecRecordJournalEntryModalAtom)
+
+    const onSubmit = (data: { account: string }) => {
+
+        call({
+            bank_transactions: selectedTransactions.map(transaction => transaction.name),
+            account: data.account
+        }).then(({ message }) => {
+
+            addToActionLog({
+                type: 'bank_entry',
+                timestamp: (new Date()).getTime(),
+                isBulk: true,
+                items: message.map((item) => ({
+                    bankTransaction: item.transaction,
+                    voucher: {
+                        reference_doctype: "Journal Entry",
+                        reference_name: item.journal_entry.name,
+                        doc: item.journal_entry,
+                        posting_date: item.journal_entry.posting_date,
+                    }
+                })),
+                bulkCommonData: {
+                    account: data.account,
+                }
+            })
+
+            toast.success(_("Bank Entries Created"), {
+                duration: 4000,
+            })
+
+            // Set this to the last selected transaction
+            onReconcile(selectedTransactions[selectedTransactions.length - 1])
+            setIsOpen(false)
+        })
+    }
+
+    return <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="flex flex-col gap-4">
+                {error && <ErrorBanner error={error} />}
+                <SelectedTransactionsTable />
+
+                <div className="grid grid-cols-3 gap-4">
+                    <AccountFormField
+                        name='account'
+                        filterFunction={(acc) => {
+                            // Do not allow payable and receivable accounts
+                            return acc.account_type !== 'Payable' && acc.account_type !== 'Receivable'
+                        }}
+                        label={_('Account')}
+                        isRequired
+                    />
+                </div>
+
+                <DialogFooter>
+                    <DialogClose asChild>
+                        <Button size='md' variant={'outline'} disabled={loading}>{_("Cancel")}</Button>
+                    </DialogClose>
+                    <Button size='md' type='submit' disabled={loading}>{_("Submit")}</Button>
+                </DialogFooter>
+            </div>
+        </form>
+    </Form>
+}
+
+
+interface BankEntryFormData extends Pick<JournalEntry, 'voucher_type' | 'cheque_date' | 'posting_date' | 'cheque_no' | 'user_remark'> {
+    entries: JournalEntry['accounts']
+}
+
+
+const BankEntryForm = ({ selectedTransaction }: { selectedTransaction: UnreconciledTransaction }) => {
+
+    const selectedBankAccount = useAtomValue(selectedBankAccountAtom)
+
+    const { data: rule } = useGetRuleForTransaction(selectedTransaction)
+
+    const setIsOpen = useSetAtom(bankRecRecordJournalEntryModalAtom)
+
+    const onClose = () => {
+        setIsOpen(false)
+    }
+
+    const isWithdrawal = (selectedTransaction.withdrawal && selectedTransaction.withdrawal > 0) ? true : false
+
+    const defaultAccounts = useMemo(() => {
+
+        const isWithdrawal = (selectedTransaction.withdrawal && selectedTransaction.withdrawal > 0) ? true : false
+
+        const accounts: Partial<JournalEntryAccount>[] = [
+            {
+                account: selectedBankAccount?.account ?? '',
+                bank_account: selectedTransaction.bank_account,
+                // Bank is debited if it's a deposit
+                debit: isWithdrawal ? 0 : selectedTransaction.unallocated_amount,
+                credit: isWithdrawal ? selectedTransaction.unallocated_amount : 0,
+                party_type: '',
+                party: '',
+                cost_center: ''
+            }]
+
+        // If there is no rule, we can just add the entries for the bank account transaction and the other side will be the reverse
+        if (!rule) {
+            accounts.push(
+                {
+                    account: '',
+                    // Amounts will be the reverse of the bank account transaction
+                    debit: isWithdrawal ? selectedTransaction.unallocated_amount : 0,
+                    credit: isWithdrawal ? 0 : selectedTransaction.unallocated_amount,
+                    cost_center: getCompanyCostCenter(selectedTransaction.company ?? '') ?? '',
+                }
+            )
+        } else {
+            // Rule exists, so we need to check the type of rule
+            if (!rule.bank_entry_type || rule.bank_entry_type === "Single Account") {
+                // Only a single account needs to be added
+                accounts.push({
+                    account: rule.account ?? '',
+                    // Amounts will be the reverse of the bank account transaction
+                    debit: isWithdrawal ? selectedTransaction.unallocated_amount : 0,
+                    credit: isWithdrawal ? 0 : selectedTransaction.unallocated_amount,
+                    cost_center: getCompanyCostCenter(selectedTransaction.company ?? '') ?? '',
+                })
+            } else {
+                // For multiple accounts, we need to loop over and add entries for each
+                // The last row will just be the remaining amount
+                let hasTotallyEmptyRowEarlier = false;
+
+                let totalDebits = isWithdrawal ? 0 : selectedTransaction.unallocated_amount ?? 0
+                let totalCredits = isWithdrawal ? selectedTransaction.unallocated_amount ?? 0 : 0
+
+                for (let i = 0; i < (rule.accounts?.length ?? 0); i++) {
+
+                    const acc = rule.accounts?.[i]
+                    // If it's the last row, add the difference amount
+                    if (i === (rule.accounts?.length ?? 0) - 1 && !hasTotallyEmptyRowEarlier) {
+
+                        const differenceAmount = flt(totalDebits - totalCredits, 2)
+                        accounts.push({
+                            account: acc?.account ?? '',
+                            debit: differenceAmount > 0 ? 0 : Math.abs(differenceAmount),
+                            credit: differenceAmount > 0 ? Math.abs(differenceAmount) : 0,
+                            cost_center: getCompanyCostCenter(selectedTransaction.company ?? '') ?? '',
+                            user_remark: acc?.user_remark ?? '',
+                        })
+                    } else {
+
+                        /**
+                         * The debit and credit amounts can also be expressions - like "transaction_amount * 0.5"
+                         * So we need to compute the value of the expression
+                         * We can use the eval function to do this. But we need to expose certain variables to the expression.
+                         * One of them is transaction_amount which is the unallocated amount of the selected transaction
+                         * @param expression - The expression to compute
+                         * @returns The computed value
+                         */
+                        const computeExpression = (expression: string) => {
+
+                            const script = `
+                                const transaction_amount = ${selectedTransaction.unallocated_amount ?? 0}
+                                ${expression};
+                            `
+
+                            let value = 0;
+
+                            try {
+                                value = window.eval(script);
+                            } catch (error: unknown) {
+                                console.error(error);
+                                value = 0;
+                            }
+
+                            return value;
+                        }
+                        if (!acc?.debit && !acc?.credit) {
+                            hasTotallyEmptyRowEarlier = true;
+                        }
+
+                        const computedDebit = acc?.debit ? flt(computeExpression(acc.debit), 2) : 0
+                        const computedCredit = acc?.credit ? flt(computeExpression(acc.credit), 2) : 0
+
+                        totalDebits = flt(totalDebits + computedDebit, 2)
+                        totalCredits = flt(totalCredits + computedCredit, 2)
+                        accounts.push({
+                            account: acc?.account ?? '',
+                            debit: computedDebit,
+                            credit: computedCredit,
+                            cost_center: getCompanyCostCenter(selectedTransaction.company ?? '') ?? '',
+                            user_remark: acc?.user_remark ?? '',
+                        })
+                    }
+                }
+            }
+        }
+
+        return accounts
+
+    }, [rule, selectedTransaction, selectedBankAccount])
+
+    const form = useForm<BankEntryFormData>({
+        defaultValues: {
+            voucher_type: selectedBankAccount?.is_credit_card ? 'Credit Card Entry' : 'Bank Entry',
+            cheque_date: selectedTransaction.date,
+            posting_date: selectedTransaction.date,
+            cheque_no: (selectedTransaction.reference_number || selectedTransaction.description || '').slice(0, 140),
+            user_remark: selectedTransaction.description,
+            entries: defaultAccounts,
+        }
+    })
+
+    const onReconcile = useRefreshUnreconciledTransactions()
+
+    const { call: createBankEntry, loading, error, isCompleted } = useFrappePostCall<{ message: { transaction: BankTransaction, journal_entry: JournalEntry } }>('erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.create_bank_entry_and_reconcile')
+
+    const setBankRecUnreconcileModalAtom = useSetAtom(bankRecUnreconcileModalAtom)
+    const addToActionLog = useUpdateActionLog()
+
+    const { file: frappeFile } = useContext(FrappeContext) as FrappeConfig
+
+    const [isUploading, setIsUploading] = useState(false)
+    const [uploadProgress, setUploadProgress] = useState(0)
+
+    const [files, setFiles] = useState<File[]>([])
+
+    const onSubmit = (data: BankEntryFormData) => {
+
+        createBankEntry({
+            bank_transaction_name: selectedTransaction.name,
+            ...data
+        }).then(async ({ message }) => {
+
+            addToActionLog({
+                type: 'bank_entry',
+                isBulk: false,
+                timestamp: (new Date()).getTime(),
+                items: [
+                    {
+                        bankTransaction: message.transaction,
+                        voucher: {
+                            reference_doctype: "Journal Entry",
+                            reference_name: message.journal_entry.name,
+                            reference_no: message.journal_entry.cheque_no,
+                            reference_date: message.journal_entry.cheque_date,
+                            posting_date: message.journal_entry.posting_date,
+                            doc: message.journal_entry,
+                        }
+                    }
+                ]
+            })
+            toast.success(_("Bank Entry Created"), {
+                duration: 4000,
+                closeButton: true,
+                action: {
+                    label: _("Undo"),
+                    onClick: () => setBankRecUnreconcileModalAtom(selectedTransaction.name)
+                },
+                actionButtonStyle: {
+                    backgroundColor: "rgb(0, 138, 46)"
+                }
+            })
+
+            if (files.length > 0) {
+                setIsUploading(true)
+
+                const uploadPromises = files.map(f => {
+                    return frappeFile.uploadFile(f, {
+                        isPrivate: true,
+                        doctype: "Journal Entry",
+                        docname: message.journal_entry.name,
+                    }, (_bytesUploaded, _totalBytes, progress) => {
+
+                        setUploadProgress((currentProgress) => {
+                            //If there are multiple files, we need to add the progress to the current progress
+                            return currentProgress + ((progress?.progress ?? 0) / files.length)
+                        })
+
+                    })
+                })
+
+                return Promise.all(uploadPromises).then(() => {
+                    setUploadProgress(0)
+                    setIsUploading(false)
+                }).catch((error) => {
+                    console.error(error)
+                    toast.error(_("Error uploading attachments"), {
+                        duration: 4000,
+                    })
+                    setIsUploading(false)
+                })
+            } else {
+                return Promise.resolve()
+            }
+
+        }).then(() => {
+            onReconcile(selectedTransaction)
+            onClose()
+        })
+    }
+
+
+    useHotkeys('meta+s', () => {
+        form.handleSubmit(onSubmit)()
+    }, {
+        enabled: true,
+        preventDefault: true,
+        enableOnFormTags: true
+    })
+
+    if (isUploading && isCompleted) {
+        return <FileUploadBanner uploadProgress={uploadProgress} />
+    }
+
+    return <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className='flex flex-col gap-4'>
+                {error && <ErrorBanner error={error} />}
+                <div className='grid grid-cols-2 gap-4'>
+                    <SelectedTransactionDetails transaction={selectedTransaction} />
+
+                    <div className='flex flex-col gap-4'>
+                        <div className='grid grid-cols-2 gap-4'>
+                            <DateField
+                                name='posting_date'
+                                label={_("Posting Date")}
+                                isRequired
+                                inputProps={{ autoFocus: false }}
+                            />
+                            <DateField
+                                name='cheque_date'
+                                label={_("Reference Date")}
+                                isRequired
+                                inputProps={{ autoFocus: false }}
+                                rules={{
+                                    required: _("Reference Date is required"),
+                                }}
+                            />
+                        </div>
+                        <DataField name='cheque_no' label={_("Reference")} isRequired inputProps={{ autoFocus: false }}
+                            rules={{
+                                required: _("Reference is required"),
+                            }} />
+                    </div>
+                </div>
+
+                <div>
+                    <Entries company={selectedTransaction.company ?? ''} isWithdrawal={isWithdrawal} currency={selectedTransaction.currency ?? getCompanyCurrency(selectedTransaction.company ?? '')} />
+                </div>
+                <div className='flex flex-col gap-2'>
+                    <div className='grid grid-cols-2 gap-4'>
+                        <SmallTextField
+                            name='user_remark'
+                            label={_("Remarks")}
+                        />
+                        <div
+                            data-slot="form-item"
+                            className="flex flex-col gap-2"
+                        >
+                            <Label>{_("Attachments")}</Label>
+                            <FileDropzone files={files} setFiles={setFiles} />
+                        </div>
+                    </div>
+                </div>
+
+                <DialogFooter>
+                    <DialogClose asChild>
+                        <Button size='md' variant={'outline'} disabled={loading}>{_("Cancel")}</Button>
+                    </DialogClose>
+                    <Button size='md' type='submit' disabled={loading}>{_("Submit")}</Button>
+                </DialogFooter>
+            </div>
+        </form>
+    </Form>
+
+}
+
+const Entries = ({ company, isWithdrawal, currency }: { company: string, isWithdrawal: boolean, currency: string }) => {
+
+    const { getValues, setValue, control } = useFormContext<BankEntryFormData>()
+
+    const { call } = useContext(FrappeContext) as FrappeConfig
+
+    const partyMapRef = useRef<Record<string, string>>({})
+
+    const onPartyChange = (value: string, index: number) => {
+        // Get the account for the party type
+        if (value) {
+            if (partyMapRef.current[value]) {
+                setValue(`entries.${index}.account`, partyMapRef.current[value])
+            } else {
+                call.get('erpnext.accounts.party.get_party_account', {
+                    party: value,
+                    party_type: getValues(`entries.${index}.party_type`),
+                    company: company
+                }).then((result: { message: string }) => {
+                    setValue(`entries.${index}.account`, result.message)
+                    partyMapRef.current[value] = result.message
+                })
+            }
+        } else {
+            setValue(`entries.${index}.account`, '')
+        }
+    }
+
+    const { data: accounts } = useGetAccounts()
+
+    const onAccountChange = (value: string, index: number) => {
+        // If it's an income or expense account, get the default cost center
+        if (value) {
+            const account = accounts?.find((acc) => acc.name === value)
+            if (account && account.report_type === "Profit and Loss") {
+                // Set the default company cost center
+                setValue(`entries.${index}.cost_center`, getCompanyCostCenter(company) ?? '')
+                return
+            }
+        }
+
+        setValue(`entries.${index}.cost_center`, '')
+    }
+
+    const { fields, append, remove } = useFieldArray({
+        control: control,
+        name: 'entries'
+    })
+
+    const onAdd = useCallback(() => {
+        const existingEntries = getValues('entries')
+        const totalDebits = existingEntries.reduce((acc, curr) => flt(acc + (curr.debit ?? 0), 2), 0)
+        const totalCredits = existingEntries.reduce((acc, curr) => flt(acc + (curr.credit ?? 0), 2), 0)
+
+        const remainingAmount = flt(totalDebits - totalCredits, 2)
+
+        // Remaining amount is credit if it's positive - since some debit is pending to be cleared.
+        const debitAmount = remainingAmount > 0 ? 0 : Math.abs(remainingAmount)
+        const creditAmount = remainingAmount > 0 ? Math.abs(remainingAmount) : 0
+
+        append({
+            party_type: '',
+            party: '',
+            account: '',
+            debit: debitAmount,
+            credit: creditAmount,
+            cost_center: getCompanyCostCenter(company) ?? ''
+        } as JournalEntryAccount, {
+            focusName: `entries.${existingEntries.length}.account`
+        })
+    }, [company, append, getValues])
+
+    const [selectedRows, setSelectedRows] = useState<number[]>([])
+
+    const onSelectRow = useCallback((index: number) => {
+        setSelectedRows(prev => {
+            if (prev.includes(index)) {
+                return prev.filter(i => i !== index)
+            }
+            return [...prev, index]
+        })
+    }, [])
+
+    const onSelectAll = useCallback(() => {
+        setSelectedRows(prev => {
+            if (prev.length === fields.length) {
+                return []
+            }
+            return [...fields.map((_, index) => index)]
+        })
+    }, [fields])
+
+    const onRemove = useCallback(() => {
+        remove(selectedRows)
+        setSelectedRows([])
+    }, [remove, selectedRows])
+
+    /**
+     * When add difference is clicked, check if the last row has nothing filled in.
+     * If last row is empty (no debit or credit), then set that row's amount. Else, add a new row with the difference amount.
+     */
+    const onAddDifferenceClicked = () => {
+
+        const existingEntries = getValues('entries')
+        const totalDebits = existingEntries.reduce((acc, curr) => flt(acc + (curr.debit ?? 0), 2), 0)
+        const totalCredits = existingEntries.reduce((acc, curr) => flt(acc + (curr.credit ?? 0), 2), 0)
+
+        const lastIndex = existingEntries.length - 1
+
+        const isLastRowEmpty = (existingEntries[lastIndex]?.debit === 0 || existingEntries[lastIndex]?.debit === undefined) && (existingEntries[lastIndex]?.credit === 0 || existingEntries[lastIndex]?.credit === undefined)
+
+        const remainingAmount = flt(totalDebits - totalCredits, 2)
+
+        // Remaining amount is credit if it's positive - since some debit is pending to be cleared.
+        const debitAmount = remainingAmount > 0 ? 0 : Math.abs(remainingAmount)
+        const creditAmount = remainingAmount > 0 ? Math.abs(remainingAmount) : 0
+
+        if (isLastRowEmpty) {
+            setValue(`entries.${lastIndex}.debit`, debitAmount)
+            setValue(`entries.${lastIndex}.credit`, creditAmount)
+        } else {
+            append({
+                party_type: '',
+                party: '',
+                account: '',
+                debit: debitAmount,
+                credit: creditAmount,
+                cost_center: getCompanyCostCenter(company) ?? ''
+            } as JournalEntryAccount, {
+                focusName: `entries.${existingEntries.length}.account`
+            })
+        }
+    }
+
+
+
+    return <div className="flex flex-col gap-2">
+        <Table>
+            <TableHeader>
+                <TableRow>
+                    <TableHead><Checkbox
+                        disabled={fields.length === 0}
+                        // Make this accessible to screen readers
+                        aria-label={_("Select all")}
+                        checked={selectedRows.length > 0 && selectedRows.length === fields.length}
+                        onCheckedChange={onSelectAll} /></TableHead>
+                    <TableHead>{_("Party")}</TableHead>
+                    <TableHead>{_("Account")}</TableHead>
+                    <TableHead>{_("Cost Center")}</TableHead>
+                    <TableHead>{_("Remarks")}</TableHead>
+                    <TableHead className="text-end">{_("Debit")}</TableHead>
+                    <TableHead className="text-end">{_("Credit")}</TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {fields.map((field, index) => (
+                    <TableRow key={field.id} className={index === 0 ? 'bg-surface-gray-1 cursor-not-allowed' : ''} title={index === 0 ? _("This is the bank account entry. You cannot edit it.") : ''}>
+                        <TableCell>
+                            <Checkbox
+                                checked={selectedRows.includes(index)}
+                                onCheckedChange={() => onSelectRow(index)}
+                                // Make this accessible to screen readers
+                                aria-label={_("Select row {0}", [String(index + 1)])}
+                                disabled={index === 0}
+                            />
+                        </TableCell>
+
+                        <TableCell className="align-top">
+                            <div className="flex">
+                                <PartyTypeFormField
+                                    name={`entries.${index}.party_type`}
+                                    label={_("Party Type")}
+                                    isRequired
+                                    readOnly={index === 0}
+                                    hideLabel
+                                    inputProps={{
+                                        type: isWithdrawal ? 'Payable' : 'Receivable',
+                                        triggerProps: {
+                                            className: 'rounded-e-none',
+                                            tabIndex: -1
+                                        },
+                                        readOnly: index === 0,
+                                    }} />
+                                <PartyField index={index} onChange={onPartyChange} readOnly={index === 0} />
+                            </div>
+
+                        </TableCell>
+                        <TableCell className="align-top">
+                            <AccountFormField
+                                name={`entries.${index}.account`}
+                                label={_("Account")}
+                                rules={{
+                                    required: _("Account is required"),
+                                    onChange: (event) => {
+                                        onAccountChange(event.target.value, index)
+                                    }
+                                }}
+                                buttonClassName="min-w-64"
+                                readOnly={index === 0}
+                                isRequired
+                                hideLabel
+                            />
+                        </TableCell>
+                        <TableCell className="align-top">
+                            <LinkFormField
+                                doctype="Cost Center"
+                                name={`entries.${index}.cost_center`}
+                                label={_("Cost Center")}
+                                filters={[["company", "=", company], ["is_group", "=", 0], ["disabled", "=", 0]]}
+                                buttonClassName="min-w-48"
+                                readOnly={index === 0}
+                                hideLabel
+                            />
+                        </TableCell>
+                        <TableCell className="align-top">
+                            <DataField
+                                name={`entries.${index}.user_remark`}
+                                label={_("Remarks")}
+                                readOnly={index === 0}
+                                inputProps={{
+                                    placeholder: _("e.g. Bank Charges"),
+                                    className: 'min-w-64',
+                                    readOnly: index === 0
+                                }}
+                                hideLabel
+                            />
+                        </TableCell>
+                        <TableCell className={cn("text-end align-top")}>
+                            <CurrencyFormField
+                                name={`entries.${index}.debit`}
+                                label={_("Debit")}
+                                isRequired
+                                hideLabel
+                                readOnly={index === 0}
+                                style={index === 0 ? !isWithdrawal ? {
+                                    color: "var(--color-ink-gray-8)",
+                                } : {} : {}}
+                                currency={currency}
+                                leftSlot={index === 0 && !isWithdrawal ? <Tooltip>
+                                    <TooltipTrigger asChild><ArrowDownRight className="text-ink-green-3" /></TooltipTrigger>
+                                    <TooltipContent>{_("Bank account debit for deposit")}</TooltipContent>
+                                </Tooltip> : undefined}
+                            />
+                        </TableCell>
+                        <TableCell className={cn("text-end align-top")}>
+                            <CurrencyFormField
+                                name={`entries.${index}.credit`}
+                                style={index === 0 && isWithdrawal ? {
+                                    color: "var(--color-ink-gray-8)",
+                                } : {}}
+                                label={_("Credit")}
+                                isRequired
+                                hideLabel
+                                readOnly={index === 0}
+                                currency={currency}
+                                leftSlot={index === 0 && isWithdrawal ? <Tooltip>
+                                    <TooltipTrigger asChild><ArrowUpRight className="text-ink-red-3" /></TooltipTrigger>
+                                    <TooltipContent>{_("Bank account credit for withdrawal")}</TooltipContent>
+                                </Tooltip> : undefined}
+                            />
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+        <div className="flex justify-between gap-2">
+            <div className="flex gap-2 justify-end">
+                <div>
+                    <Button size='sm' type='button' variant={'outline'} onClick={onAdd}><Plus /> {_("Add Row")}</Button>
+                </div>
+                {selectedRows.length > 0 && <div>
+                    <Button size='sm' type='button' theme="red" onClick={onRemove}><Trash2 /> {_("Remove")}</Button>
+                </div>}
+            </div>
+            <Summary currency={currency} addRow={onAddDifferenceClicked} />
+        </div>
+    </div>
+
+}
+
+const PartyField = ({ index, onChange, readOnly }: { index: number, onChange: (value: string, index: number) => void, readOnly: boolean }) => {
+
+    const { control } = useFormContext<BankEntryFormData>()
+
+    const party_type = useWatch({
+        control,
+        name: `entries.${index}.party_type`
+    })
+
+    if (!party_type) {
+        return <DataField
+            name={`entries.${index}.party`}
+            label={_("Party")}
+            isRequired
+            inputProps={{
+                disabled: true,
+                className: 'rounded-s-none border-s-0 min-w-64'
+            }}
+            hideLabel
+        />
+    }
+
+    return <LinkFormField
+        name={`entries.${index}.party`}
+        label={_("Party")}
+        rules={{
+            onChange: (event) => {
+                onChange(event.target.value, index)
+            },
+        }}
+        hideLabel
+        readOnly={readOnly}
+        buttonClassName="rounded-s-none border-s-0 min-w-64"
+        doctype={party_type}
+
+    />
+}
+
+const Summary = ({ currency, addRow }: { currency: string, addRow: () => void }) => {
+
+    const { control } = useFormContext<BankEntryFormData>()
+
+    const entries = useWatch({ control, name: 'entries' })
+
+    const { total, totalCredits, totalDebits } = useMemo(() => {
+        // Do a total debits - total credits
+        const totalDebits = entries.reduce((acc, curr) => flt(acc + (curr.debit ?? 0), 2), 0)
+        const totalCredits = entries.reduce((acc, curr) => flt(acc + (curr.credit ?? 0), 2), 0)
+        return { total: flt(totalDebits - totalCredits, 2), totalDebits, totalCredits }
+    }, [entries])
+
+    const onAddRow = useCallback(() => {
+        addRow()
+    }, [addRow])
+
+    const TextComponent = ({ className, children }: { className?: string, children: React.ReactNode }) => {
+        return <span className={cn("w-32 text-end font-medium text-sm font-numeric", className)}>{children}</span>
+    }
+
+    return <div className="flex flex-col gap-2 items-end">
+        <div className="flex gap-2 justify-between">
+            <TextComponent>{_("Total Debit")}</TextComponent>
+            <TextComponent>{formatCurrency(totalDebits, currency)}</TextComponent>
+        </div>
+        <div className="flex gap-2 justify-between">
+            <TextComponent>{_("Total Credit")}</TextComponent>
+            <TextComponent>{formatCurrency(totalCredits, currency)}</TextComponent>
+        </div>
+        {total !== 0 && <div className="flex gap-2 justify-between">
+            <TextComponent>{_("Difference")}</TextComponent>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button type='button' variant='link' className="p-0 text-ink-red-3 underline h-fit" role='button' onClick={onAddRow}>
+                        <TextComponent className='text-ink-red-3'>{formatCurrency(total, currency)}</TextComponent>
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    {_("Add a row with the difference amount")}
+                </TooltipContent>
+            </Tooltip>
+        </div>}
+
+    </div>
+
+}
+
+
+export default BankEntryModal

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

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

@@ -0,0 +1,275 @@
+import { useAtom } from 'jotai'
+import { bankRecDateAtom } from './bankRecAtoms'
+import { useMemo, useState } from 'react'
+import { AVAILABLE_TIME_PERIODS, formatDate, getDatesForTimePeriod, TimePeriod } from '@/lib/date'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRight } from 'lucide-react'
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { parse } from "chrono-node"
+import { Calendar } from '@/components/ui/calendar'
+import useFiscalYear from '@/hooks/useFiscalYear'
+import dayjs from 'dayjs'
+import _ from '@/lib/translate'
+import { useDirection } from '@/components/ui/direction'
+
+const BankRecDateFilter = () => {
+
+    const [bankRecDate, setBankRecDate] = useAtom(bankRecDateAtom)
+
+    const { data: fiscalYear } = useFiscalYear()
+
+    const timePeriodOptions = useMemo(() => {
+        const standardOptions = AVAILABLE_TIME_PERIODS.map((period) => {
+            const dates = getDatesForTimePeriod(period)
+            return {
+                label: period,
+                fromDate: dates.fromDate,
+                toDate: dates.toDate,
+                format: dates.format,
+                translatedLabel: dates.translatedLabel
+            }
+        })
+
+        if (fiscalYear?.message) {
+            // For a fiscal year, we need to replace "Last Year", "This Year", and add options for quarters
+            const fiscalYearStart = fiscalYear.message.year_start_date
+            const fiscalYearEnd = fiscalYear.message.year_end_date
+
+            const q1 = {
+                label: `Q1: ${fiscalYear.message.name}`,
+                translatedLabel: `${_("Q1")}: ${fiscalYear.message.name}`,
+                fromDate: fiscalYearStart,
+                toDate: dayjs(fiscalYearStart).add(3, 'month').format('YYYY-MM-DD'),
+                format: 'MMM YYYY'
+            }
+
+            const q2 = {
+                label: `Q2: ${fiscalYear.message.name}`,
+                translatedLabel: `${_("Q2")}: ${fiscalYear.message.name}`,
+                fromDate: dayjs(fiscalYearStart).add(3, 'month').format('YYYY-MM-DD'),
+                toDate: dayjs(fiscalYearStart).add(6, 'month').format('YYYY-MM-DD'),
+                format: 'MMM YYYY'
+            }
+
+            const q3 = {
+                label: `Q3: ${fiscalYear.message.name}`,
+                translatedLabel: `${_("Q3")}: ${fiscalYear.message.name}`,
+                fromDate: dayjs(fiscalYearStart).add(6, 'month').format('YYYY-MM-DD'),
+                toDate: dayjs(fiscalYearStart).add(9, 'month').format('YYYY-MM-DD'),
+                format: 'MMM YYYY'
+            }
+
+            const q4 = {
+                label: `Q4: ${fiscalYear.message.name}`,
+                translatedLabel: `${_("Q4")}: ${fiscalYear.message.name}`,
+                fromDate: dayjs(fiscalYearStart).add(9, 'month').format('YYYY-MM-DD'),
+                toDate: fiscalYearEnd,
+                format: 'MMM YYYY'
+            }
+
+            const thisYear = {
+                label: `This Fiscal Year`,
+                translatedLabel: `${_("This Fiscal Year")}`,
+                fromDate: fiscalYearStart,
+                toDate: fiscalYearEnd,
+                format: 'MMM YYYY'
+            }
+
+            const lastYear = {
+                label: `Last Fiscal Year`,
+                translatedLabel: `${_("Last Fiscal Year")}`,
+                fromDate: dayjs(fiscalYearStart).subtract(1, 'year').format('YYYY-MM-DD'),
+                toDate: dayjs(fiscalYearEnd).subtract(1, 'year').format('YYYY-MM-DD'),
+                format: 'MMM YYYY'
+            }
+            // Sort the options so that we get "This Month", "Last Month", quarters, fiscal year, then the rest of the standard options
+
+            const topRankedItems = standardOptions.filter((option) => {
+                return option.label === "This Month" || option.label === "Last Month"
+            })
+
+            const bottomRankedItems = standardOptions.filter((option) => {
+                return option.label !== "This Month" && option.label !== "Last Month"
+            })
+
+            return [...topRankedItems, q1, q2, q3, q4, thisYear, lastYear, ...bottomRankedItems]
+        }
+
+        return standardOptions
+    }, [fiscalYear])
+
+    const [open, setOpen] = useState(false)
+    const [value, setValue] = useState("")
+
+    const timePeriod: TimePeriod | string = useMemo(() => {
+        if (bankRecDate.fromDate && bankRecDate.toDate) {
+            // Check if the from and to dates match any predefined time period
+            for (const period of timePeriodOptions) {
+                if (period.fromDate === bankRecDate.fromDate && period.toDate === bankRecDate.toDate) {
+                    return period.label;
+                }
+            }
+            return "Date Range";
+        } else {
+            return "Date Range";
+        }
+    }, [bankRecDate.fromDate, bankRecDate.toDate, timePeriodOptions]);
+
+    const handleTimePeriodChange = (fromDate: string, toDate: string) => {
+        setBankRecDate({ fromDate, toDate })
+        setOpen(false)
+    }
+
+    const dateObj = useMemo(() => {
+        return {
+            from: new Date(bankRecDate.fromDate),
+            to: new Date(bankRecDate.toDate)
+        }
+    }, [bankRecDate.fromDate, bankRecDate.toDate])
+
+    const direction = useDirection()
+
+
+
+    return <div className='flex items-center'>
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant={'outline'}
+                    aria-expanded={open}
+                    size='md'
+                    className='rounded-e-none border-e-0'
+                    role="combobox">
+                    {timePeriodOptions.find((period) => period.label === timePeriod)?.translatedLabel ?? _(timePeriod)}
+
+                    <ChevronDownIcon />
+                </Button>
+            </PopoverTrigger>
+
+            <PopoverContent className="w-84 p-1" align='start'>
+                <Command>
+
+                    <CommandInput placeholder="e.g. Last 3 weeks" onValueChange={setValue} value={value} />
+                    <CommandList className='max-h-fit'>
+                        <CommandEmpty className='text-start p-2 hover:bg-surface-gray-1'>
+                            <EmptyState onSelect={handleTimePeriodChange} value={value} />
+                        </CommandEmpty>
+                        {timePeriodOptions.map((period) => (
+                            <CommandItem key={period.label} className='flex justify-between' onSelect={() => handleTimePeriodChange(period.fromDate, period.toDate)}>
+                                <span>
+                                    {period.translatedLabel ?? _(period.label)}
+                                </span>
+                                <span className='text-xs text-ink-gray-5 flex items-center gap-1 text-end whitespace-nowrap'>
+                                    {formatDate(period.fromDate, period.format)} {direction === 'ltr' ? <ChevronRight className='text-[12px] text-ink-gray-5/70' /> : <ChevronLeftIcon className='text-[12px] text-ink-gray-5/70' />} {formatDate(period.toDate, period.format)}
+                                </span>
+                            </CommandItem>
+                        ))}
+                    </CommandList>
+                </Command>
+
+            </PopoverContent>
+        </Popover>
+
+        <Popover>
+            <PopoverTrigger asChild>
+                <Button variant={'outline'} className='rounded-s-none' size='md'>
+                    {formatDate(bankRecDate.fromDate)} - {formatDate(bankRecDate.toDate)}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className='w-auto overflow-hidden p-0' align='end'>
+                <Calendar
+                    mode='range'
+                    captionLayout='dropdown'
+                    selected={{
+                        from: dateObj.from,
+                        to: dateObj.to
+                    }}
+                    numberOfMonths={2}
+                    defaultMonth={dateObj.from}
+                    onSelect={(date) => {
+                        if (date) {
+                            setBankRecDate({ fromDate: formatDate(date.from, 'YYYY-MM-DD'), toDate: formatDate(date.to, 'YYYY-MM-DD') })
+                        }
+                    }}
+                />
+            </PopoverContent>
+        </Popover>
+    </div>
+}
+
+const referentialKeywords = ["last", "this", "next", "previous"]
+const EmptyState = ({ onSelect, value }: { onSelect: (fromDate: string, toDate: string) => void, value: string }) => {
+
+    const dates = useMemo(() => {
+        if (value) {
+            // Try parsing the value
+            const parsedDate = parse(value, undefined, { forwardDate: false })
+
+            if (parsedDate && parsedDate.length > 0) {
+                const startDate = parsedDate[0].start.date()
+                const endDate = parsedDate[0].end?.date()
+
+                if (!endDate) {
+                    const today = new Date()
+                    // If today is greater than the start date, use today as the end date
+                    if (startDate.getTime() > today.getTime()) {
+                        return { fromDate: today, toDate: startDate }
+                    } else {
+                        // Check if the user only wants a specific month like "May 2025"
+                        // If the "known values" just has month and year, then we need to get the first day of the month and the last day of the month
+                        // @ts-expect-error - "Known Values" is available in the start "ParsingComponents"
+                        if (parsedDate[0].start.knownValues?.month && !parsedDate[0].start.knownValues?.day) {
+                            return {
+                                fromDate: startDate,
+                                toDate: dayjs(startDate).endOf('month').toDate()
+                            }
+                            // @ts-expect-error - "Known Values" is available in the start "ParsingComponents"
+                        } else if (parsedDate[0].start.knownValues?.month && parsedDate[0].start.knownValues?.day && !referentialKeywords.some(keyword => value.toLowerCase().includes(keyword))) {
+                            // If month and day is known, then we should not assume that the user wants to get everything until today
+                            return {
+                                fromDate: startDate,
+                                toDate: startDate,
+                            }
+                        }
+
+                        return {
+                            fromDate: startDate,
+                            toDate: today
+                        }
+                    }
+                } else {
+                    return { fromDate: startDate, toDate: endDate }
+                }
+            }
+
+        }
+    }, [value])
+
+    const onClick = (fromDate: Date, toDate: Date) => {
+        onSelect(formatDate(fromDate, 'YYYY-MM-DD'), formatDate(toDate, 'YYYY-MM-DD'))
+    }
+
+    const isEqual = dates?.fromDate && dates?.toDate && dayjs(dates.fromDate).isSame(dates.toDate, 'date')
+
+    return <div>
+        {dates ?
+            <div className='flex gap-2 items-center justify-between cursor-pointer' onClick={() => onClick(dates.fromDate, dates.toDate)}>
+                <span className='text-sm text-ink-gray-5 max-w-[30%]'>
+                    {value}
+                </span>
+                {isEqual ? <span className='text-xs text-ink-gray-5 text-balance flex items-center gap-1'>
+                    {formatDate(dates.fromDate, 'Do MMM YYYY')}
+                </span> :
+                    <span className='text-xs text-ink-gray-5 flex items-center gap-1'>
+                        {formatDate(dates.fromDate, 'Do MMM YY')} <ChevronRight size='16' className='text-ink-gray-5' /> {formatDate(dates.toDate, 'Do MMM YY')}
+                    </span>}
+            </div> :
+            <span className='text-sm text-ink-gray-5'>
+                No results found
+            </span>
+        }
+    </div>
+}
+
+export default BankRecDateFilter

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

@@ -0,0 +1,315 @@
+import { useAtomValue } from "jotai"
+import { MissingFiltersBanner } from "./MissingFiltersBanner"
+import { bankRecDateAtom, selectedBankAccountAtom } from "./bankRecAtoms"
+import { useCurrentCompany } from "@/hooks/useCurrentCompany"
+import { Paragraph } from "@/components/ui/typography"
+import { useCallback, useMemo } from "react"
+import type { ColumnDef } from "@tanstack/react-table"
+import { useFrappeGetCall } from "frappe-react-sdk"
+import { QueryReportReturnType } from "@/types/custom/Reports"
+import { formatDate } from "@/lib/date"
+import { ListView, type ListViewColumnMeta } from "@/components/ui/list-view"
+import { formatCurrency } from "@/lib/numbers"
+import { getCompanyCurrency } from "@/lib/company"
+import { slug } from "@/lib/frappe"
+import { ScrollTextIcon } from "lucide-react"
+import ErrorBanner from "@/components/ui/error-banner"
+import { StatContainer, StatLabel, StatValue } from "@/components/ui/stats"
+import _ from "@/lib/translate"
+import { toast } from "sonner"
+import { useCopyToClipboard } from "usehooks-ts"
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
+
+const BankReconciliationStatement = () => {
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+    const dates = useAtomValue(bankRecDateAtom)
+
+    if (!bankAccount) {
+        return <MissingFiltersBanner text={_("Please select a bank account to view the bank reconciliation statement.")} />
+    }
+
+    if (!dates) {
+        return <MissingFiltersBanner text={_("Please select dates to view the bank reconciliation statement.")} />
+    }
+
+    return <BankReconciliationStatementView />
+}
+interface BankClearanceSummaryEntry {
+    payment_document: string
+    payment_entry: string
+    posting_date: string,
+    reference_no: string,
+    credit: number,
+    debit: number,
+    against_account: string,
+    ref_date: string,
+    account_currency: string,
+    clearance_date: string
+}
+
+const BankReconciliationStatementView = () => {
+
+    const companyID = useCurrentCompany()
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+    const dates = useAtomValue(bankRecDateAtom)
+
+    const filters = useMemo(() => {
+        return JSON.stringify({
+            account: bankAccount?.account,
+            report_date: dates.toDate,
+            company: companyID
+        })
+    }, [bankAccount, dates, companyID])
+
+    const { data, error } = useFrappeGetCall<{ message: QueryReportReturnType }>('frappe.desk.query_report.run', {
+        report_name: 'Bank Reconciliation Statement',
+        filters,
+        ignore_prepared_report: 1,
+        are_default_filters: false,
+    }, `Report-Bank Reconciliation Statement-${filters}`, { keepPreviousData: true, revalidateOnFocus: false }, 'POST')
+
+    const [, copyToClipboard] = useCopyToClipboard()
+
+    const onCopy = useCallback(
+        (text: string) => {
+            copyToClipboard(text).then(() => {
+                toast.success(_("Copied to clipboard"))
+            })
+        },
+        [copyToClipboard, _],
+    )
+
+    const statementColumns = useMemo<ColumnDef<BankClearanceSummaryEntry, unknown>[]>(
+        () => [
+            {
+                accessorKey: "posting_date",
+                header: _("Posting Date"),
+                size: 118,
+                meta: { tabularNums: true } satisfies ListViewColumnMeta,
+                cell: ({ row }) => formatDate(row.original.posting_date),
+            },
+            {
+                accessorKey: "payment_document",
+                header: _("Document Type"),
+                size: 140,
+                cell: ({ row }) => _(row.original.payment_document),
+            },
+            {
+                id: "payment_entry",
+                header: _("Payment Document"),
+                size: 300,
+                meta: {
+                    getTooltipText: (r) => {
+                        const x = r as BankClearanceSummaryEntry
+                        const parts = [x.payment_document, x.payment_entry].filter(Boolean)
+                        return parts.length ? parts.join(" · ") : undefined
+                    },
+                } satisfies ListViewColumnMeta,
+                cell: ({ row }) => {
+                    const { payment_document, payment_entry } = row.original
+                    return payment_document ? (
+                        <a
+                            target="_blank"
+                            rel="noreferrer"
+                            className="text-ink-gray-8 block min-w-0 w-full underline underline-offset-4"
+                            href={`/desk/${slug(payment_document)}/${payment_entry}`}
+                        >
+                            {payment_entry}
+                        </a>
+                    ) : (
+                        payment_entry
+                    )
+                },
+            },
+            {
+                accessorKey: "debit",
+                header: _("Debit"),
+                size: 112,
+                meta: { align: "right" } satisfies ListViewColumnMeta,
+                cell: ({ row }) => <span className="font-numeric">{formatCurrency(row.original.debit, row.original.account_currency)}</span>,
+            },
+            {
+                accessorKey: "credit",
+                header: _("Credit"),
+                size: 112,
+                meta: { align: "right" } satisfies ListViewColumnMeta,
+                cell: ({ row }) => <span className="font-numeric">{formatCurrency(row.original.credit, row.original.account_currency)}</span>,
+            },
+            {
+                accessorKey: "against_account",
+                header: _("Against Account"),
+                meta: { gridWidth: "minmax(0,1.25fr)" } satisfies ListViewColumnMeta,
+                cell: ({ row }) => (
+                    <a
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-ink-gray-8 block min-w-0 w-full underline underline-offset-4"
+                        href={`/desk/account/${row.original.against_account}`}
+                    >
+                        {row.original.against_account}
+                    </a>
+                ),
+            },
+            {
+                accessorKey: "reference_no",
+                header: _("Reference #"),
+                cell: ({ row }) => {
+                    const ref = row.original.reference_no
+                    return (
+                        <button
+                            type="button"
+                            className="text-ink-gray-8 hover:underline min-w-0 w-full cursor-pointer truncate text-start underline-offset-4"
+                            onClick={() => onCopy(ref)}
+                        >
+                            {ref}
+                        </button>
+                    )
+                },
+            },
+            {
+                accessorKey: "ref_date",
+                header: _("Reference Date"),
+                size: 118,
+                meta: { tabularNums: true } satisfies ListViewColumnMeta,
+                cell: ({ row }) => formatDate(row.original.ref_date),
+            },
+            {
+                accessorKey: "clearance_date",
+                header: _("Clearance Date"),
+                size: 118,
+                meta: { tabularNums: true } satisfies ListViewColumnMeta,
+                cell: ({ row }) => formatDate(row.original.clearance_date),
+            },
+        ],
+        [_, onCopy],
+    )
+
+    const statementRows = useMemo(() => {
+        if (!data?.message.result) return []
+        return data.message.result.filter((row: BankClearanceSummaryEntry) => Boolean(row.payment_entry))
+    }, [data])
+
+    return <div className="space-y-4 py-2">
+
+        <div>
+            <Paragraph className="text-sm">
+                <span dangerouslySetInnerHTML={{
+                    __html: _("Below is a list of all entries posted against the bank account {0} which have not been cleared till {1}.", [`<strong>${bankAccount?.account}</strong>`, `<strong>${formatDate(dates.toDate)}</strong>`])
+                }} />
+            </Paragraph>
+        </div>
+
+        {error && <ErrorBanner error={error} />}
+
+        {data && <SummarySection data={data} />}
+
+        {data && data.message.result.length > 0 && (
+            <div className="space-y-2">
+                <p className="text-ink-gray-5 text-sm">{_("Bank Reconciliation Statement")}</p>
+                <ListView
+                    data={statementRows}
+                    columns={statementColumns}
+                    getRowId={(row) => row.payment_entry}
+                    maxHeight="min(70vh, 640px)"
+                    emptyState={_("No entries with a payment document in this list.")}
+                />
+            </div>
+        )}
+
+        {data && data.message.result.length === 0 &&
+            <Empty>
+                <EmptyMedia>
+                    <ScrollTextIcon />
+                </EmptyMedia>
+                <EmptyHeader>
+                    <EmptyTitle>{_("No entries found")}</EmptyTitle>
+                    <EmptyDescription>{_("There are no accounting entries in the system for the selected account and dates.")}</EmptyDescription>
+                </EmptyHeader>
+            </Empty>
+        }
+
+
+    </div>
+}
+
+const SummarySection = ({ data }: { data: { message: QueryReportReturnType } }) => {
+
+    const company = useCurrentCompany()
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+
+    const { bankStatementBalanceAsPerGL, outstandingChecksDebit, outstandingChecksCredit, incorrectlyClearedEntriesDebit, incorrectlyClearedEntriesCredit, calculatedBankStatementBalance } = useMemo(() => {
+
+        // Loop over the results and find the corresponding rows
+
+        let bankStatementBalanceAsPerGL = 0
+
+        let outstandingChecksDebit = 0
+        let outstandingChecksCredit = 0
+
+        let incorrectlyClearedEntriesDebit = 0
+        let incorrectlyClearedEntriesCredit = 0
+
+        let calculatedBankStatementBalance = 0
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        data?.message.result.forEach((r: any) => {
+            if (r.payment_entry === 'Bank Statement balance as per General Ledger') {
+                bankStatementBalanceAsPerGL = r.debit - r.credit
+            }
+
+            if (r.payment_entry === 'Outstanding Checks and Deposits to clear') {
+                outstandingChecksDebit = r.debit
+                outstandingChecksCredit = r.credit
+            }
+
+            if (r.payment_entry === 'Checks and Deposits incorrectly cleared') {
+                incorrectlyClearedEntriesDebit = r.debit
+                incorrectlyClearedEntriesCredit = r.credit
+            }
+
+            if (r.payment_entry === 'Calculated Bank Statement balance') {
+                calculatedBankStatementBalance = r.debit - r.credit
+            }
+        })
+
+        return {
+            bankStatementBalanceAsPerGL,
+            outstandingChecksDebit,
+            outstandingChecksCredit,
+            incorrectlyClearedEntriesDebit,
+            incorrectlyClearedEntriesCredit,
+            calculatedBankStatementBalance
+        }
+
+    }, [data])
+
+    const currency = bankAccount?.account_currency ?? getCompanyCurrency(company)
+
+    return <div className="flex gap-4 items-start justify-between">
+        <StatContainer>
+            <StatLabel>{_("Bank Statement Balance as per General Ledger")}</StatLabel>
+            <StatValue className="font-numeric">{formatCurrency(bankStatementBalanceAsPerGL, currency)}</StatValue>
+        </StatContainer>
+
+        <StatContainer>
+            <StatLabel>{_("Outstanding Checks and Deposits to clear")}</StatLabel>
+            <StatValue className="font-numeric">{formatCurrency(outstandingChecksDebit - outstandingChecksCredit, currency)}</StatValue>
+        </StatContainer>
+
+        {(incorrectlyClearedEntriesDebit > 0 || incorrectlyClearedEntriesCredit > 0) && <StatContainer>
+            <StatLabel className="text-ink-red-3">{_("Checks and Deposits incorrectly cleared")}</StatLabel>
+            <StatValue className="text-ink-red-3 font-numeric">{formatCurrency(incorrectlyClearedEntriesDebit - incorrectlyClearedEntriesCredit)}</StatValue>
+            {/* <div className="" divider={<StackDivider height='20px' />}>
+                {incorrectlyClearedEntriesDebit !== 0 && <StatHelpText>Debit: {formatCurrency(incorrectlyClearedEntriesDebit)}</StatHelpText>}
+                {incorrectlyClearedEntriesCredit !== 0 && <StatHelpText>Credit: {formatCurrency(incorrectlyClearedEntriesCredit)}</StatHelpText>}
+            </div> */}
+        </StatContainer>}
+        <StatContainer>
+            <StatLabel>{_("Calculated Bank Statement Balance")}</StatLabel>
+            <StatValue className="font-numeric">{formatCurrency(calculatedBankStatementBalance)}</StatValue>
+        </StatContainer>
+
+    </div>
+}
+
+export default BankReconciliationStatement

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

@@ -0,0 +1,419 @@
+import { useAtomValue, useSetAtom } from "jotai"
+import { MissingFiltersBanner } from "./MissingFiltersBanner"
+import { bankRecDateAtom, bankRecUnreconcileModalAtom, selectedBankAccountAtom } from "./bankRecAtoms"
+import { Paragraph } from "@/components/ui/typography"
+import { formatDate } from "@/lib/date"
+import { ListView, type ListViewColumnMeta } from "@/components/ui/list-view"
+import { formatCurrency, getCurrencyFormatInfo } from "@/lib/numbers"
+import { getCompanyCurrency } from "@/lib/company"
+import { ArrowDownRight, ArrowUpRight, CheckCircle2, ChevronDown, DollarSign, ExternalLink, ImportIcon, ListIcon, Search, Undo2, XCircle } from "lucide-react"
+import ErrorBanner from "@/components/ui/error-banner"
+import { Badge } from "@/components/ui/badge"
+import { useGetBankTransactions } from "./utils"
+import { BankTransaction } from "@/types/Accounts/BankTransaction"
+import { Button } from "@/components/ui/button"
+import _ from "@/lib/translate"
+import { Input } from "@/components/ui/input"
+import CurrencyInput from "react-currency-input-field"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { getCurrencySymbol } from "@/lib/currency"
+import { useDebounceValue } from "usehooks-ts"
+import type { ColumnDef } from "@tanstack/react-table"
+import { useCallback, useMemo, useState } from "react"
+import { Link } from "react-router"
+import { Empty, EmptyTitle, EmptyHeader, EmptyMedia, EmptyDescription } from "@/components/ui/empty"
+import { InputGroup, InputGroupAddon } from "@/components/ui/input-group"
+
+const BankTransactions = () => {
+    const selectedBank = useAtomValue(selectedBankAccountAtom)
+    const dates = useAtomValue(bankRecDateAtom)
+
+    if (!selectedBank || !dates) {
+        return <MissingFiltersBanner text={_("Please select a bank and set the date range")} />
+    }
+
+    return <>
+        <BankTransactionListView />
+    </>
+}
+
+const BankTransactionListView = () => {
+
+    const { data, error } = useGetBankTransactions()
+
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+    const dates = useAtomValue(bankRecDateAtom)
+
+    const formattedFromDate = formatDate(dates.fromDate)
+    const formattedToDate = formatDate(dates.toDate)
+
+    const setBankRecUnreconcileModalAtom = useSetAtom(bankRecUnreconcileModalAtom)
+
+    const onUndo = useCallback(
+        (transaction: BankTransaction) => {
+            setBankRecUnreconcileModalAtom(transaction.name)
+        },
+        [setBankRecUnreconcileModalAtom],
+    )
+
+    const accountCurrency = useMemo(
+        () => bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? ""),
+        [bankAccount?.account_currency, bankAccount?.company],
+    )
+
+    const transactionColumns = useMemo<ColumnDef<BankTransaction, unknown>[]>(
+        () => [
+            {
+                accessorKey: "date",
+                header: _("Date"),
+                size: 112,
+                meta: { tabularNums: true } satisfies ListViewColumnMeta,
+                cell: ({ row }) => formatDate(row.original.date),
+            },
+            {
+                accessorKey: "description",
+                header: _("Description"),
+                size: 250,
+                // meta: { gridWidth: "minmax(0,2fr)" } satisfies ListViewColumnMeta,
+                cell: ({ row }) => row.original.description,
+            },
+            {
+                accessorKey: "reference_number",
+                header: _("Reference #"),
+                size: 128,
+                cell: ({ row }) => row.original.reference_number,
+            },
+            {
+                accessorKey: "withdrawal",
+                header: _("Withdrawal"),
+                size: 120,
+                meta: { align: "right" } satisfies ListViewColumnMeta,
+                cell: ({ row }) => <span className="font-numeric">{formatCurrency(row.original.withdrawal, accountCurrency)}</span>,
+            },
+            {
+                accessorKey: "deposit",
+                header: _("Deposit"),
+                size: 120,
+                meta: { align: "right" } satisfies ListViewColumnMeta,
+                cell: ({ row }) => <span className="font-numeric">{formatCurrency(row.original.deposit, accountCurrency)}</span>,
+            },
+            {
+                accessorKey: "unallocated_amount",
+                header: _("Unallocated"),
+                size: 120,
+                meta: { align: "right" } satisfies ListViewColumnMeta,
+                cell: ({ row }) => <span className="font-numeric">{formatCurrency(row.original.unallocated_amount, accountCurrency)}</span>,
+            },
+            {
+                accessorKey: "transaction_type",
+                header: _("Type"),
+                size: 112,
+                cell: ({ row }) =>
+                    row.original.transaction_type ? <Badge>{row.original.transaction_type}</Badge> : null,
+            },
+            {
+                id: "status",
+                header: _("Status"),
+                size: 168,
+                meta: { truncate: false, truncateTooltip: false } satisfies ListViewColumnMeta,
+                cell: ({ row }) => {
+                    const tx = row.original
+                    if (!tx.allocated_amount || (tx.allocated_amount && tx.allocated_amount === 0)) {
+                        return (
+                            <Badge theme="red">
+                                <XCircle />
+                                {_("Not Reconciled")}
+                            </Badge>
+                        )
+                    }
+                    if (tx.allocated_amount && tx.allocated_amount > 0 && tx.unallocated_amount !== 0) {
+                        return (
+                            <Badge theme="orange">
+                                <CheckCircle2 />
+                                {_("Partially Reconciled")}
+                            </Badge>
+                        )
+                    }
+                    return (
+                        <Badge theme="green">
+                            <CheckCircle2 />
+                            {_("Reconciled")}
+                        </Badge>
+                    )
+                },
+            },
+            {
+                id: "actions",
+                header: _("Actions"),
+                size: 200,
+                enableResizing: false,
+                meta: { truncate: false, truncateTooltip: false } satisfies ListViewColumnMeta,
+                cell: ({ row }) => (
+                    <div className="flex gap-2 ps-0.5 items-center">
+                        <Button variant="ghost" asChild size='sm'>
+                            <a
+                                href={`/desk/bank-transaction/${row.original.name}`}
+                                target="_blank"
+
+                                rel="noreferrer"
+                            // className="text-ink-gray-8 underline underline-offset-4 inline-flex gap-2"
+                            >
+                                {_("View")} <ExternalLink className="w-4 h-4" />
+                            </a>
+                        </Button>
+                        {row.original.allocated_amount && row.original.allocated_amount > 0 ? (
+                            <Button
+                                variant="ghost"
+                                onClick={() => onUndo(row.original)}
+                                size="sm"
+                                theme='red'
+                            >
+                                <Undo2 />
+                                {_("Undo")}
+                            </Button>
+                        ) : null}
+                    </div>
+                ),
+            },
+        ],
+        [_, accountCurrency, onUndo],
+    )
+
+    const [search, setSearch] = useDebounceValue('', 250)
+    const [amountFilter, setAmountFilter] = useState<{ value: number, stringValue?: string | number }>({ value: 0, stringValue: '0.00' })
+    const [typeFilter, setTypeFilter] = useState('All')
+    const [status, setStatus] = useState<'Reconciled' | 'Unreconciled' | 'All' | 'Partially Reconciled'>('All')
+
+    const onSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearch(e.target.value)
+    }
+
+    const filteredResults = useMemo(() => {
+        if (!data) {
+            return []
+        }
+
+        return data.message.filter((transaction) => {
+
+            if (search && !transaction.description?.toLowerCase().includes(search.toLowerCase())) {
+                return false
+            }
+
+            if (typeFilter !== 'All') {
+                if (typeFilter === 'Debits' && transaction.deposit && transaction.deposit > 0) {
+                    return false
+                }
+                if (typeFilter === 'Credits' && transaction.withdrawal && transaction.withdrawal > 0) {
+                    return false
+                }
+            }
+
+            if (status !== 'All') {
+                if (status === 'Reconciled' && transaction.status !== 'Reconciled') {
+                    return false
+                }
+                if (status === 'Unreconciled') {
+                    if (transaction.status === 'Reconciled') {
+                        return false
+                    }
+                    // Filter out partially reconciled transactions
+                    if (transaction.allocated_amount && transaction.allocated_amount > 0 && transaction.unallocated_amount !== 0) {
+                        return false
+                    }
+                }
+                if (status === 'Partially Reconciled') {
+
+                    if (transaction.status === 'Reconciled') {
+                        return false
+                    }
+                    if ((transaction.allocated_amount ?? 0) === 0) {
+                        return false
+                    }
+                }
+
+            }
+
+            if (amountFilter.value > 0 && transaction.withdrawal !== amountFilter.value && transaction.deposit !== amountFilter.value) {
+                return false
+            }
+
+            return true
+        })
+
+
+    }, [data, search, amountFilter, typeFilter, status])
+
+    return <div className="space-y-2 py-2">
+
+        <div className="flex gap-2 justify-between items-center">
+            <Paragraph className="text-sm">
+                <span dangerouslySetInnerHTML={{
+                    __html: _("Below is a list of all bank transactions imported in the system for the bank account {0} between {1} and {2}.", [`<strong>${bankAccount?.account_name}</strong>`, `<strong>${formattedFromDate}</strong>`, `<strong>${formattedToDate}</strong>`])
+                }} />
+            </Paragraph>
+
+            <Button size='md' variant='subtle' asChild>
+                <Link to="/statement-importer">
+                    <ImportIcon />
+                    {_("Import Bank Statement")}
+                </Link>
+            </Button>
+        </div>
+
+        {error && <ErrorBanner error={error} />}
+
+        {data && data.message.length > 0 && <Filters
+            onSearchChange={onSearchChange}
+            search={search}
+            results={filteredResults}
+            setAmountFilter={setAmountFilter}
+            amountFilter={amountFilter}
+            onTypeFilterChange={setTypeFilter}
+            typeFilter={typeFilter}
+            status={status}
+            setStatus={setStatus}
+        />}
+
+        {data && data.message.length > 0 ? (
+            <ListView
+                data={filteredResults}
+                columns={transactionColumns}
+                getRowId={(row) => row.name}
+                maxHeight="calc(100vh - 200px)"
+                scrollAreaClassName="min-h-[calc(100vh-200px)]"
+                emptyState={<Empty>
+                    <EmptyMedia>
+                        <ListIcon />
+                    </EmptyMedia>
+                    <EmptyHeader>
+                        <EmptyTitle>{_("No bank transactions found")}</EmptyTitle>
+                        <EmptyDescription>{_("There are no transactions in the system for the selected bank account and dates that match the filters.")}</EmptyDescription>
+                    </EmptyHeader>
+                </Empty>}
+            />
+        ) : null}
+
+
+    </div>
+}
+
+interface FilterProps {
+    onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+    search: string
+    results: BankTransaction[]
+    setAmountFilter: (value: { value: number, stringValue?: string | number }) => void
+    amountFilter: { value: number, stringValue?: string | number }
+    onTypeFilterChange: (type: string) => void
+    typeFilter: string
+    status: 'Reconciled' | 'Unreconciled' | 'All' | 'Partially Reconciled'
+    setStatus: (status: 'Reconciled' | 'Unreconciled' | 'All' | 'Partially Reconciled') => void
+}
+
+
+const Filters = ({
+    onSearchChange,
+    search,
+    results,
+    setAmountFilter,
+    amountFilter,
+    onTypeFilterChange,
+    typeFilter,
+    status,
+    setStatus,
+
+}: FilterProps) => {
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+
+    const currency = bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? '')
+    const currencySymbol = getCurrencySymbol(currency)
+    const formatInfo = getCurrencyFormatInfo(currency)
+    const groupSeparator = formatInfo.group_sep || ","
+    const decimalSeparator = formatInfo.decimal_str || "."
+
+    return <div className="flex py-2 w-full gap-2">
+        <InputGroup variant='outline'>
+            <label className="sr-only">{_("Search transactions")}</label>
+            <InputGroupAddon>
+                <Search className="w-4 h-4 text-ink-gray-5" />
+            </InputGroupAddon>
+            <Input
+                placeholder={_("Search")} type='search' onChange={onSearchChange} variant='outline' defaultValue={search}
+                className="border-none px-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0" />
+            <InputGroupAddon align='inline-end'>
+                <span className="text-sm text-ink-gray-5 text-nowrap whitespace-nowrap">{results?.length} {_(results?.length === 1 ? "result" : "results")}</span>
+            </InputGroupAddon>
+        </InputGroup>
+
+        <div className="w-[25%]">
+            <label className="sr-only">{_("Filter by amount")}</label>
+            <CurrencyInput
+                groupSeparator={groupSeparator}
+                decimalSeparator={decimalSeparator}
+                placeholder={`${currencySymbol}0${decimalSeparator}00`}
+                decimalsLimit={2}
+                value={amountFilter.stringValue}
+                maxLength={12}
+                decimalScale={2}
+                prefix={currencySymbol}
+                onValueChange={(v, _n, values) => {
+                    // If the input ends with a decimal or a decimal with trailing zeroes, store the string since we need the user to be able to type the decimals.
+                    // When the user eventually types the decimals or blurs out, the value is formatted anyway.
+                    // Otherwise store the float value
+                    // Check if the value ends with a decimal or a decimal with trailing zeroes
+                    const isDecimal = v?.endsWith(decimalSeparator) || v?.endsWith(decimalSeparator + '0')
+                    const newValue = isDecimal ? v : values?.float ?? ''
+                    setAmountFilter({
+                        value: Number(newValue),
+                        stringValue: newValue
+                    })
+                }}
+                // @ts-expect-error - CurrencyInputProps doesn't have a variant prop but Input does
+                variant={"outline"}
+                customInput={Input}
+            />
+        </div>
+        <div className="w-[25%]">
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size='md' className="min-w-32 w-full text-start justify-between">
+                        <div className="flex gap-2 items-center">
+                            {typeFilter === 'All' ? <DollarSign className="w-4 h-4 text-ink-gray-5" /> : typeFilter === 'Debits' ? <ArrowUpRight className="w-4 h-4 text-ink-red-3" /> : <ArrowDownRight className="w-4 h-4 text-ink-green-3" />}
+                            {_(typeFilter)}
+                        </div>
+                        <ChevronDown className="w-4 h-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                    <DropdownMenuItem onClick={() => onTypeFilterChange('All')}><DollarSign /> {_("All")}</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => onTypeFilterChange('Debits')}><ArrowUpRight className="text-ink-red-3" /> {_("Debits")}</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => onTypeFilterChange('Credits')}><ArrowDownRight className="text-ink-green-3" /> {_("Credits")}</DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+        <div className="w-[25%]">
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size='md' className="min-w-32 w-full text-start justify-between">
+                        <div className="flex gap-2 items-center">
+                            {status === 'All' ? <ListIcon className="w-4 h-4 text-ink-gray-5" /> :
+                                status === 'Reconciled' ? <CheckCircle2 className="w-4 h-4 text-ink-green-3" /> :
+                                    status === 'Unreconciled' ? <XCircle className="w-4 h-4 text-ink-red-3" /> :
+                                        <CheckCircle2 className="w-4 h-4 text-yellow-500" />}
+                            {_(status)}
+                        </div>
+
+                        <ChevronDown className="w-4 h-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                    <DropdownMenuItem onClick={() => setStatus('All')}>{<ListIcon className="w-4 h-4 text-ink-gray-5" />} {_("All")}</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setStatus('Reconciled')}>{<CheckCircle2 className="w-4 h-4 text-ink-green-3" />} {_("Reconciled")}</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setStatus('Unreconciled')}>{<XCircle className="w-4 h-4 text-ink-red-3" />} {_("Unreconciled")}</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setStatus('Partially Reconciled')}>{<CheckCircle2 className="w-4 h-4 text-yellow-500" />} {_("Partially Reconciled")}</DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    </div>
+}
+
+export default BankTransactions

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

@@ -0,0 +1,125 @@
+import { AlertDialog, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from "@/components/ui/alert-dialog"
+import { useAtom, useAtomValue } from "jotai"
+import { bankRecDateAtom, bankRecUnreconcileModalAtom, selectedBankAccountAtom } from "./bankRecAtoms"
+import { useMemo } from "react"
+import { useFrappeGetDoc, useFrappePostCall, useSWRConfig } from "frappe-react-sdk"
+import { BankTransaction } from "@/types/Accounts/BankTransaction"
+import { toast } from "sonner"
+import ErrorBanner from "@/components/ui/error-banner"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { formatCurrency } from "@/lib/numbers"
+import { Badge } from "@/components/ui/badge"
+import { slug } from "@/lib/frappe"
+import SelectedTransactionDetails from "./SelectedTransactionDetails"
+import _ from "@/lib/translate"
+
+const BankTransactionUnreconcileModal = () => {
+
+    const [unreconcileModal, setBankRecUnreconcileModal] = useAtom(bankRecUnreconcileModalAtom)
+
+    const onOpenChange = (v: boolean) => {
+        if (!v) {
+            setBankRecUnreconcileModal('')
+        }
+    }
+
+    return <AlertDialog open={!!unreconcileModal} onOpenChange={onOpenChange}>
+        <AlertDialogOverlay />
+        <AlertDialogContent className="min-w-2xl">
+            <AlertDialogHeader>
+                <AlertDialogTitle>{_("Undo Transaction Reconciliation")}</AlertDialogTitle>
+                <AlertDialogDescription>
+                    {_("Are you sure you want to unreconcile this transaction?")}
+                </AlertDialogDescription>
+            </AlertDialogHeader>
+            <BankTransactionUnreconcileModalContent />
+        </AlertDialogContent>
+    </AlertDialog>
+
+
+}
+
+const BankTransactionUnreconcileModalContent = () => {
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+    const dates = useAtomValue(bankRecDateAtom)
+
+    const { mutate } = useSWRConfig()
+
+    const [unreconcileModal, setBankRecUnreconcileModal] = useAtom(bankRecUnreconcileModalAtom)
+
+    const { data: transaction, error } = useFrappeGetDoc<BankTransaction>('Bank Transaction', unreconcileModal)
+
+    const { call, loading, error: unreconcileError } = useFrappePostCall('erpnext.accounts.doctype.bank_transaction.bank_transaction.unreconcile_transaction')
+
+    const onUnreconcile = (event: React.MouseEvent<HTMLButtonElement>) => {
+        call({
+            transaction_name: unreconcileModal
+        }).then(() => {
+            // Mutate the transactions list, unreconciled transactions list and account closing balance
+            mutate(`bank-reconciliation-bank-transactions-${bankAccount?.name}-${dates.fromDate}-${dates.toDate}`)
+            mutate(`bank-reconciliation-unreconciled-transactions-${bankAccount?.name}-${dates.fromDate}-${dates.toDate}`)
+            mutate(`bank-reconciliation-account-closing-balance-${bankAccount?.name}-${dates.toDate}`)
+            toast.success(_("Transaction Unreconciled"))
+            setBankRecUnreconcileModal('')
+        })
+
+        event.preventDefault()
+    }
+
+    const vouchersWhichWillBeCancelled = useMemo(() => {
+        return transaction?.payment_entries?.filter((payment) => payment.reconciliation_type === 'Voucher Created')
+    }, [transaction])
+
+    return <div>
+        <div className="flex flex-col gap-3">
+            {error && <ErrorBanner error={error} />}
+            {unreconcileError && <ErrorBanner error={unreconcileError} />}
+            {transaction && <SelectedTransactionDetails transaction={transaction} />}
+            <span className="font-medium text-sm">{_("This transaction has been reconciled with the following document(s):")}</span>
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>{_("Document")}</TableHead>
+                        <TableHead>{_("Amount")}</TableHead>
+                        <TableHead>{_("Reconciliation Type")}</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {transaction?.payment_entries?.map((voucher) => {
+                        return <TableRow key={voucher.name}>
+                            <TableCell>
+                                <a className="underline underline-offset-4"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    href={`/desk/${slug(voucher.payment_document as string)}/${voucher.payment_entry}`}
+                                >
+                                    {`${_(voucher.payment_document)}: ${voucher.payment_entry}`}
+                                </a>
+                            </TableCell>
+                            <TableCell>{formatCurrency(voucher.allocated_amount)}</TableCell>
+                            <TableCell>{voucher.reconciliation_type === 'Voucher Created' ?
+                                <Badge theme="green">{_(voucher.reconciliation_type)}</Badge> :
+                                <Badge theme="blue">{_(voucher.reconciliation_type ?? "Matched")}</Badge>}</TableCell>
+                        </TableRow>
+                    })}
+                </TableBody>
+            </Table>
+            <div className="py-4">
+                {vouchersWhichWillBeCancelled && vouchersWhichWillBeCancelled?.length > 0 && <span>The following documents will be <strong>cancelled</strong>:</span>}
+                {vouchersWhichWillBeCancelled && vouchersWhichWillBeCancelled?.length > 0 && <ol className="ms-6 list-disc [&>li]:mt-2">
+                    {vouchersWhichWillBeCancelled?.map((voucher) => {
+                        return <li key={voucher.name}>{_(voucher.payment_document)}: {voucher.payment_entry}</li>
+                    })}
+                </ol>}
+            </div>
+        </div>
+        <AlertDialogFooter>
+            <AlertDialogCancel disabled={loading}>{_("Cancel")}</AlertDialogCancel>
+            <AlertDialogAction onClick={onUnreconcile} theme="red" disabled={loading}>
+                {_("Unreconcile")}
+            </AlertDialogAction>
+        </AlertDialogFooter>
+    </div>
+}
+
+export default BankTransactionUnreconcileModal

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

@@ -0,0 +1,92 @@
+import { Button } from "@/components/ui/button"
+import { selectedCompanyAtom, useCurrentCompany } from "@/hooks/useCurrentCompany"
+import { useSetAtom } from "jotai"
+import { Building2, Check, ChevronDown } from "lucide-react"
+import { useState } from "react"
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "@/components/ui/command"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+import _ from "@/lib/translate"
+import { selectedBankAccountAtom } from "./bankRecAtoms"
+
+const CompanySelector = ({ onChange }: { onChange?: (company: string) => void }) => {
+    const [open, setOpen] = useState(false)
+    const [searchQuery, setSearchQuery] = useState("")
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const options = window.frappe?.boot?.docs?.filter((doc: Record<string, any>) => doc.doctype === ":Company").map((company: Record<string, any>) => company.name) || []
+
+    const setSelectedCompany = useSetAtom(selectedCompanyAtom)
+    const setSelectedBankAccount = useSetAtom(selectedBankAccountAtom)
+    const selectedCompany = useCurrentCompany()
+
+    const handleSelectCompany = (company: string) => {
+        setSelectedCompany(company)
+        setSearchQuery("")
+        setOpen(false)
+        // Only reset bank account if the company is changed
+        if (selectedCompany !== company) {
+            setSelectedBankAccount(null)
+            onChange?.(company)
+        }
+    }
+
+    return (<Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+            <Button
+                variant="outline"
+                type='button'
+                role="combobox"
+                size='md'
+                aria-expanded={open}
+                className="justify-between"
+            >
+                <div className="flex items-center gap-2">
+                    <Building2 />
+                    {selectedCompany}
+                </div>
+                <ChevronDown className="text-ink-gray-4" />
+            </Button>
+        </PopoverTrigger>
+        <PopoverContent className="min-w-56 w-fit p-0">
+            <Command value={selectedCompany}>
+                {options.length > 5 && <CommandInput placeholder={_("Search company...")} className="h-9" />}
+                <CommandList>
+                    <CommandEmpty>{_("No company found.")}</CommandEmpty>
+                    <CommandGroup>
+                        {options.map((option: string) => (
+                            <CommandItem
+                                key={option}
+                                value={option}
+                                onSelect={(currentValue) => {
+                                    handleSelectCompany(currentValue)
+                                }}
+                            >
+                                {option}
+                                <Check
+                                    className={cn(
+                                        "ms-auto",
+                                        searchQuery === option ? "opacity-100" : "opacity-0"
+                                    )}
+                                />
+                            </CommandItem>
+                        ))}
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+        </PopoverContent>
+    </Popover>)
+}
+
+export default CompanySelector

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

@@ -0,0 +1,229 @@
+import { useAtomValue } from "jotai"
+import { MissingFiltersBanner } from "./MissingFiltersBanner"
+import { bankRecDateAtom, selectedBankAccountAtom } from "./bankRecAtoms"
+import { useCurrentCompany } from "@/hooks/useCurrentCompany"
+import { Paragraph } from "@/components/ui/typography"
+import type { ColumnDef } from "@tanstack/react-table"
+import { useCallback, useMemo } from "react"
+import { useFrappeGetCall, useFrappePostCall } from "frappe-react-sdk"
+import { QueryReportReturnType } from "@/types/custom/Reports"
+import { formatDate } from "@/lib/date"
+import { ListView, type ListViewColumnMeta } from "@/components/ui/list-view"
+import { formatCurrency } from "@/lib/numbers"
+import { getCompanyCurrency } from "@/lib/company"
+import { getErrorMessage, slug } from "@/lib/frappe"
+import { Button } from "@/components/ui/button"
+import { toast } from "sonner"
+import { PartyPopper } from "lucide-react"
+import ErrorBanner from "@/components/ui/error-banner"
+import _ from "@/lib/translate"
+import { Empty, EmptyTitle, EmptyDescription, EmptyMedia, EmptyHeader } from "@/components/ui/empty"
+
+const IncorrectlyClearedEntries = () => {
+    const companyID = useCurrentCompany()
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+    const dates = useAtomValue(bankRecDateAtom)
+
+    if (!companyID || !bankAccount || !dates) {
+        const missingFields = []
+        if (!companyID) {
+            missingFields.push('Company')
+        }
+        if (!bankAccount) {
+            missingFields.push('Bank Account')
+        }
+        if (!dates) {
+            missingFields.push('Dates')
+        }
+        return <MissingFiltersBanner text={`Please select ${missingFields.join(', ')} to view the incorrectly cleared entries.`} />
+    }
+
+    return <IncorrectlyClearedEntriesView />
+}
+
+interface IncorrectlyClearedEntry {
+    payment_document: string
+    payment_entry: string
+    debit: number
+    credit: number
+    posting_date: string,
+    clearance_date: string,
+}
+
+const IncorrectlyClearedEntriesView = () => {
+
+    const companyID = useCurrentCompany()
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+    const dates = useAtomValue(bankRecDateAtom)
+
+    const filters = useMemo(() => {
+        return JSON.stringify({
+            company: companyID,
+            account: bankAccount?.account,
+            report_date: dates.toDate
+        })
+    }, [companyID, bankAccount, dates])
+
+    const { data, error, mutate } = useFrappeGetCall<{ message: QueryReportReturnType<IncorrectlyClearedEntry> }>('frappe.desk.query_report.run', {
+        report_name: 'Cheques and Deposits Incorrectly cleared',
+        filters,
+        ignore_prepared_report: 1,
+        are_default_filters: false,
+    }, `Report-Cheques and Deposits Incorrectly cleared-${filters}`, { keepPreviousData: true, revalidateOnFocus: false }, 'POST')
+
+    const formattedToDate = formatDate(dates.toDate)
+
+    const { call: clearClearingDate } = useFrappePostCall('erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.clear_clearing_date')
+
+    const onClearClick = useCallback(
+        (voucher_type: string, voucher_name: string) => {
+            clearClearingDate({ voucher_type, voucher_name })
+                .then(() => {
+                    toast.success(_("Cleared"), {
+                        duration: 1000,
+                    })
+                    mutate()
+                })
+                .catch((e) => {
+                    toast.error(_("There was an error while performing the action."), {
+                        description: getErrorMessage(e),
+                        duration: 5000,
+                    })
+                })
+        },
+        [clearClearingDate, mutate, _],
+    )
+
+    const accountCurrency = useMemo(
+        () => bankAccount?.account_currency ?? getCompanyCurrency(companyID),
+        [bankAccount?.account_currency, companyID],
+    )
+
+    const incorrectlyClearedColumns = useMemo<ColumnDef<IncorrectlyClearedEntry, unknown>[]>(
+        () => [
+            {
+                accessorKey: "payment_document",
+                header: _("Document Type"),
+                size: 128,
+                cell: ({ row }) => _(row.original.payment_document),
+            },
+            {
+                id: "payment_entry",
+                header: _("Payment Document"),
+                size: 160,
+                meta: {
+                    getTooltipText: (r) => {
+                        const x = r as IncorrectlyClearedEntry
+                        return [x.payment_document, x.payment_entry].filter(Boolean).join(" · ") || undefined
+                    },
+                } satisfies ListViewColumnMeta,
+                cell: ({ row }) => (
+                    <a
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-ink-gray-8 block min-w-0 w-full underline underline-offset-4"
+                        href={`/desk/${slug(row.original.payment_document)}/${row.original.payment_entry}`}
+                    >
+                        {row.original.payment_entry}
+                    </a>
+                ),
+            },
+            {
+                accessorKey: "debit",
+                header: _("Debit"),
+                size: 120,
+                meta: { align: "right" } satisfies ListViewColumnMeta,
+                cell: ({ row }) => formatCurrency(row.original.debit, accountCurrency),
+            },
+            {
+                accessorKey: "credit",
+                header: _("Credit"),
+                size: 120,
+                meta: { align: "right" } satisfies ListViewColumnMeta,
+                cell: ({ row }) => formatCurrency(row.original.credit, accountCurrency),
+            },
+            {
+                accessorKey: "posting_date",
+                header: _("Posting Date"),
+                size: 118,
+                meta: { tabularNums: true } satisfies ListViewColumnMeta,
+                cell: ({ row }) => formatDate(row.original.posting_date),
+            },
+            {
+                accessorKey: "clearance_date",
+                header: _("Clearance Date"),
+                size: 118,
+                meta: { tabularNums: true } satisfies ListViewColumnMeta,
+                cell: ({ row }) => formatDate(row.original.clearance_date),
+            },
+            {
+                id: "actions",
+                header: _("Actions"),
+                size: 180,
+                enableResizing: false,
+                meta: { truncate: false, truncateTooltip: false } satisfies ListViewColumnMeta,
+                cell: ({ row }) => (
+                    <Button
+                        variant="link"
+                        size="sm"
+                        className="text-ink-red-3 px-0"
+                        onClick={() => onClearClick(row.original.payment_document, row.original.payment_entry)}
+                    >
+                        {_("Reset Clearing Date")}
+                    </Button>
+                ),
+            },
+        ],
+        [_, accountCurrency, onClearClick],
+    )
+
+    return <div className="space-y-4 py-2">
+
+        <div>
+            <Paragraph className="text-sm">
+                <span dangerouslySetInnerHTML={{
+                    __html: _("This report shows all entries in the system where the <strong>clearance date is before the posting date</strong> which is incorrect.")
+                }} />
+                <br />
+                {data && data.message.result.length > 0 && <span>
+                    <span dangerouslySetInnerHTML={{
+                        __html: _("Entries below have a posting date after {0} but the clearance date is before {1}.", [`<strong>${formattedToDate}</strong>`, `<strong>${formattedToDate}</strong>`])
+                    }} />
+                    <br />
+                    {_("You can reset the clearing dates of these entries here.")}
+                </span>}
+            </Paragraph>
+        </div>
+
+        {error && <ErrorBanner error={error} />}
+
+        {data && data.message.result.length > 0 && (
+            <div className="space-y-2">
+                <p className="text-ink-gray-5 text-sm">{_("Incorrectly cleared entries as per the report.")}</p>
+                <ListView
+                    data={data.message.result}
+                    columns={incorrectlyClearedColumns}
+                    getRowId={(row) => `${row.payment_entry}-${row.posting_date}`}
+                    maxHeight="min(70vh, 640px)"
+                    emptyState={_("No rows to display.")}
+                />
+            </div>
+        )}
+
+        {data && data.message.result.length === 0 &&
+            <Empty>
+                <EmptyMedia>
+                    <PartyPopper />
+                </EmptyMedia>
+                <EmptyHeader>
+                    <EmptyTitle>{_("It's all good!")}</EmptyTitle>
+                    <EmptyDescription>{_("There are no entries in the system where the clearance date is before the posting date.")}</EmptyDescription>
+                </EmptyHeader>
+            </Empty>
+        }
+
+
+    </div>
+}
+
+export default IncorrectlyClearedEntries

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

@@ -0,0 +1,949 @@
+import { useAtom, useAtomValue, useSetAtom } from "jotai"
+import { bankRecAmountFilter, bankRecDateAtom, bankRecRecordJournalEntryModalAtom, bankRecRecordPaymentModalAtom, bankRecSelectedTransactionAtom, bankRecTransactionTypeFilter, bankRecTransferModalAtom, selectedBankAccountAtom } from "./bankRecAtoms"
+import { H4 } from "@/components/ui/typography"
+import { useMemo, useRef } from "react"
+import { getCompanyCurrency } from "@/lib/company"
+import ErrorBanner from "@/components/ui/error-banner"
+import { Separator } from "@/components/ui/separator"
+import Fuse from 'fuse.js'
+import { getSearchResults, LinkedPayment, UnreconciledTransaction, useGetRuleForTransaction, useGetUnreconciledTransactions, useGetVouchersForTransaction, useIsTransactionWithdrawal, useReconcileTransaction, useTransactionSearch } from "./utils"
+import { Input } from "@/components/ui/input"
+import { AlertCircleIcon, ArrowDownRight, ArrowRightIcon, ArrowRightLeft, ArrowUpRight, BadgeCheck, ChevronDown, DollarSign, Landmark, LandmarkIcon, ListIcon, Loader2, Receipt, ReceiptIcon, Search, User, XCircle, ZapIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
+import CurrencyInput from 'react-currency-input-field'
+import { getCurrencySymbol } from "@/lib/currency"
+import { Virtuoso } from 'react-virtuoso'
+import { formatDate } from "@/lib/date"
+import { Badge } from "@/components/ui/badge"
+import { formatCurrency, getCurrencyFormatInfo } from "@/lib/numbers"
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/components/ui/tooltip"
+import { Skeleton } from "@/components/ui/skeleton"
+import { slug } from "@/lib/frappe"
+import _ from "@/lib/translate"
+import TransferModal from "./TransferModal"
+import BankEntryModal from "./BankEntryModal"
+import RecordPaymentModal from "./RecordPaymentModal"
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import SelectedTransactionsTable from "./SelectedTransactionsTable"
+import MatchFilters from "./MatchFilters"
+import { useHotkeys } from "react-hotkeys-hook"
+import { KeyboardMetaKeyIcon } from "@/components/ui/keyboard-keys"
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+import { useFrappeGetCall } from "frappe-react-sdk"
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
+import { Link } from "react-router"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { InputGroup, InputGroupAddon, InputGroupText } from "@/components/ui/input-group"
+
+const MatchAndReconcile = ({ contentHeight }: { contentHeight: number }) => {
+    const selectedBank = useAtomValue(selectedBankAccountAtom)
+
+    if (!selectedBank) {
+        return <Empty>
+            <EmptyMedia>
+                <LandmarkIcon />
+            </EmptyMedia>
+            <EmptyHeader>
+                <EmptyTitle>{_("Select a bank account to reconcile")}</EmptyTitle>
+            </EmptyHeader>
+        </Empty>
+    }
+
+    return <>
+        <div className={`flex items-start space-x-2`} >
+            <div className="flex-1">
+                <H4 className="text-sm font-medium">{_("Unreconciled Transactions")}</H4>
+                <UnreconciledTransactions contentHeight={contentHeight} />
+            </div>
+            <Separator orientation="vertical" style={{ minHeight: `${contentHeight}px` }} />
+            <div className="flex-1 px-1">
+                <H4 className="text-sm font-medium">{_("Match or Create")}</H4>
+                <VouchersSection contentHeight={contentHeight} />
+            </div>
+        </div>
+        <TransferModal />
+        <BankEntryModal />
+        <RecordPaymentModal />
+    </>
+}
+
+
+const UnreconciledTransactions = ({ contentHeight }: { contentHeight: number }) => {
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+
+    const currency = bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? '')
+    const currencySymbol = getCurrencySymbol(currency)
+    const formatInfo = getCurrencyFormatInfo(currency)
+    const groupSeparator = formatInfo.group_sep || ","
+    const decimalSeparator = formatInfo.decimal_str || "."
+
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    const { data: unreconciledTransactions, isLoading, error } = useGetUnreconciledTransactions()
+
+    const [typeFilter, setTypeFilter] = useAtom(bankRecTransactionTypeFilter)
+    const [amountFilter, setAmountFilter] = useAtom(bankRecAmountFilter)
+
+    const [search, setSearch] = useTransactionSearch()
+
+    const searchIndex = useMemo(() => {
+
+        if (!unreconciledTransactions) {
+            return null
+        }
+
+        return new Fuse(unreconciledTransactions.message, {
+            keys: ['description', 'reference_number'],
+            threshold: 0.5,
+            includeScore: true
+        })
+    }, [unreconciledTransactions])
+
+    const results = useMemo(() => {
+
+        return getSearchResults(searchIndex, search, typeFilter, amountFilter.value, unreconciledTransactions?.message)
+
+    }, [searchIndex, search, typeFilter, amountFilter.value, unreconciledTransactions?.message])
+
+    const setSelectedTransaction = useSetAtom(bankRecSelectedTransactionAtom(bankAccount?.name || ''))
+
+    const onFilterChange = () => {
+        setSelectedTransaction([])
+    }
+
+    const onSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearch(e.target.value)
+        onFilterChange()
+    }
+
+    const onTypeFilterChange = (type: string) => {
+        setTypeFilter(type)
+        onFilterChange()
+    }
+
+    const onClearFilters = () => {
+        setSearch('')
+        if (inputRef.current) {
+            inputRef.current.value = ''
+        }
+        setTypeFilter('All')
+        setAmountFilter({ value: 0, stringValue: '' })
+        onFilterChange()
+    }
+
+    const hasFilters = search !== '' || typeFilter !== 'All' || amountFilter.value !== 0
+
+    if (isLoading) {
+        return <UnreconciledTransactionsLoadingState />
+    }
+
+    return <div className="space-y-1">
+        <div className="flex py-2 w-full gap-2">
+
+            <InputGroup variant='outline'>
+                <label className="sr-only">{_("Search transactions")}</label>
+                <InputGroupAddon>
+                    <Search className="w-4 h-4 text-ink-gray-5" />
+                </InputGroupAddon>
+                <Input
+                    placeholder={_("Search")}
+                    // type='search'
+                    variant='outline'
+                    onChange={onSearchChange}
+                    defaultValue={search}
+                    ref={inputRef}
+                />
+                <InputGroupAddon align='inline-end'>
+                    <InputGroupText>{results?.length} {_(results?.length === 1 ? "result" : "results")}</InputGroupText>
+                </InputGroupAddon>
+            </InputGroup>
+            <div>
+                <label className="sr-only">{_("Filter by amount")}</label>
+                <CurrencyInput
+                    groupSeparator={groupSeparator}
+                    decimalSeparator={decimalSeparator}
+                    placeholder={`${currencySymbol}0${decimalSeparator}00`}
+                    decimalsLimit={2}
+                    value={amountFilter.stringValue}
+                    maxLength={12}
+                    decimalScale={2}
+                    prefix={currencySymbol}
+                    onValueChange={(v, _n, values) => {
+                        // If the input ends with a decimal or a decimal with trailing zeroes, store the string since we need the user to be able to type the decimals.
+                        // When the user eventually types the decimals or blurs out, the value is formatted anyway.
+                        // Otherwise store the float value
+                        // Check if the value ends with a decimal or a decimal with trailing zeroes
+                        const isDecimal = v?.endsWith(decimalSeparator) || v?.endsWith(decimalSeparator + '0')
+                        const newValue = isDecimal ? v : values?.float ?? ''
+                        const nextAmountFilter = {
+                            value: Number(newValue),
+                            stringValue: newValue
+                        }
+                        const hasAmountFilterChanged = amountFilter.value !== nextAmountFilter.value || amountFilter.stringValue !== nextAmountFilter.stringValue
+
+                        setAmountFilter(nextAmountFilter)
+
+                        // `onValueChange` also fires on blur; avoid clearing selected transaction unless filter value actually changed.
+                        if (hasAmountFilterChanged) {
+                            onFilterChange()
+                        }
+                    }}
+                    // @ts-expect-error - CurrencyInputProps doesn't have a variant prop but Input does
+                    variant={"outline"}
+                    customInput={Input}
+                />
+            </div>
+            <div>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="outline" size='md' className="min-w-32 text-start">
+                            {typeFilter === 'All' ? <DollarSign className="text-ink-gray-5" /> : typeFilter === 'Debits' ? <ArrowUpRight className="text-ink-red-3" /> : <ArrowDownRight className="text-ink-green-3" />}
+                            {_(typeFilter)}
+                            <ChevronDown className="text-ink-gray-5" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                        <DropdownMenuItem onClick={() => onTypeFilterChange('All')}><DollarSign /> {_("All")}</DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => onTypeFilterChange('Debits')}><ArrowUpRight className="text-ink-red-3" /> {_("Debits")}</DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => onTypeFilterChange('Credits')}><ArrowDownRight className="text-ink-green-3" /> {_("Credits")}</DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+        </div>
+
+        {error && <ErrorBanner error={error} />}
+
+        <OlderUnreconciledTransactionsBanner />
+
+        {results.length === 0 && <NoTransactionsFoundBanner
+            onClearFilters={hasFilters ? onClearFilters : undefined}
+            text={hasFilters ? _("No transactions found for the given filters.") : _("No unreconciled transactions found")}
+            description={hasFilters ? _("Try adjusting your search or filter criteria.") : _("Import your bank statement to get started.")} />}
+
+        <Virtuoso
+            data={results}
+            itemContent={(_index, transaction) => (
+                <UnreconciledTransactionItem transaction={transaction} />
+            )}
+            style={{ minHeight: Math.max(contentHeight - 80, 400) }}
+            totalCount={results?.length}
+        />
+
+    </div>
+}
+
+const NoTransactionsFoundBanner = ({ text, description, onClearFilters }: { text: string, description?: string, onClearFilters?: () => void }) => {
+
+    return <Empty>
+        <EmptyMedia>
+            <ListIcon />
+        </EmptyMedia>
+        <EmptyHeader>
+            <EmptyTitle>{text}</EmptyTitle>
+            {description && <EmptyDescription>{description}</EmptyDescription>}
+        </EmptyHeader>
+        <EmptyContent>
+            {onClearFilters ? <Button type='button' size='sm' variant='subtle' onClick={onClearFilters}>Clear Filters</Button> :
+                <Button type='button' asChild size='sm' variant='subtle'>
+                    <Link to="/statement-importer">
+                        {_("Import Bank Statement")}
+                    </Link>
+                </Button>}
+        </EmptyContent>
+    </Empty>
+}
+
+const UnreconciledTransactionsLoadingState = () => {
+
+    return <div className="flex flex-col gap-2 py-2">
+        <div className="flex items-center gap-2 pb-2">
+            <Skeleton className="h-9.5 w-full" />
+            <Skeleton className="h-9.5 min-w-36" />
+            <Skeleton className="h-9.5 min-w-32" />
+        </div>
+        {Array.from({ length: 6 }).map((_, index) => (
+            <Skeleton key={index} className="h-16 w-full" />
+        ))}
+    </div>
+}
+
+const UnreconciledTransactionItem = ({ transaction }: { transaction: UnreconciledTransaction }) => {
+
+    const selectedBank = useAtomValue(selectedBankAccountAtom)
+
+    const [selectedTransaction, setSelectedTransaction] = useAtom(bankRecSelectedTransactionAtom(selectedBank?.name || ''))
+
+    const { amount, isWithdrawal } = useIsTransactionWithdrawal(transaction)
+
+    const isSelected = selectedTransaction?.some((t) => t.name === transaction.name)
+
+    const currency = transaction.currency ?? selectedBank?.account_currency ?? getCompanyCurrency(selectedBank?.company ?? '')
+
+    const handleSelectTransaction = (event: React.MouseEvent<HTMLDivElement>) => {
+        // If the user is pressing the shift key, add/remove the transaction from the selected transactions
+        if (event.shiftKey) {
+            setSelectedTransaction(isSelected ? selectedTransaction.filter((t) => t.name !== transaction.name) : [...selectedTransaction, transaction])
+        } else {
+            setSelectedTransaction([transaction])
+        }
+    }
+
+    return <div className="py-1">
+        <div className={cn("border outline rounded-md p-2 mx-0.5 cursor-pointer transition-[color,box-shadow, bg] hover:bg-surface-gray-1",
+            isSelected ? "bg-surface-gray-1 border-outline-gray-5 outline-outline-gray-5" : "border-outline-gray-2 outline-none"
+        )}
+            role='button'
+            tabIndex={0}
+            onClick={handleSelectTransaction}>
+            <div className="flex justify-between items-start w-full">
+                <div className="space-y-1">
+                    <div className="flex items-center gap-1">
+                        <span className="font-medium text-sm">{formatDate(transaction.date)}</span>
+                        {transaction.transaction_type &&
+                            <Badge theme="blue">{transaction.transaction_type}</Badge>}
+                        {transaction.reference_number && <Badge
+                            title={transaction.reference_number}
+                            className="max-w-[300px] text-ellipsis"
+                        >
+                            {_("Ref")}: {transaction.reference_number}</Badge>}
+
+                        {transaction.matched_transaction_rule && <Badge
+                            theme="violet"
+                            title={_("Matched by rule")}>
+                            <ZapIcon className="w-4 h-4" /> {transaction.matched_transaction_rule}</Badge>}
+                    </div>
+                    <span className="text-sm">{transaction.description}</span>
+                </div>
+                <div className="gap-1 flex flex-col items-end min-w-36 h-full text-end">
+                    {isWithdrawal ? <ArrowUpRight className="size-5 text-ink-red-3" /> : <ArrowDownRight className="size-5 text-ink-green-3" />}
+                    {amount && amount > 0 && <span className="font-semibold font-numeric text-base">{formatCurrency(amount, currency)}</span>}
+                    {amount !== transaction.unallocated_amount && <span className="text-xs leading-normal text-ink-gray-5">{formatCurrency(transaction.unallocated_amount, currency)} {_("Unallocated")}</span>}
+                </div>
+            </div>
+        </div>
+    </div>
+}
+
+
+const VouchersSection = ({ contentHeight }: { contentHeight: number }) => {
+
+    const selectedBank = useAtomValue(selectedBankAccountAtom)
+    const selectedTransactions = useAtomValue(bankRecSelectedTransactionAtom(selectedBank?.name || ''))
+
+
+    if (selectedTransactions.length === 0) {
+        return <Empty>
+            <EmptyMedia>
+                <ReceiptIcon />
+            </EmptyMedia>
+            <EmptyHeader>
+                <EmptyTitle>{_("Select a transaction to match and reconcile with vouchers")}</EmptyTitle>
+            </EmptyHeader>
+        </Empty>
+    }
+
+    if (selectedTransactions.length > 1) {
+        return <OptionsForMultipleTransactions transactions={selectedTransactions} />
+    }
+
+    return <div style={{ minHeight: contentHeight }} className="mt-2">
+        <OptionsForSingleTransaction transaction={selectedTransactions[0]} contentHeight={contentHeight} />
+    </div>
+}
+
+const useKeyboardShortcuts = () => {
+    const setTransferModalOpen = useSetAtom(bankRecTransferModalAtom)
+    const setRecordPaymentModalOpen = useSetAtom(bankRecRecordPaymentModalAtom)
+    const setRecordJournalEntryModalOpen = useSetAtom(bankRecRecordJournalEntryModalAtom)
+
+    useHotkeys('meta+p', () => {
+        // 
+        setRecordPaymentModalOpen(true)
+    }, {
+        enabled: true,
+        enableOnFormTags: false,
+        preventDefault: true
+    })
+
+    useHotkeys('meta+b', () => {
+        // 
+        setRecordJournalEntryModalOpen(true)
+    }, {
+        enabled: true,
+        enableOnFormTags: false,
+        preventDefault: true
+    })
+
+    useHotkeys('meta+i', () => {
+        // 
+        setTransferModalOpen(true)
+    }, {
+        enabled: true,
+        enableOnFormTags: false,
+        preventDefault: true
+    })
+
+    return {
+        setTransferModalOpen,
+        setRecordPaymentModalOpen,
+        setRecordJournalEntryModalOpen
+    }
+}
+
+const OptionsForMultipleTransactions = ({ transactions }: { transactions: UnreconciledTransaction[] }) => {
+
+    const { setTransferModalOpen, setRecordPaymentModalOpen, setRecordJournalEntryModalOpen } = useKeyboardShortcuts()
+
+    return <div className="flex flex-col py-4">
+        <Card className="gap-2">
+            <CardHeader>
+                <CardTitle>
+                    <div className="flex items-center justify-between">
+                        <span className="text-md font-medium">{transactions.length} {_(transactions.length === 1 ? _("transaction selected") : _("transactions selected"))}</span>
+                        <span className="text-md font-medium font-numeric">
+                            {formatCurrency(transactions.reduce((acc, transaction) => acc + (transaction.unallocated_amount ?? 0), 0), transactions[0].currency ?? '')}
+                        </span>
+                    </div>
+                </CardTitle>
+            </CardHeader>
+            <CardContent>
+                <SelectedTransactionsTable />
+
+                <CardAction className="mt-4 justify-self-center">
+                    <div className="flex gap-3 justify-center">
+                        <TooltipProvider>
+                            <div className="flex gap-4 justify-center">
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <Button
+                                            size='md'
+                                            aria-label={_("Record a bank journal entry for expenses, income or split transactions")}
+                                            onClick={() => setRecordJournalEntryModalOpen(true)}>
+                                            <Landmark /> {_("Bank Entry")}
+                                        </Button>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        {_("Record a journal entry for expenses, income or split transactions")}
+                                        <KbdGroup className="ms-2">
+                                            <Kbd><KeyboardMetaKeyIcon /></Kbd>
+                                            <Kbd>B</Kbd>
+                                        </KbdGroup>
+                                    </TooltipContent>
+                                </Tooltip>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <Button
+                                            variant='outline'
+                                            size='md'
+                                            aria-label={_("Record a payment entry against a customer or supplier")}
+                                            onClick={() => setRecordPaymentModalOpen(true)}>
+                                            <Receipt /> {_("Record Payment")}
+                                        </Button>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        {_("Record a payment entry against a customer or supplier")}
+                                        <KbdGroup className="ms-2">
+                                            <Kbd><KeyboardMetaKeyIcon /></Kbd>
+                                            <Kbd>P</Kbd>
+                                        </KbdGroup>
+                                    </TooltipContent>
+                                </Tooltip>
+
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <Button
+                                            variant='outline'
+                                            size='md'
+                                            aria-label={_("Record an internal transfer to another bank/credit card/cash account")}
+                                            onClick={() => setTransferModalOpen(true)}>
+                                            <ArrowRightLeft /> {_("Transfer")}
+                                        </Button>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        {_("Record an internal transfer to another bank/credit card/cash account")}
+                                        <KbdGroup className="ms-2">
+                                            <Kbd><KeyboardMetaKeyIcon /></Kbd>
+                                            <Kbd>I</Kbd>
+                                        </KbdGroup>
+                                    </TooltipContent>
+                                </Tooltip>
+
+                            </div>
+                        </TooltipProvider>
+                    </div>
+                </CardAction>
+            </CardContent>
+        </Card>
+
+    </div>
+}
+
+
+const OptionsForSingleTransaction = ({ transaction, contentHeight }: { transaction: UnreconciledTransaction, contentHeight: number }) => {
+
+    const { setTransferModalOpen, setRecordPaymentModalOpen, setRecordJournalEntryModalOpen } = useKeyboardShortcuts()
+
+    return <div className="flex flex-col gap-3">
+        <TooltipProvider>
+            <div className="flex items-center justify-between pt-2">
+                <div className="flex gap-4 justify-center">
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <Button
+                                variant='outline'
+                                size='md'
+                                aria-label={_("Record a payment entry against a customer or supplier")}
+                                onClick={() => setRecordPaymentModalOpen(true)}>
+                                <Receipt /> {_("Record Payment")}
+                            </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                            {_("Record a payment entry against a customer or supplier")}
+                            <KbdGroup className="ms-2">
+                                <Kbd><KeyboardMetaKeyIcon /></Kbd>
+                                <Kbd>P</Kbd>
+                            </KbdGroup>
+                        </TooltipContent>
+                    </Tooltip>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <Button
+                                variant='outline'
+                                size='md'
+                                aria-label={_("Record a bank journal entry for expenses, income or split transactions")}
+                                onClick={() => setRecordJournalEntryModalOpen(true)}>
+                                <Landmark /> {_("Bank Entry")}
+                            </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                            {_("Record a journal entry for expenses, income or split transactions")}
+                            <KbdGroup className="ms-2">
+                                <Kbd><KeyboardMetaKeyIcon /></Kbd>
+                                <Kbd>B</Kbd>
+                            </KbdGroup>
+                        </TooltipContent>
+                    </Tooltip>
+                    <Tooltip >
+                        <TooltipTrigger asChild>
+                            <Button
+                                variant='outline'
+                                size='md'
+                                aria-label={_("Record an internal transfer to another bank/credit card/cash account")}
+                                onClick={() => setTransferModalOpen(true)}>
+                                <ArrowRightLeft /> {_("Transfer")}
+                            </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                            {_("Record an internal transfer to another bank/credit card/cash account")}
+                            <KbdGroup className="ms-2">
+                                <Kbd><KeyboardMetaKeyIcon /></Kbd>
+                                <Kbd>I</Kbd>
+                            </KbdGroup>
+                        </TooltipContent>
+                    </Tooltip>
+                </div>
+                <MatchFilters />
+            </div>
+        </TooltipProvider>
+        {transaction.matched_transaction_rule && <RuleAction transaction={transaction} />}
+        <VouchersForTransaction transaction={transaction} contentHeight={contentHeight} />
+    </div>
+}
+
+const RuleAction = ({ transaction }: { transaction: UnreconciledTransaction }) => {
+
+    const { data: rule } = useGetRuleForTransaction(transaction)
+    const setTransferModalOpen = useSetAtom(bankRecTransferModalAtom)
+    const setRecordPaymentModalOpen = useSetAtom(bankRecRecordPaymentModalAtom)
+    const setRecordJournalEntryModalOpen = useSetAtom(bankRecRecordJournalEntryModalAtom)
+
+    if (!rule) {
+        return null
+    }
+
+    const getActionIcon = () => {
+        switch (rule.classify_as) {
+            case "Bank Entry":
+                return <Landmark />
+            case "Payment Entry":
+                return <Receipt className="w-6 h-6" />
+            case "Transfer":
+                return <ArrowRightLeft />
+            default:
+                return <ZapIcon />
+        }
+    }
+
+    const getActionStyles = () => {
+        switch (rule.classify_as) {
+            case "Bank Entry":
+                return {
+                    border: "border-outline-blue-3",
+                    bg: "bg-surface-blue-1/50",
+                    text: "text-ink-blue-4",
+                    theme: "blue",
+                }
+            case "Payment Entry":
+                return {
+                    border: "border-outline-green-3",
+                    bg: "bg-surface-green-1/50",
+                    text: "text-ink-green-4",
+                    theme: "green",
+                }
+            case "Transfer":
+                return {
+                    border: "border-outline-violet-3",
+                    bg: "bg-surface-violet-2/50",
+                    text: "text-ink-violet-4",
+                    theme: "violet",
+                }
+            default:
+                return {
+                    border: "border-outline-amber-3",
+                    bg: "bg-surface-amber-1/50",
+                    text: "text-ink-amber-4",
+                    theme: "orange",
+                }
+        }
+    }
+
+    const handleActionClick = () => {
+        switch (rule.classify_as) {
+            case "Bank Entry":
+                setRecordJournalEntryModalOpen(true)
+                break
+            case "Payment Entry":
+                setRecordPaymentModalOpen(true)
+                break
+            case "Transfer":
+                setTransferModalOpen(true)
+                break
+        }
+    }
+
+    const getActionDescription = () => {
+        switch (rule.classify_as) {
+            case "Bank Entry":
+                return _("Create a journal entry for expenses, income or split transactions")
+            case "Payment Entry":
+                return _("Record a payment entry against a customer or supplier")
+            case "Transfer":
+                return _("Record an internal transfer to another bank/credit card/cash account")
+            default:
+                return _("Create a new entry based on the rule")
+        }
+    }
+
+    useHotkeys('meta+r', () => {
+        // 
+        handleActionClick()
+    }, {
+        enabled: true,
+        enableOnFormTags: false,
+        preventDefault: true
+    })
+
+    const styles = getActionStyles()
+
+    return (
+        <Card className={`border ${styles.border} ${styles.bg} shadow-sm hover:shadow-md transition-all duration-200`}>
+            <CardHeader className="pb-0">
+                <CardTitle className="flex justify-between items-center gap-3">
+                    <div className="flex items-center gap-3">
+                        <div className={`px-2.5 rounded-lg ${styles.bg} ${styles.text}`}>
+                            {getActionIcon()}
+                        </div>
+                        <div className="flex flex-col gap-0.5">
+                            <span className="font-semibold text-lg">{rule.rule_name}</span>
+                            <span className="text-sm text-ink-gray-5 font-normal">
+                                {rule.rule_description || _("Rule matched based on transaction description and other criteria.")}
+                            </span>
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-0.5">
+                        <Badge size='lg'
+                            theme={rule.classify_as === "Bank Entry" ? "blue" : rule.classify_as === "Payment Entry" ? "green" : rule.classify_as === "Transfer" ? "violet" : "orange"}>
+                            {rule.classify_as}
+                        </Badge>
+                    </div>
+                </CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0 space-y-3">
+                <div className="flex items-center justify-between p-2 bg-surface-white rounded-lg border border-outline-gray-1">
+                    <div className="flex items-center gap-2">
+                        <BadgeCheck className="w-4 h-4 text-ink-green-3" />
+                        <span className="text-sm font-medium text-ink-gray-8">{_("Recommended Action")}</span>
+                    </div>
+                    <Badge variant="ghost" theme={styles.theme as "blue" | "green" | "violet" | "orange"}>
+                        {_("Priority")} {rule.priority}
+                    </Badge>
+                </div>
+
+                <div className="space-y-2">
+
+                    {rule.account && (
+                        <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium text-ink-gray-8">{_("Account")}:</span>
+                            <span className="text-sm">{rule.account}</span>
+                        </div>
+                    )}
+
+                    {rule.party_type && rule.party && (
+                        <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium text-ink-gray-8">{_("Party")}:</span>
+                            <span className="text-sm">{rule.party} ({_(rule.party_type)})</span>
+                        </div>
+                    )}
+                </div>
+
+                <div className="pt-1">
+                    <Button
+                        onClick={handleActionClick}
+                        className={`w-full`}
+                        theme={styles.theme as "blue" | "green" | "violet"}
+                        size="md"
+                    >
+                        {getActionIcon()}
+                        <span>{_("Create")} {rule.classify_as}</span>
+                    </Button>
+                    <p className="text-sm text-ink-gray-5 mt-2 text-center leading-relaxed">
+                        {getActionDescription()}
+                    </p>
+                </div>
+            </CardContent>
+        </Card>
+    )
+}
+
+const VouchersForTransaction = ({ transaction, contentHeight }: { transaction: UnreconciledTransaction, contentHeight: number }) => {
+
+    const { data: vouchers, isLoading, error } = useGetVouchersForTransaction(transaction)
+
+    if (error) {
+        return <ErrorBanner error={error} />
+    }
+
+    if (isLoading) {
+        return <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2 text-sm text-ink-gray-5">
+                <Separator className="flex-1" />
+                <span>or</span>
+                <Separator className="flex-1" />
+            </div>
+            <Skeleton className="h-16 w-full" />
+            <Skeleton className="h-16 w-full" />
+            <Skeleton className="h-16 w-full" />
+            <Skeleton className="h-16 w-full" />
+            <Skeleton className="h-16 w-full" />
+            <Skeleton className="h-16 w-full" />
+        </div>
+    }
+
+    return <div className="relative space-y-2">
+        <div className="flex items-center gap-2 text-sm text-ink-gray-5">
+            <Separator className="flex-1" />
+            <span>or</span>
+            <Separator className="flex-1" />
+        </div>
+        {vouchers?.message.length === 0 && <Empty className="my-4">
+            <EmptyMedia>
+                <ReceiptIcon />
+            </EmptyMedia>
+            <EmptyHeader>
+
+                <EmptyTitle>{_("No vouchers found for this transaction")}</EmptyTitle>
+            </EmptyHeader>
+        </Empty>}
+        <Virtuoso
+            data={vouchers?.message}
+            itemContent={(index, voucher) => (
+                <VoucherItem voucher={voucher} index={index} />
+            )}
+            style={{ height: contentHeight }}
+            totalCount={vouchers?.message.length}
+        />
+    </div >
+}
+
+const VoucherItem = ({ voucher, index }: { voucher: LinkedPayment, index: number }) => {
+
+    const selectedBank = useAtomValue(selectedBankAccountAtom)
+    const selectedTransaction = useAtomValue(bankRecSelectedTransactionAtom(selectedBank?.name || ''))
+
+    const { amountMatches, postingDateMatches, referenceDateMatches, referenceMatchesFull, referenceMatchesPartial, isSuggested } = useMemo(() => {
+
+        const transaction = selectedTransaction?.[0]
+
+        // We need to check if the following details match:
+        // Amount
+        // Date
+        // Reference/Description: Full or partial
+        // Whether this is suggested or not - depends on the above scores
+
+        const amountMatches = voucher.paid_amount === transaction?.unallocated_amount
+        const postingDateMatches = voucher.posting_date === transaction?.date
+        const referenceDateMatches = voucher.reference_date === transaction?.date
+        const referenceMatchesFull = voucher.reference_no === transaction?.reference_number || voucher.reference_no === transaction?.description
+
+        const referenceMatchesPartial = transaction?.reference_number?.includes(voucher.reference_no) || transaction?.description?.includes(voucher.reference_no)
+
+
+        const isSuggested = amountMatches && (postingDateMatches || referenceDateMatches || referenceMatchesPartial) && index === 0
+
+        return { isSelected: false, amountMatches, postingDateMatches, referenceDateMatches, referenceMatchesFull, referenceMatchesPartial, isSuggested: isSuggested }
+
+    }, [voucher, selectedTransaction, index])
+
+    const { reconcileTransaction, loading } = useReconcileTransaction()
+
+    const onClick = () => {
+        if (!selectedTransaction) {
+            return
+        }
+        reconcileTransaction(selectedTransaction[0], voucher)
+    }
+
+    return <div className="py-1 px-1">
+        <div
+            className={cn("border outline overflow-hidden relative rounded-md p-2",
+                isSuggested ? "border-outline-green-4 bg-surface-green-1/40 outline-outline-green-4" : "border-outline-gray-2 outline-transparent"
+            )}
+        >
+
+            <div className="flex justify-between items-end gap-2">
+                <div className="flex flex-col gap-2">
+                    <div className="flex items-center gap-2">
+                        <Badge size='md'>{_(voucher.doctype)}</Badge>
+                        <a target="_blank"
+                            href={`/desk/${slug(voucher.doctype)}/${voucher.name}`}
+                            className="underline underline-offset-2 text-base"
+                        >{voucher.name}</a>
+                    </div>
+                    {voucher.party && voucher.party_type && <div className="flex items-center gap-1.5 text-base">
+                        <User size='18px' />
+                        <span>{_(voucher.party_type)}</span>
+                        <a target="_blank"
+                            href={`/desk/${slug(voucher.party_type)}/${voucher.party}`}
+                            className="underline underline-offset-2"
+                        >{voucher.party}</a>
+                    </div>}
+                    <TooltipProvider>
+                        <div className="flex items-start gap-8 py-0.5">
+                            <div className="flex flex-col gap-1 min-w-24">
+                                <div className="text-xs text-ink-gray-6">{_("Amount")}</div>
+                                <div className="text-base font-medium flex items-center gap-1">{formatCurrency(voucher.paid_amount, voucher.currency)} {amountMatches ? <MatchBadge matchType="full" label={_("Amount matches the selected transaction")} /> : <MatchBadge matchType="none" label={_("Amount does not match the selected transaction")} />}</div>
+                            </div>
+
+                            <div className="flex flex-col gap-1 min-w-24">
+                                <div className="text-xs text-ink-gray-6">{_("Posted On")}</div>
+                                <div className="text-base font-medium flex items-center gap-1">{formatDate(voucher.posting_date)} {postingDateMatches ? <MatchBadge matchType="full" label={_("Posting date matches the selected transaction")} /> : <MatchBadge matchType="none" label={_("Posting date does not match the selected transaction")} />}</div>
+                            </div>
+
+                            {voucher.reference_date && <div className="flex flex-col gap-1 min-w-24">
+                                <div className="text-xs text-ink-gray-6">{_("Reference Date")}</div>
+                                <div className="text-base font-medium flex items-center gap-1">{formatDate(voucher.reference_date)} {referenceDateMatches ? <MatchBadge matchType="full" label={_("Reference date matches the selected transaction")} /> : <MatchBadge matchType="none" label={_("Reference date does not match the selected transaction")} />}</div>
+                            </div>}
+
+                        </div>
+                        {voucher.reference_no && <div className="flex items-start gap-1">
+                            <span className="text-p-base">
+                                {voucher.reference_no}
+                                &nbsp;&nbsp;
+                                <Tooltip>
+                                    <TooltipTrigger>
+                                        <Badge theme={referenceMatchesFull ? "green" : referenceMatchesPartial ? "orange" : "red"} variant={referenceMatchesFull || referenceMatchesPartial ? "subtle" : "outline"}>
+                                            {referenceMatchesFull ? `${_("Complete Match")}` : referenceMatchesPartial ? `${_("Partial Match")}` : `${_("No Match")}`}</Badge>
+                                    </TooltipTrigger>
+                                    <TooltipContent side="top">
+                                        {referenceMatchesFull ? `${_("Reference matches the selected transaction")}` : referenceMatchesPartial ? `${_("Reference matches the selected transaction partially")}` : `${_("Reference does not match the selected transaction")}`}
+                                    </TooltipContent>
+                                </Tooltip>
+                            </span>
+                        </div>}
+                    </TooltipProvider>
+                </div>
+                <div>
+                    <Button
+                        variant={isSuggested || amountMatches ? "solid" : "outline"}
+                        theme={isSuggested || amountMatches ? "green" : "gray"}
+                        onClick={onClick} disabled={loading}>{loading ? <><Loader2 className="w-4 h-4 animate-spin" /> {_("Reconciling")}...</> : `${_("Reconcile")}`}</Button>
+                </div>
+            </div>
+
+            {isSuggested && <div className="absolute top-1.5 end-2 flex items-center gap-1 justify-center">
+                <Badge theme="green" variant="subtle" size='md'>{_("Suggested")}</Badge>
+            </div>}
+
+        </div>
+    </div>
+}
+
+
+const MatchBadge = ({ matchType, label }: { matchType: 'full' | 'partial' | 'none', label: string }) => {
+    return <Tooltip>
+        <TooltipTrigger>
+            {matchType === 'full' ? <BadgeCheck className="text-ink-white fill-surface-green-5 size-4" /> : matchType === 'partial' ?
+                <Badge theme="orange" variant="subtle">{_("Partial Match")}</Badge> :
+                <XCircle className="text-ink-red-4 size-4" />}
+        </TooltipTrigger>
+        <TooltipContent>
+            {label}
+        </TooltipContent>
+    </Tooltip>
+}
+
+const OlderUnreconciledTransactionsBanner = () => {
+
+    // A banner to show when there are unreconciled transactions for the given bank account before the current selected date
+    const [dates, setDates] = useAtom(bankRecDateAtom)
+    const selectedBank = useAtomValue(selectedBankAccountAtom)
+
+    const { data } = useFrappeGetCall<{
+        message: {
+            count: number,
+            oldest_date: string
+        }
+    }>("erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.get_older_unreconciled_transactions", {
+        bank_account: selectedBank?.name,
+        from_date: dates.fromDate,
+    }, undefined, {
+        revalidateOnFocus: false,
+    })
+
+    if (data && data.message.count > 0) {
+
+        return <Alert theme='gray' variant='subtle'>
+            <AlertCircleIcon />
+            <div className="flex justify-between items-center gap-1.5">
+                <div>
+                    <AlertTitle> {data.message.count > 1 ? (
+                        <span>{_("There are {0} unreconciled transactions before {1}.", [data.message.count.toString(), formatDate(dates.fromDate)])}</span>
+                    ) : (
+                        <span>{_("There is one unreconciled transaction before {0}.", [formatDate(dates.fromDate)])}</span>
+                    )}</AlertTitle>
+                    <AlertDescription className="flex justify-between text-balance">
+                        {_("The opening balance might not match your bank statement. Would you like to reconcile them?")}
+                    </AlertDescription>
+                </div>
+                <div>
+                    <Button
+                        size='sm'
+                        type='button'
+                        theme='gray'
+                        variant='outline'
+                        onClick={() => setDates({ fromDate: data.message.oldest_date, toDate: dates.toDate })}>
+                        <span>{data.message.count > 1 ? _("View older transactions") : _("View older transaction")}</span>
+                        <ArrowRightIcon />
+                    </Button>
+                </div>
+            </div>
+        </Alert>
+    }
+
+    return null
+
+}
+
+export default MatchAndReconcile

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

@@ -0,0 +1,93 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import _ from '@/lib/translate'
+import { FilterIcon } from 'lucide-react'
+import { bankRecMatchFilters } from './bankRecAtoms'
+import { useAtom } from 'jotai'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+import { useFrappeGetCall } from 'frappe-react-sdk'
+import { scrub } from '@/lib/frappe'
+import { useMemo } from 'react'
+
+const MatchFilters = () => {
+    return (
+        <Popover>
+            <Tooltip>
+                <PopoverTrigger asChild>
+                    <TooltipTrigger asChild>
+                        <Button size='md' isIconButton variant='outline' aria-label={_("Configure match filters for vouchers")}>
+                            <FilterIcon />
+                        </Button>
+                    </TooltipTrigger>
+                </PopoverTrigger>
+                <TooltipContent>
+                    {_("Configure match filters for vouchers")}
+                </TooltipContent>
+            </Tooltip>
+            <PopoverContent>
+                <div className="flex flex-col gap-4">
+                    <ToggleSwitch label={_("Show Only Exact Amount")} id="exact_match" />
+                    <Separator />
+                    <MatchFiltersContent />
+                    <ToggleSwitch label={_("Bank Transaction")} id="bank_transaction" />
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+}
+
+const MatchFiltersContent = () => {
+
+    const { data } = useFrappeGetCall<{ message: string[] }>("erpnext.accounts.doctype.bank_transaction.bank_transaction.get_doctypes_for_bank_reconciliation", undefined,
+        "bank_rec_doctypes", {
+        revalidateOnFocus: false,
+        revalidateIfStale: false,
+        revalidateOnReconnect: false,
+    }
+    )
+
+    const doctypes = useMemo(() => {
+        const STANDARD_DOCTYPES = ["Payment Entry", "Journal Entry", "Purchase Invoice", "Sales Invoice"]
+        if (data) {
+            return data.message.map(doctype => ({
+                label: doctype,
+                id: scrub(doctype),
+            }))
+
+        } else {
+            return STANDARD_DOCTYPES.map(doctype => ({
+                label: doctype,
+                id: scrub(doctype),
+            }))
+        }
+    }, [data])
+
+    return (
+        <div className="flex flex-col gap-4">
+            {doctypes.map((doctype) => (
+                <ToggleSwitch key={doctype.id} label={doctype.label} id={doctype.id} />
+            ))}
+        </div>
+    )
+}
+
+const ToggleSwitch = ({ label, id }: { label: string, id: string }) => {
+
+    const [matchFilters, setMatchFilters] = useAtom(bankRecMatchFilters)
+
+    return <div className="flex items-center space-x-2">
+        <Switch id={id} checked={matchFilters.includes(id)} onCheckedChange={(checked) => {
+            if (checked) {
+                setMatchFilters([...matchFilters, id])
+            } else {
+                setMatchFilters(matchFilters.filter(filter => filter !== id))
+            }
+        }} />
+        <Label htmlFor={id}>{label}</Label>
+    </div>
+}
+
+export default MatchFilters

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

@@ -0,0 +1,10 @@
+import { Paragraph } from "@/components/ui/typography"
+import { cn } from "@/lib/utils"
+import { ReactNode } from "react"
+
+
+export const MissingFiltersBanner = ({ text, className }: { text: ReactNode, className?: string }) => {
+    return <div className={cn("min-h-[50vh] flex items-center justify-center", className)}>
+        <Paragraph>{text}</Paragraph>
+    </div>
+}

banking/src/components/features/BankReconciliation/Rules/CreateNewRule.tsx

@@ -0,0 +1,89 @@
+import { Button } from "@/components/ui/button"
+import ErrorBanner from "@/components/ui/error-banner"
+import { Form } from "@/components/ui/form"
+import { useCurrentCompany } from "@/hooks/useCurrentCompany"
+import _ from "@/lib/translate"
+import { BankTransactionRule } from "@/types/Accounts/BankTransactionRule"
+import { useFrappeCreateDoc } from "frappe-react-sdk"
+import { toast } from "sonner"
+import { RuleForm } from "./RuleForm"
+import { useForm } from "react-hook-form"
+import { SettingsPanelHeader, SettingsPanelDescription, SettingsPanelTitle, SettingsPanelContent } from "@/components/ui/settings-dialog"
+import { useHotkeys } from "react-hotkeys-hook"
+
+type Props = {
+    onCreate: VoidFunction
+}
+
+const CreateNewRule = ({ onCreate }: Props) => {
+
+    const currentCompany = useCurrentCompany()
+
+    const form = useForm<BankTransactionRule>({
+        defaultValues: {
+            rule_name: "",
+            company: currentCompany,
+            rule_description: "",
+            transaction_type: "Any",
+            classify_as: 'Bank Entry',
+            bank_entry_type: "Single Account",
+            description_rules: [{
+                check: "Contains",
+            }]
+        }
+    })
+
+    const { createDoc, loading, error } = useFrappeCreateDoc<BankTransactionRule>()
+
+    const onSubmit = (data: BankTransactionRule) => {
+        createDoc("Bank Transaction Rule", data)
+            .then(() => {
+                toast.success(_("Rule created successfully"))
+                onCreate()
+            })
+    }
+
+
+    useHotkeys('meta+s', () => {
+        form.handleSubmit(onSubmit)()
+    }, {
+        enabled: true,
+        preventDefault: true,
+        enableOnFormTags: true
+    })
+
+    return (
+        <>
+            <SettingsPanelHeader
+                actions={
+                    <div className="flex items-center gap-2">
+                        <Button variant='outline' size='md' type='button' onClick={() => onCreate()}>{_("Cancel")}</Button>
+                        <Button type='submit' form='rule-form' size='md' disabled={loading}>
+                            {_("Save")}
+                        </Button>
+                    </div>
+                }
+            >
+                <SettingsPanelTitle>
+                    {_("New Rule")}
+                </SettingsPanelTitle>
+                <SettingsPanelDescription>
+                    {_("Create a new rule to automatically classify transactions.")}
+                </SettingsPanelDescription>
+            </SettingsPanelHeader>
+            <SettingsPanelContent className="px-0">
+                <Form {...form}>
+                    <form id='rule-form' onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col justify-between h-full overflow-y-auto px-2">
+                        <div className="flex flex-col gap-4">
+                            {error && <ErrorBanner error={error} />}
+                            <RuleForm />
+                        </div>
+                    </form>
+                </Form>
+            </SettingsPanelContent>
+        </>
+
+    )
+}
+
+export default CreateNewRule

banking/src/components/features/BankReconciliation/Rules/EditRule.tsx

@@ -0,0 +1,101 @@
+import { Button } from "@/components/ui/button"
+import ErrorBanner from "@/components/ui/error-banner"
+import { Form } from "@/components/ui/form"
+import _ from "@/lib/translate"
+import { BankTransactionRule } from "@/types/Accounts/BankTransactionRule"
+import { FrappeError, useFrappeGetDoc, useFrappeUpdateDoc } from "frappe-react-sdk"
+import { toast } from "sonner"
+import { RuleForm } from "./RuleForm"
+import { useForm } from "react-hook-form"
+import { Skeleton } from "@/components/ui/skeleton"
+import { SettingsPanelContent, SettingsPanelDescription, SettingsPanelHeader, SettingsPanelTitle } from "@/components/ui/settings-dialog"
+import { useHotkeys } from "react-hotkeys-hook"
+
+type Props = {
+    onClose: VoidFunction,
+    ruleID: string
+}
+
+const EditRule = ({ onClose, ruleID }: Props) => {
+
+    const { data: rule, isValidating, error, mutate } = useFrappeGetDoc<BankTransactionRule>("Bank Transaction Rule", ruleID, undefined, {
+        revalidateOnMount: true
+    })
+
+    const { updateDoc, loading, error: updateError } = useFrappeUpdateDoc<BankTransactionRule>()
+
+    const onSubmit = (data: BankTransactionRule) => {
+        updateDoc("Bank Transaction Rule", ruleID, data)
+            .then(() => {
+                toast.success(_("Rule updated."))
+                mutate()
+                onClose()
+            })
+    }
+
+    return <>
+        <SettingsPanelHeader
+            actions={
+                <div className="flex items-center gap-2">
+                    <Button variant='outline' size='md' type='button' onClick={() => onClose()}>{_("Cancel")}</Button>
+                    <Button type='submit' form='rule-form' size='md' disabled={isValidating || loading}>
+                        {_("Save")}
+                    </Button>
+                </div>
+            }
+        >
+            <SettingsPanelTitle>
+                {rule?.rule_name}
+            </SettingsPanelTitle>
+            <SettingsPanelDescription className="sr-only">
+                {_("Edit this rule")}
+            </SettingsPanelDescription>
+        </SettingsPanelHeader>
+        <SettingsPanelContent className="px-0">
+            {isValidating && <div className="px-4 flex flex-col gap-4 h-full">
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-10 w-full" />
+            </div>}
+
+            {error && <div className="px-4 flex flex-col gap-4 h-full">
+                <ErrorBanner error={error} />
+            </div>}
+            {rule && <EditRuleForm rule={rule} onSubmit={onSubmit} error={updateError} />}
+        </SettingsPanelContent>
+    </>
+
+
+}
+
+const EditRuleForm = ({ rule, onSubmit, error }: { rule: BankTransactionRule, onSubmit: (data: BankTransactionRule) => void, error?: FrappeError | null }) => {
+
+    const form = useForm<BankTransactionRule>({
+        defaultValues: {
+            ...rule,
+        }
+    })
+
+    useHotkeys('meta+s', () => {
+        form.handleSubmit(onSubmit)()
+    }, {
+        enabled: true,
+        preventDefault: true,
+        enableOnFormTags: true
+    })
+
+    return (
+        <Form {...form}>
+            <form id='rule-form' onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col justify-between h-full overflow-y-auto px-2">
+                <div className="flex flex-col gap-4">
+                    {error && <ErrorBanner error={error} />}
+                    <RuleForm isEdit />
+                </div>
+            </form>
+        </Form>
+    )
+}
+
+export default EditRule

banking/src/components/features/BankReconciliation/Rules/RuleForm.tsx

@@ -0,0 +1,799 @@
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Dialog, DialogTitle, DialogContent, DialogHeader, DialogDescription } from "@/components/ui/dialog"
+import { FormField, FormItem, FormLabel, FormControl } from "@/components/ui/form"
+import { AccountFormField, CurrencyFormField, DataField, LinkFormField, PartyTypeFormField, SelectFormField, SmallTextField } from "@/components/ui/form-elements"
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { SelectItem } from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { H4, Paragraph } from "@/components/ui/typography"
+import { today } from "@/lib/date"
+import _ from "@/lib/translate"
+import { cn } from "@/lib/utils"
+import { BankTransactionRule } from "@/types/Accounts/BankTransactionRule"
+import { BankTransactionRuleAccounts } from "@/types/Accounts/BankTransactionRuleAccounts"
+import { FrappeConfig, FrappeContext } from "frappe-react-sdk"
+import { ArrowDownRight, ArrowDownUp, ArrowRightLeftIcon, ArrowUpRight, LandmarkIcon, Plus, PlusCircleIcon, ReceiptIcon, Settings, Trash2 } from "lucide-react"
+import { ChangeEvent, useCallback, useContext, useMemo, useRef, useState } from "react"
+import { useFieldArray, useFormContext, useWatch } from "react-hook-form"
+
+export const RuleForm = ({ isEdit = false }: { isEdit?: boolean }) => {
+
+    return <div className="flex flex-col gap-4">
+        <DataField
+            name='rule_name'
+            label={_("Rule Name")}
+            disabled={isEdit}
+            isRequired
+            inputProps={{
+                maxLength: 140,
+                disabled: isEdit,
+                placeholder: _("Bank Charges, Salary, etc."),
+                autoFocus: true,
+                className: "dark:disabled:bg-surface-gray-2"
+            }}
+            rules={{
+                required: _("Rule name is required")
+            }}
+        />
+
+        <CompanySelector />
+
+        <SmallTextField
+            name='rule_description'
+            label={_("Rule Description")}
+            inputProps={{
+                placeholder: _("Any debit transaction with the keyword 'Bank Fee'.")
+            }}
+        />
+
+        <TransactionTypeSelector />
+
+        <div className="grid grid-cols-2 gap-2 pt-1">
+            <CurrencyFormField
+                name='min_amount'
+                label={_("Minimum Amount")}
+            />
+
+            <CurrencyFormField
+                name='max_amount'
+                label={_("Maximum Amount")}
+            />
+        </div>
+
+        <DescriptionRules />
+
+        <Separator />
+
+        <RuleAction />
+    </div>
+}
+
+const CompanySelector = () => {
+
+    const { setValue } = useFormContext<BankTransactionRule>()
+
+    return <LinkFormField
+        name='company'
+        label={_("Company")}
+        doctype="Company"
+        isRequired
+        rules={{
+            required: _("Company is required"),
+            onChange: () => {
+                setValue('account', '')
+            }
+        }}
+    />
+
+}
+
+/** Component to render a radio group as a toggle group with options for All, Withdrawal, Deposit */
+const TransactionTypeSelector = () => {
+
+    const { control } = useFormContext<BankTransactionRule>()
+
+    return (
+        <FormField
+            control={control}
+            name='transaction_type'
+            render={({ field }) => (
+                <FormItem className="space-y-1">
+                    <FormLabel className="text-sm font-medium">
+                        {_("Transaction Type")}<span className="text-ink-red-3">*</span>
+                    </FormLabel>
+                    <FormControl>
+                        <RadioGroup
+                            onValueChange={field.onChange}
+                            value={field.value}
+                            className="grid grid-cols-3 gap-2 w-full"
+                        >
+                            <FormItem className="flex items-center">
+                                <FormControl>
+                                    <RadioGroupItem
+                                        value="Any"
+                                        className="peer sr-only hidden"
+                                    />
+                                </FormControl>
+                                <FormLabel
+                                    className={cn(
+                                        "w-full flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-md border cursor-pointer transition-all hover:bg-surface-gray-1 hover:text-ink-gray-8",
+                                        "peer-data-[state=checked]:bg-surface-gray-7 peer-data-[state=checked]:text-ink-white peer-data-[state=checked]:border-outline-gray-5 peer-data-[state=checked]:hover:bg-surface-gray-7 peer-data-[state=checked]:hover:text-ink-white"
+                                    )}
+                                >
+                                    <ArrowDownUp className="w-5 h-5" />
+                                    {_("All")}
+                                </FormLabel>
+                            </FormItem>
+                            <FormItem className="flex items-center">
+                                <FormControl>
+                                    <RadioGroupItem
+                                        value="Withdrawal"
+                                        className="peer sr-only hidden"
+                                    />
+                                </FormControl>
+                                <FormLabel
+                                    className={cn(
+                                        "w-full flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-md border cursor-pointer transition-all hover:bg-surface-gray-1 hover:text-ink-gray-8",
+                                        "peer-data-[state=checked]:bg-surface-red-5 peer-data-[state=checked]:text-white peer-data-[state=checked]:border-bg-surface-red-5 peer-data-[state=checked]:hover:bg-surface-red-5 peer-data-[state=checked]:hover:text-white"
+                                    )}
+                                >
+                                    <ArrowUpRight className="w-5 h-5 peer-data-[state=checked]:text-ink-red-3" />
+                                    {_("Withdrawal")}
+                                </FormLabel>
+                            </FormItem>
+                            <FormItem className="flex items-center">
+                                <FormControl>
+                                    <RadioGroupItem
+                                        value="Deposit"
+                                        className="peer sr-only hidden"
+                                    />
+                                </FormControl>
+                                <FormLabel
+                                    className={cn(
+                                        "w-full flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-md border cursor-pointer transition-all hover:bg-surface-gray-1 hover:text-ink-gray-8",
+                                        "peer-data-[state=checked]:bg-surface-green-5 peer-data-[state=checked]:text-white peer-data-[state=checked]:border-surface-green-5 peer-data-[state=checked]:hover:bg-surface-green-5 peer-data-[state=checked]:hover:text-white"
+                                    )}
+                                >
+                                    <ArrowDownRight className="w-5 h-5 peer-data-[state=checked]:text-white" />
+                                    {_("Deposit")}
+                                </FormLabel>
+                            </FormItem>
+                        </RadioGroup>
+                    </FormControl>
+                </FormItem>
+            )}
+        />
+    )
+}
+
+const DescriptionRules = () => {
+
+    const { control } = useFormContext<BankTransactionRule>()
+
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: "description_rules"
+    })
+
+    const addRow = () => {
+        // @ts-expect-error - we don't need all fields here
+        append({ check: "Contains" })
+    }
+
+    return (
+        <div className="flex flex-col gap-2 pt-1">
+            <span className="text-sm font-medium">{_("Rules to match against the transaction description")} <span className="text-ink-red-3">*</span></span>
+            {fields.map((field, index) => (
+                <div key={field.id} className="flex w-full items-center gap-2">
+                    <div className="min-w-36">
+                        <SelectFormField
+                            label={_("Type of check")}
+                            hideLabel
+                            name={`description_rules.${index}.check`}
+                            rules={{
+                                required: _("This is required")
+                            }}>
+                            <SelectItem value="Contains">{_("Contains")}</SelectItem>
+                            <SelectItem value="Starts With">{_("Starts with")}</SelectItem>
+                            <SelectItem value="Ends With">{_("Ends with")}</SelectItem>
+                            <SelectItem value="Regex">{_("Regex")}</SelectItem>
+                        </SelectFormField>
+                    </div>
+                    <div className="w-full">
+                        <DataField
+                            name={`description_rules.${index}.value`}
+                            label={_("Value")}
+                            hideLabel
+                            inputProps={{
+                                placeholder: _("Bank Fee, Salary, etc."),
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <Button variant="ghost" theme='red' type='button' isIconButton onClick={() => remove(index)} disabled={fields.length === 1}>
+                            <Trash2 />
+                        </Button>
+                    </div>
+                </div>
+            ))}
+
+            <div>
+                <Button variant="outline" type='button' onClick={addRow}>
+                    <PlusCircleIcon />
+                    {_("Add Rule")}
+                </Button>
+            </div>
+
+        </div>
+    )
+}
+
+const RuleAction = () => {
+
+    const { control } = useFormContext<BankTransactionRule>()
+
+    const classify_as = useWatch({ control, name: "classify_as" })
+    const party_type = useWatch({ control, name: "party_type" })
+    const bank_entry_type = useWatch({ control, name: "bank_entry_type" })
+
+    const accountType = useMemo(() => {
+        if (classify_as === "Payment Entry") {
+            return party_type === "Supplier" ? ["Payable"] : ["Receivable"]
+        }
+
+        if (classify_as === "Transfer") {
+            return ["Bank", "Cash", "Temporary"]
+        }
+
+        return undefined
+
+    }, [classify_as, party_type])
+
+    return (
+        <div className="flex flex-col gap-4">
+            <H4 className="text-base text-ink-gray-7">{_("If rule matches, then:")}</H4>
+
+            <SelectFormField
+                name='classify_as'
+                isRequired
+                label={_("Suggest creating a")}
+                formDescription={_("This will just suggest creating a new entry, and will not automatically create it.")}
+                rules={{
+                    required: _("This is required")
+                }}
+            >
+                <SelectItem value="Bank Entry"><LandmarkIcon /> {_("Bank Entry")}</SelectItem>
+                <SelectItem value="Payment Entry"><ReceiptIcon /> {_("Payment Entry")}</SelectItem>
+                <SelectItem value="Transfer"><ArrowRightLeftIcon /> {_("Transfer")}</SelectItem>
+            </SelectFormField>
+
+            {classify_as === "Bank Entry" && (<SelectFormField
+                name='bank_entry_type'
+                isRequired
+                label={_("Create Bank Entry against")}
+                rules={{
+                    required: _("This is required")
+                }}
+            >
+                <SelectItem value="Single Account">{_("Single Account")}</SelectItem>
+                <SelectItem value="Multiple Accounts">{_("Multiple Accounts (Journal Template)")}</SelectItem>
+            </SelectFormField>)}
+
+
+            {classify_as === "Payment Entry" && (
+                <div className='grid grid-cols-4 gap-4'>
+                    <div className="col-span-1">
+                        <PartyTypeFormField
+                            name='party_type'
+                            label={_("Party Type")}
+                            isRequired
+                            inputProps={{
+                                triggerProps: {
+                                    className: 'w-full'
+                                },
+                            }}
+                            rules={{
+                                required: "Party Type is required"
+                            }}
+                        />
+                    </div>
+                    <div className="col-span-3">
+                        <PartyField />
+                    </div>
+                </div>
+            )}
+
+            {(((bank_entry_type === "Single Account" || !bank_entry_type) && classify_as === "Bank Entry") || classify_as !== "Bank Entry") && (<AccountFormField
+                name='account'
+                label={_("Account")}
+                isRequired
+                rules={{
+                    required: _("Account is required")
+                }}
+                account_type={accountType}
+            />)}
+
+            {bank_entry_type === "Multiple Accounts" && classify_as === "Bank Entry" && <MultipleAccountsSelection />}
+        </div>
+    )
+}
+
+const PartyField = () => {
+
+    const { control, setValue } = useFormContext<BankTransactionRule>()
+
+    const party_type = useWatch({
+        control,
+        name: `party_type`
+    })
+
+    const { call } = useContext(FrappeContext) as FrappeConfig
+
+    const company = useWatch({ control, name: 'company' })
+
+    const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+        // Fetch the party and account
+        if (event.target.value) {
+            call.get('erpnext.accounts.doctype.payment_entry.payment_entry.get_party_details', {
+                company: company,
+                party_type: party_type,
+                party: event.target.value,
+                date: today()
+            }).then((res) => {
+                setValue('account', res.message.party_account)
+            })
+        } else {
+            // Clear the account
+            setValue('account', '')
+        }
+
+    }
+
+    if (!party_type) {
+        return <DataField
+            name={`party`}
+            label={_("Party")}
+            isRequired
+            inputProps={{
+                disabled: true,
+            }}
+        />
+    }
+
+    return <LinkFormField
+        name={`party`}
+        label={_("Party")}
+        rules={{
+            onChange
+        }}
+        doctype={party_type}
+
+    />
+}
+
+const MultipleAccountsSelection = () => {
+
+
+    const { control } = useFormContext<BankTransactionRule>()
+
+    const accounts = useWatch({
+        control,
+        name: 'accounts'
+    }) ?? []
+
+    const [isConfigureAccountsModalOpen, setIsConfigureAccountsModalOpen] = useState(false)
+
+
+
+    return <div className="flex flex-col gap-2">
+        <div className="flex justify-between gap-2">
+            <Label>{_("Journal Template Accounts")}<span className="text-ink-red-3">*</span></Label>
+            <Button variant="outline" type="button" onClick={() => setIsConfigureAccountsModalOpen(true)}><Settings /> {_("Configure Accounts")}</Button>
+        </div>
+
+
+        <Table>
+            <TableHeader>
+                <TableRow>
+                    <TableHead>{_("Account")}</TableHead>
+                    <TableHead className="text-end">{_("Debit")}</TableHead>
+                    <TableHead className="text-end">{_("Credit")}</TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {accounts.length === 0 && (
+                    <TableRow>
+                        <TableCell colSpan={3} className="text-center">
+                            <div className="py-2 flex flex-col gap-2 items-center">
+                                <span>{_("No accounts configured")}</span>
+                                <Button variant="subtle" type="button" onClick={() => setIsConfigureAccountsModalOpen(true)}>{_("Configure Accounts")}</Button>
+                            </div>
+                        </TableCell>
+                    </TableRow>
+                )}
+                {accounts.map((account, index) => (
+                    <TableRow key={index}>
+                        <TableCell>{account.account}</TableCell>
+                        {index === accounts.length - 1 ? <TableCell className="text-end bg-surface-gray-1" colSpan={2}>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <span className="text-ink-gray-5">{_("This is auto computed to balance the journal entry.")}</span>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                    {_("Based on the above entries, the balance amount (debit or credit) will be set for the last row to balance the journal entry.")}
+                                </TooltipContent>
+                            </Tooltip>
+                        </TableCell> : <>
+                            <TableCell className="font-numeric text-end"><AmountFormulaRenderer value={account.debit} /></TableCell>
+                            <TableCell className="font-numeric text-end"><AmountFormulaRenderer value={account.credit} /></TableCell>
+                        </>}
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+
+        <ConfigureAccountsModal open={isConfigureAccountsModalOpen} onClose={() => setIsConfigureAccountsModalOpen(false)} />
+    </div>
+}
+
+const AmountFormulaRenderer = ({ value }: { value?: string }) => {
+
+    // If it's a string and cannot be a number, then show it as a formula
+
+    if (isNaN(Number(value))) {
+
+        let calculatedValue = "";
+
+        try {
+            calculatedValue = window.eval(`const transaction_amount = 200; ${value}`);
+        } catch (error: unknown) {
+            console.error(error);
+            calculatedValue = "Error";
+        }
+
+        const isComputationValid = !isNaN(Number(calculatedValue)) && calculatedValue !== undefined && calculatedValue !== null;
+
+        return <Tooltip>
+            <TooltipTrigger asChild>
+                <span className={cn("font-numeric text-end tabular-nums underline underline-offset-4", isComputationValid ? "" : "text-ink-red-3")}>{value}</span>
+            </TooltipTrigger>
+            <TooltipContent className={isComputationValid ? "" : "bg-surface-red-5"} arrowClassName={isComputationValid ? "" : "bg-surface-red-5 fill-surface-red-5"}>
+                <p className="text-sm">
+                    {isComputationValid ? _("This is a formula based value.") : _("This is not a valid formula. Check the variable used in the formula.")}
+                    <br /><br />
+                    {_("Example: If the transaction amount is 200, then this will be calculated as {} = {}", [value ?? "", calculatedValue])}
+                </p>
+            </TooltipContent>
+        </Tooltip>
+    }
+
+    return <span className="font-numeric text-end tabular-nums">{value}</span>
+}
+
+const ConfigureAccountsModal = ({ open, onClose }: { open: boolean, onClose: () => void }) => {
+
+
+    return <Dialog
+        open={open}
+        onOpenChange={onClose}
+    >
+        <DialogContent className='min-w-[95vw]'>
+            <ConfigureAccountsModalContent />
+        </DialogContent>
+    </Dialog>
+}
+
+const ConfigureAccountsModalContent = () => {
+
+    const { control, getValues, setValue } = useFormContext<BankTransactionRule>()
+
+    const { call } = useContext(FrappeContext) as FrappeConfig
+
+    // const costCenterMapRef = useRef<Record<string, string>>({})
+
+    const partyMapRef = useRef<Record<string, string>>({})
+
+    const onPartyChange = (value: string, index: number) => {
+        // Get the account for the party type
+        if (value) {
+            if (partyMapRef.current[value]) {
+                setValue(`accounts.${index}.account`, partyMapRef.current[value])
+            } else {
+                call.get('erpnext.accounts.party.get_party_account', {
+                    party: value,
+                    party_type: getValues(`accounts.${index}.party_type`),
+                    company: company
+                }).then((result: { message: string }) => {
+                    setValue(`accounts.${index}.account`, result.message)
+                    partyMapRef.current[value] = result.message
+                })
+            }
+        } else {
+            setValue(`accounts.${index}.account`, '')
+        }
+    }
+
+    const transaction_type = useWatch({
+        name: 'transaction_type',
+        control,
+    })
+
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: 'accounts'
+    })
+
+
+    const [selectedRows, setSelectedRows] = useState<number[]>([])
+
+    const onSelectRow = useCallback((index: number) => {
+        setSelectedRows(prev => {
+            if (prev.includes(index)) {
+                return prev.filter(i => i !== index)
+            }
+            return [...prev, index]
+        })
+    }, [])
+
+    const onSelectAll = useCallback(() => {
+        setSelectedRows(prev => {
+            if (prev.length === fields.length) {
+                return []
+            }
+            return [...fields.map((_, index) => index)]
+        })
+    }, [fields])
+
+    const onAdd = () => {
+        append({
+            party_type: '',
+            party: '',
+            account: '',
+            debit: '',
+            credit: '',
+            user_remark: ''
+        } as BankTransactionRuleAccounts, {
+            focusName: `accounts.${fields.length}.account`
+        })
+    }
+
+    const onRemove = useCallback(() => {
+        remove(selectedRows)
+        setSelectedRows([])
+    }, [remove, selectedRows])
+
+    const isWithdrawal = transaction_type === 'Withdrawal'
+
+    const company = useWatch({
+        name: 'company',
+        control,
+    })
+
+    return <>
+        <DialogHeader>
+            <DialogTitle>{_("Configure Accounts for Bank Entry")}</DialogTitle>
+            <DialogDescription>{_("Add all accounts that you want to split the transaction into.")}</DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-2">
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead><Checkbox
+                            disabled={fields.length === 0}
+                            // Make this accessible to screen readers
+                            aria-label={_("Select all")}
+                            checked={selectedRows.length > 0 && selectedRows.length === fields.length}
+                            onCheckedChange={onSelectAll} /></TableHead>
+                        <TableHead>{_("Party")}</TableHead>
+                        <TableHead>{_("Account")} <span className="text-ink-red-3">*</span></TableHead>
+                        {/* <TableHead>{_("Cost Center")}</TableHead> */}
+                        <TableHead>{_("Remarks")}</TableHead>
+                        <TableHead className="text-end">{_("Debit")}</TableHead>
+                        <TableHead className="text-end">{_("Credit")}</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    <TableRow className="bg-surface-gray-1 cursor-not-allowed" title={_("This is the row for the bank account. It will be auto populated based on the bank transaction.")}>
+                        <TableCell>
+                            <Checkbox disabled />
+                        </TableCell>
+                        <TableCell className="align-top">
+                        </TableCell>
+                        <TableCell className="align-top text-ink-gray-5">
+                            <span className="px-2">
+                                Bank GL Account
+                            </span>
+                        </TableCell>
+                        <TableCell className="align-top">
+                        </TableCell>
+
+                        <TableCell className={"align-top text-end"}>
+                            <span className="text-ink-gray-5 text-sm">
+                                {transaction_type === "Withdrawal" || transaction_type === "Any" ? _("Will be auto-populated") : ""}
+                            </span>
+                        </TableCell>
+                        <TableCell className={"text-end align-top"}>
+                            <span className="text-ink-gray-5 text-sm">
+                                {transaction_type === "Deposit" || transaction_type === "Any" ? _("Will be auto-populated") : ""}
+                            </span>
+                        </TableCell>
+                    </TableRow>
+                    {fields.map((field, index) => (
+                        <TableRow key={field.id}>
+                            <TableCell>
+                                <Checkbox
+                                    checked={selectedRows.includes(index)}
+                                    onCheckedChange={() => onSelectRow(index)}
+                                    // Make this accessible to screen readers
+                                    aria-label={_("Select row {0}", [String(index + 1)])}
+                                />
+                            </TableCell>
+
+                            <TableCell className="align-top">
+                                <div className="flex">
+                                    <PartyTypeFormField
+                                        name={`accounts.${index}.party_type`}
+                                        label={_("Party Type")}
+                                        isRequired
+                                        hideLabel
+                                        inputProps={{
+                                            type: isWithdrawal ? 'Payable' : 'Receivable',
+                                            triggerProps: {
+                                                className: 'rounded-e-none',
+                                                tabIndex: -1
+                                            },
+                                        }} />
+                                    <PartyRowField index={index} onChange={onPartyChange} />
+                                </div>
+
+                            </TableCell>
+                            <TableCell className="align-top">
+                                <AccountFormField
+                                    name={`accounts.${index}.account`}
+                                    label={_("Account")}
+                                    rules={{
+                                        required: _("Account is required"),
+                                        // onChange: (event) => {
+                                        //     onAccountChange(event.target.value, index)
+                                        // }
+                                    }}
+                                    buttonClassName="min-w-64"
+                                    isRequired
+                                    hideLabel
+                                />
+                            </TableCell>
+                            {/* <TableCell className="align-top">
+                                <LinkFormField
+                                    doctype="Cost Center"
+                                    name={`accounts.${index}.cost_center`}
+                                    label={_("Cost Center")}
+                                    filters={[["company", "=", company], ["is_group", "=", 0], ["disabled", "=", 0]]}
+                                    buttonClassName="min-w-48"
+                                    readOnly={index === 0}
+                                    hideLabel
+                                />
+                            </TableCell> */}
+                            <TableCell className="align-top">
+                                <DataField
+                                    name={`accounts.${index}.user_remark`}
+                                    label={_("Remarks")}
+                                    inputProps={{
+                                        placeholder: _("e.g. Bank Charges"),
+                                        className: 'min-w-64',
+                                    }}
+                                    hideLabel
+                                />
+                            </TableCell>
+                            <TableCell
+                                className={cn("text-end align-top", index === fields.length - 1 ? "cursor-not-allowed" : "")}
+                                title={index === fields.length - 1 ? _("This is the last row. It will be auto populated based on the bank transaction.") : ""}>
+                                <DataField
+                                    name={`accounts.${index}.debit`}
+                                    label={_("Debit")}
+                                    disabled={index === fields.length - 1}
+                                    inputProps={{
+                                        className: 'text-end',
+                                        placeholder: _("0.00"),
+                                        disabled: index === fields.length - 1
+                                    }}
+                                    hideLabel
+                                />
+                            </TableCell>
+                            <TableCell
+                                className={cn("text-end align-top", index === fields.length - 1 ? "cursor-not-allowed" : "")}
+                                title={index === fields.length - 1 ? _("This is the last row. It will be auto populated based on the bank transaction.") : ""}>
+                                <DataField
+                                    name={`accounts.${index}.credit`}
+                                    label={_("Credit")}
+                                    disabled={index === fields.length - 1}
+                                    inputProps={{
+                                        className: 'text-end',
+                                        placeholder: _("0.00"),
+                                        disabled: index === fields.length - 1
+                                    }}
+                                    hideLabel
+                                />
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+            <div className="flex justify-between gap-2">
+                <div className="flex gap-2 justify-end">
+                    <div>
+                        <Button size='sm' type='button' variant={'outline'} onClick={onAdd}><Plus /> {_("Add Row")}</Button>
+                    </div>
+                    {selectedRows.length > 0 && <div>
+                        <Button size='sm' type='button' theme="red" onClick={onRemove}><Trash2 /> {_("Remove")}</Button>
+                    </div>}
+                </div>
+            </div>
+            <div className="py-4">
+                <Separator />
+            </div>
+
+            <div className="flex flex-col gap-2">
+                <H4 className="text-base text-ink-gray-7">{_("Help")}</H4>
+
+                <Paragraph className="text-p-sm">{(_("You can set up the rule to split the transaction across multiple accounts."))}
+                    <br />{_("You can also add credit or debit values to pre-fill - these support both static values (like 200) or formulas (like transaction_amount * 0.25).")}
+                    <br />
+                    <br />
+                    <span className="font-medium">{_("Example")}:</span>
+                    <br />
+                    <span className="font-numeric text-sm">
+                        transaction_amount * 0.25
+                    </span>
+                    <br />
+                    <span>
+                        {_("In this case, the amount will be calculated as 25% of the transaction amount. If the transaction amount is 200, then this will be calculated as 200 * 0.25 = 50.")}
+                    </span>
+                </Paragraph>
+            </div>
+
+
+        </div>
+    </>
+}
+
+
+const PartyRowField = ({ index, onChange }: { index: number, onChange: (value: string, index: number) => void }) => {
+
+    const { control } = useFormContext<BankTransactionRule>()
+
+    const party_type = useWatch({
+        control,
+        name: `accounts.${index}.party_type`
+    })
+
+    if (!party_type) {
+        return <DataField
+            name={`accounts.${index}.party`}
+            label={_("Party")}
+            isRequired
+            inputProps={{
+                disabled: true,
+                className: 'rounded-s-none border-s-0 min-w-64'
+            }}
+            hideLabel
+        />
+    }
+
+    return <LinkFormField
+        name={`accounts.${index}.party`}
+        label={_("Party")}
+        rules={{
+            onChange: (event) => {
+                onChange(event.target.value, index)
+            },
+        }}
+        hideLabel
+        buttonClassName="rounded-s-none border-s-0 min-w-64"
+        doctype={party_type}
+
+    />
+}

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

@@ -0,0 +1,73 @@
+import { useMemo } from 'react'
+import { ArrowDownRight, ArrowUpRight, Calendar } from 'lucide-react'
+import { formatCurrency } from '@/lib/numbers'
+import { formatDate } from '@/lib/date'
+import { UnreconciledTransaction, useGetBankAccounts } from './utils'
+import { getCompanyCurrency } from '@/lib/company'
+import { Card, CardContent } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+import _ from '@/lib/translate'
+import BankLogo from '@/components/common/BankLogo'
+
+type Props = {
+    transaction: UnreconciledTransaction,
+    showAccount?: boolean,
+    account?: string
+}
+
+const SelectedTransactionDetails = ({ transaction, showAccount = false, account }: Props) => {
+
+    const isWithdrawal = transaction.withdrawal && transaction.withdrawal > 0
+
+    const { banks } = useGetBankAccounts()
+
+    const bank = useMemo(() => {
+        if (transaction.bank_account) {
+            return banks?.find((bank) => bank.name === transaction.bank_account)
+        }
+        return null
+    }, [transaction.bank_account, banks])
+
+    const amount = transaction.withdrawal ? transaction.withdrawal : transaction.deposit
+
+    const currency = transaction.currency || getCompanyCurrency(transaction.company ?? '')
+
+    return (
+        <Card className='py-4'>
+            <CardContent className='px-4'>
+                <div className='flex flex-col gap-2'>
+                    <div className='flex justify-between'>
+                        <div className='flex flex-col gap-2'>
+                            <div className='flex flex-col gap-1'>
+                                <BankLogo bank={bank} iconSize='30px' imageClassName='h-10 max-w-20' />
+                                <span className='font-medium text-sm'>{transaction.bank_account}</span>
+                            </div>
+                            <div className='flex items-center gap-1'>
+                                <Calendar size='16px' />
+                                <span className='text-sm'>{formatDate(transaction.date, 'Do MMM YYYY')}</span>
+                            </div>
+                        </div>
+                        <div className='flex flex-col gap-1'>
+                            <div className={cn('flex items-center gap-1 text-end px-0 justify-end py-1 rounded-sm',
+                                isWithdrawal ? 'text-ink-red-3' : 'text-ink-green-3'
+                            )}>
+                                {isWithdrawal ? <ArrowUpRight className="w-5 h-5 text-ink-red-3" /> : <ArrowDownRight className="w-5 h-5 text-ink-green-3" />}
+                                <span className='text-sm font-semibold uppercase'>{isWithdrawal ? _('Spent') : _('Received')}</span>
+                            </div>
+                            <span className='font-semibold font-numeric text-lg text-end pe-0.5'>{formatCurrency(amount, currency)}</span>
+                            {transaction.unallocated_amount && transaction.unallocated_amount !== amount ? <span className='text-ink-gray-5'>{_("Unallocated")}: {formatCurrency(transaction.unallocated_amount)}</span> : null}
+                        </div>
+                    </div>
+                    <div className='flex flex-col gap-1'>
+                        <span className='text-sm'>{transaction.description}</span>
+                        {transaction.reference_number ? <span className='text-sm text-ink-gray-5'>{_("Ref")}: {transaction.reference_number}</span> : null}
+                        {showAccount && account ? <span className='text-sm text-ink-gray-5'>{_("GL Account")}: {account}</span> : null}
+                    </div>
+
+                </div>
+            </CardContent >
+        </Card >
+    )
+}
+
+export default SelectedTransactionDetails

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

@@ -0,0 +1,47 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import _ from '@/lib/translate'
+import { useAtomValue } from 'jotai'
+import { bankRecSelectedTransactionAtom, selectedBankAccountAtom } from './bankRecAtoms'
+import { formatDate } from '@/lib/date'
+import { formatCurrency } from '@/lib/numbers'
+import { ArrowDownRight, ArrowUpRight } from 'lucide-react'
+
+const SelectedTransactionsTable = () => {
+
+    const selectedBankAccount = useAtomValue(selectedBankAccountAtom)
+
+    const transactions = useAtomValue(bankRecSelectedTransactionAtom(selectedBankAccount?.name ?? ''))
+    return (
+        <Table>
+            <TableHeader>
+                <TableRow>
+                    <TableHead>
+                        {_("Date")}
+                    </TableHead>
+                    <TableHead>
+                        {_("Description")}
+                    </TableHead>
+                    <TableHead className="text-end">
+                        {_("Amount")}
+                    </TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {transactions.map((transaction) => (
+                    <TableRow key={transaction.name}>
+                        <TableCell>{formatDate(transaction.date)}</TableCell>
+                        <TableCell className="max-w-96 text-ellipsis overflow-hidden" title={transaction.description}>{transaction.description}</TableCell>
+                        <TableCell className="text-end flex items-center justify-end gap-1">
+                            {transaction.withdrawal && transaction.withdrawal > 0 ? <ArrowUpRight className="w-4 h-4 text-ink-red-3" /> : <ArrowDownRight className="w-4 h-4 text-ink-green-3" />}
+                            <span className="font-numeric font-medium">
+                                {formatCurrency(transaction.unallocated_amount, transaction.currency ?? '')}
+                            </span>
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    )
+}
+
+export default SelectedTransactionsTable

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

@@ -0,0 +1,555 @@
+import { useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { bankRecSelectedTransactionAtom, bankRecTransferModalAtom, bankRecUnreconcileModalAtom, SelectedBank, selectedBankAccountAtom } from './bankRecAtoms'
+import { Dialog, DialogContent, DialogHeader, DialogFooter, DialogClose, DialogTitle, DialogDescription } from '@/components/ui/dialog'
+import _ from '@/lib/translate'
+import { UnreconciledTransaction, useGetBankAccounts, useGetRuleForTransaction, useRefreshUnreconciledTransactions, useUpdateActionLog } from './utils'
+import { Button } from '@/components/ui/button'
+import SelectedTransactionDetails from './SelectedTransactionDetails'
+import { PaymentEntry } from '@/types/Accounts/PaymentEntry'
+import { useForm, useFormContext, useWatch } from 'react-hook-form'
+import { FrappeConfig, FrappeContext, useFrappeGetCall, useFrappePostCall } from 'frappe-react-sdk'
+import { toast } from 'sonner'
+import ErrorBanner from '@/components/ui/error-banner'
+import { H4 } from '@/components/ui/typography'
+import { cn } from '@/lib/utils'
+import { ArrowRight, Banknote, BadgeCheck, Calendar, ArrowUpRight, ArrowDownRight, CheckIcon, CheckCircle, ArrowLeft } from 'lucide-react'
+import { Separator } from '@/components/ui/separator'
+import { Form } from '@/components/ui/form'
+import { AccountFormField, DataField, DateField, SmallTextField } from '@/components/ui/form-elements'
+import SelectedTransactionsTable from './SelectedTransactionsTable'
+import { useCurrentCompany } from '@/hooks/useCurrentCompany'
+import { formatDate } from '@/lib/date'
+import { useContext, useMemo, useState } from 'react'
+import { formatCurrency } from '@/lib/numbers'
+import { Label } from '@/components/ui/label'
+import { FileDropzone } from '@/components/ui/file-dropzone'
+import FileUploadBanner from '@/components/common/FileUploadBanner'
+import { BankTransaction } from '@/types/Accounts/BankTransaction'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { useDirection } from '@/components/ui/direction'
+import BankLogo from '@/components/common/BankLogo'
+
+const TransferModal = () => {
+
+    const [isOpen, setIsOpen] = useAtom(bankRecTransferModalAtom)
+
+    return (
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <DialogContent className='min-w-7xl'>
+                <DialogHeader>
+                    <DialogTitle>{_("Transfer")}</DialogTitle>
+                    <DialogDescription>
+                        {_("Record an internal transfer to another bank/credit card/cash account.")}
+                    </DialogDescription>
+                </DialogHeader>
+                <TransferModalContent />
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+const TransferModalContent = () => {
+
+    const selectedBankAccount = useAtomValue(selectedBankAccountAtom)
+
+    const selectedTransaction = useAtomValue(bankRecSelectedTransactionAtom(selectedBankAccount?.name ?? ''))
+
+    if (!selectedTransaction || !selectedBankAccount || selectedTransaction.length === 0) {
+        return <div className='p-4'>
+            <span className='text-center'>{_("No transaction selected")}</span>
+        </div>
+    }
+
+    if (selectedTransaction.length === 1) {
+        return <InternalTransferForm
+            selectedBankAccount={selectedBankAccount}
+            selectedTransaction={selectedTransaction[0]} />
+    }
+
+    return <BulkInternalTransferForm transactions={selectedTransaction} />
+
+}
+
+const BulkInternalTransferForm = ({ transactions }: { transactions: UnreconciledTransaction[] }) => {
+
+    const form = useForm<{
+        bank_account: string
+    }>()
+
+    const setIsOpen = useSetAtom(bankRecTransferModalAtom)
+
+    const { call: createPaymentEntry, loading, error } = useFrappePostCall<{ message: { transaction: BankTransaction, payment_entry: PaymentEntry }[] }>('erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.create_bulk_internal_transfer')
+
+    const onReconcile = useRefreshUnreconciledTransactions()
+    const addToActionLog = useUpdateActionLog()
+
+    const onSubmit = (data: { bank_account: string }) => {
+
+        createPaymentEntry({
+            bank_transaction_names: transactions.map((transaction) => transaction.name),
+            bank_account: data.bank_account
+        }).then(({ message }) => {
+            addToActionLog({
+                type: 'transfer',
+                timestamp: (new Date()).getTime(),
+                isBulk: true,
+                items: message.map((item) => ({
+                    bankTransaction: item.transaction,
+                    voucher: {
+                        reference_doctype: "Payment Entry",
+                        reference_name: item.payment_entry.name,
+                        posting_date: item.payment_entry.posting_date,
+                        doc: item.payment_entry,
+                    }
+                })),
+                bulkCommonData: {
+                    bank_account: data.bank_account,
+                }
+            })
+            toast.success(_("Transfer Recorded"), {
+                duration: 4000,
+                closeButton: true,
+            })
+            onReconcile(transactions[transactions.length - 1])
+            setIsOpen(false)
+        })
+
+    }
+
+    const onAccountChange = (account: string) => {
+        form.setValue('bank_account', account)
+    }
+
+    const selectedAccount = useWatch({ control: form.control, name: 'bank_account' })
+
+    const currentCompany = useCurrentCompany()
+
+    const company = transactions && transactions.length > 0 ? transactions[0].company : (currentCompany ?? '')
+
+    console.log("This is here", transactions)
+
+    return <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className='flex flex-col gap-4'>
+
+                {error && <ErrorBanner error={error} />}
+
+                <SelectedTransactionsTable />
+
+                <BankOrCashPicker company={company} bankAccount={transactions[0]?.bank_account ?? ''} onAccountChange={onAccountChange} selectedAccount={selectedAccount} />
+
+                <DialogFooter>
+                    <DialogClose asChild>
+                        <Button size='md' variant={'outline'} disabled={loading}>{_("Cancel")}</Button>
+                    </DialogClose>
+                    <Button size='md' type='submit' disabled={loading}>{_("Transfer")}</Button>
+                </DialogFooter>
+            </div>
+        </form>
+
+    </Form>
+}
+
+interface InternalTransferFormFields extends PaymentEntry {
+    mirror_transaction_name?: string
+}
+
+const InternalTransferForm = ({ selectedBankAccount, selectedTransaction }: { selectedBankAccount: SelectedBank, selectedTransaction: UnreconciledTransaction }) => {
+
+
+    const setIsOpen = useSetAtom(bankRecTransferModalAtom)
+
+    const onClose = () => {
+        setIsOpen(false)
+    }
+
+    const { data: rule } = useGetRuleForTransaction(selectedTransaction)
+
+    const isWithdrawal = (selectedTransaction.withdrawal && selectedTransaction.withdrawal > 0) ? true : false
+
+    const form = useForm<InternalTransferFormFields>({
+        defaultValues: {
+            payment_type: 'Internal Transfer',
+            company: selectedTransaction?.company,
+            // If the transaction is a withdrawal, set the paid from to the selected bank account
+            paid_from: isWithdrawal ? selectedBankAccount.account : (rule?.account ?? ''),
+            // If the transaction is a deposit, set the paid to to the selected bank account
+            paid_to: !isWithdrawal ? selectedBankAccount.account : (rule?.account ?? ''),
+            // Set the amount to the amount of the selected transaction
+            paid_amount: selectedTransaction.unallocated_amount,
+            received_amount: selectedTransaction.unallocated_amount,
+            reference_date: selectedTransaction.date,
+            posting_date: selectedTransaction.date,
+            reference_no: (selectedTransaction.reference_number || selectedTransaction.description || '').slice(0, 140),
+        }
+    })
+
+    const onReconcile = useRefreshUnreconciledTransactions()
+
+    const { call: createPaymentEntry, loading, error, isCompleted } = useFrappePostCall<{ message: { transaction: BankTransaction, payment_entry: PaymentEntry } }>('erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.create_internal_transfer')
+
+    const setBankRecUnreconcileModalAtom = useSetAtom(bankRecUnreconcileModalAtom)
+    const addToActionLog = useUpdateActionLog()
+
+    const { file: frappeFile } = useContext(FrappeContext) as FrappeConfig
+
+    const [isUploading, setIsUploading] = useState(false)
+    const [uploadProgress, setUploadProgress] = useState(0)
+
+    const [files, setFiles] = useState<File[]>([])
+
+    const onSubmit = (data: InternalTransferFormFields) => {
+
+        createPaymentEntry({
+            bank_transaction_name: selectedTransaction.name,
+            ...data,
+            custom_remarks: data.remarks ? true : false,
+            // Pass this to reconcile both at the same time
+            mirror_transaction_name: data.mirror_transaction_name
+        }).then(async ({ message }) => {
+            addToActionLog({
+                type: 'transfer',
+                timestamp: (new Date()).getTime(),
+                isBulk: false,
+                items: [
+                    {
+                        bankTransaction: message.transaction,
+                        voucher: {
+                            reference_doctype: "Payment Entry",
+                            reference_name: message.payment_entry.name,
+                            reference_no: message.payment_entry.reference_no,
+                            reference_date: message.payment_entry.reference_date,
+                            posting_date: message.payment_entry.posting_date,
+                            doc: message.payment_entry,
+                        }
+                    }
+                ]
+            })
+            toast.success(_("Transfer Recorded"), {
+                duration: 4000,
+                closeButton: true,
+                action: {
+                    label: _("Undo"),
+                    onClick: () => setBankRecUnreconcileModalAtom(selectedTransaction.name)
+                },
+                actionButtonStyle: {
+                    backgroundColor: "rgb(0, 138, 46)"
+                }
+            })
+
+            if (files.length > 0) {
+                setIsUploading(true)
+
+                const uploadPromises = files.map(f => {
+                    return frappeFile.uploadFile(f, {
+                        isPrivate: true,
+                        doctype: "Payment Entry",
+                        docname: message.payment_entry.name,
+                    }, (_bytesUploaded, _totalBytes, progress) => {
+
+                        setUploadProgress((currentProgress) => {
+                            //If there are multiple files, we need to add the progress to the current progress
+                            return currentProgress + ((progress?.progress ?? 0) / files.length)
+                        })
+
+                    })
+                })
+
+                return Promise.all(uploadPromises).then(() => {
+                    setUploadProgress(0)
+                    setIsUploading(false)
+                })
+            } else {
+                return Promise.resolve()
+            }
+        }).then(() => {
+            setUploadProgress(0)
+            setIsUploading(false)
+            onReconcile(selectedTransaction)
+            onClose()
+        })
+    }
+
+
+    useHotkeys('meta+s', () => {
+        form.handleSubmit(onSubmit)()
+    }, {
+        enabled: true,
+        preventDefault: true,
+        enableOnFormTags: true
+    })
+
+    const onAccountChange = (account: string, is_mirror: boolean = false) => {
+        //If the transaction is a withdrawal, set the paid to to the selected account - since this is the account where the money is deposited into
+        if (selectedTransaction.withdrawal && selectedTransaction.withdrawal > 0) {
+            form.setValue('paid_to', account)
+        } else {
+            form.setValue('paid_from', account)
+        }
+
+        if (!is_mirror) {
+            // Reset the mirror transaction name
+            form.setValue('mirror_transaction_name', '')
+        }
+    }
+
+    const selectedAccount = useWatch({ control: form.control, name: (selectedTransaction.deposit && selectedTransaction.deposit > 0) ? 'paid_from' : 'paid_to' })
+
+    const direction = useDirection()
+
+    if (isUploading && isCompleted) {
+        return <FileUploadBanner uploadProgress={uploadProgress} />
+    }
+
+    return <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className='flex flex-col gap-4'>
+                {error && <ErrorBanner error={error} />}
+                <div className='grid grid-cols-2 gap-4'>
+                    <SelectedTransactionDetails transaction={selectedTransaction} />
+
+                    <div className='flex flex-col gap-4'>
+                        <div className='grid grid-cols-2 gap-4'>
+                            <DateField
+                                name='posting_date'
+                                label={_("Posting Date")}
+                                isRequired
+                                inputProps={{ autoFocus: false }}
+                            />
+                            <DateField
+                                name='reference_date'
+                                label={_("Reference Date")}
+                                isRequired
+                                inputProps={{ autoFocus: false }}
+                            />
+                        </div>
+                        <DataField name='reference_no' label={_("Reference")} isRequired inputProps={{ autoFocus: false }} />
+                    </div>
+                </div>
+
+                <div className='flex flex-col gap-2'>
+                    <H4 className='text-base'>{isWithdrawal ? _('Transferred to') : _('Transferred from')}</H4>
+                    <RecommendedTransferAccount transaction={selectedTransaction} onAccountChange={onAccountChange} />
+                    <BankOrCashPicker company={selectedTransaction.company ?? ''} bankAccount={selectedTransaction.bank_account ?? ''} onAccountChange={onAccountChange} selectedAccount={selectedAccount} />
+                </div>
+                <div className='flex flex-col gap-2 py-2'>
+                    <div className='flex items-end justify-between gap-4'>
+                        <div className='flex-1'>
+                            <AccountFormField
+                                name="paid_from"
+                                label={_("Paid From")}
+                                account_type={['Bank', 'Cash']}
+                                readOnly={isWithdrawal}
+                                filterFunction={(account) => account.name !== selectedBankAccount.account}
+                                isRequired
+                            />
+                        </div>
+
+                        <div className='pb-2'>
+                            {direction === 'ltr' ? <ArrowRight /> : <ArrowLeft />}
+                        </div>
+                        <div className='flex-1'>
+                            <AccountFormField
+                                name="paid_to"
+                                label={_("Paid To")}
+                                account_type={['Bank', 'Cash']}
+                                isRequired
+                                readOnly={!isWithdrawal}
+                                filterFunction={(account) => account.name !== selectedBankAccount.account}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <Separator />
+                <div className='flex flex-col gap-2'>
+                    <div className='grid grid-cols-2 gap-4'>
+
+
+                        <SmallTextField
+                            name='remarks'
+                            label={_("Custom Remarks")}
+                            formDescription={_("This will be auto-populated if not set.")}
+                        />
+                        <div
+                            data-slot="form-item"
+                            className="flex flex-col gap-2"
+                        >
+                            <Label>{_("Attachments")}</Label>
+                            <FileDropzone files={files} setFiles={setFiles} />
+                        </div>
+                    </div>
+                </div>
+                <DialogFooter>
+                    <DialogClose asChild>
+                        <Button size='md' variant={'outline'} disabled={loading}>{_("Cancel")}</Button>
+                    </DialogClose>
+                    <Button size='md' type='submit' disabled={loading}>{_("Transfer")}</Button>
+                </DialogFooter>
+            </div>
+        </form>
+    </Form>
+}
+
+
+const BankOrCashPicker = ({ bankAccount, onAccountChange, selectedAccount, company }: { selectedAccount: string, bankAccount: string, onAccountChange: (account: string) => void, company: string }) => {
+
+    const { banks } = useGetBankAccounts(undefined, (bank) => bank.name !== bankAccount)
+
+    return <div className='grid grid-cols-4 gap-4'>
+        {banks.map((bank) => (
+            <div
+                className={cn('border p-2 rounded-md flex items-center gap-2 cursor-pointer outline-[0.5px] transition-all duration-200 hover:bg-surface-gray-1 dark:hover:bg-surface-gray-3',
+                    selectedAccount === bank.account ? 'border-outline-gray-5 outline-outline-gray-5 bg-surface-gray-1 dark:bg-surface-gray-3' : 'border-outline-gray-2 outline-outline-gray-2'
+                )}
+                role='button'
+                key={bank.account}
+                onClick={() => onAccountChange(bank.account ?? '')}
+            >
+                <BankLogo bank={bank} iconSize='24px' imageClassName='w-12 h-12' />
+                <div className='flex flex-col gap-1'>
+                    <span className='font-semibold text-sm'>{bank.account_name} {bank.bank_account_no && <span className='text-xs text-ink-gray-5'>({bank.bank_account_no})</span>}</span>
+                    <span className='text-xs text-ink-gray-5'>{bank.account}</span>
+                </div>
+            </div>
+        ))}
+        <CashPicker company={company ?? ''} selectedAccount={selectedAccount} setSelectedAccount={onAccountChange} />
+    </div>
+
+}
+
+const CashPicker = ({ company, selectedAccount, setSelectedAccount }: { company: string, selectedAccount: string, setSelectedAccount: (account: string) => void }) => {
+
+    const { data } = useFrappeGetCall('frappe.client.get_value', {
+        doctype: 'Company',
+        filters: company,
+        fieldname: 'default_cash_account'
+    }, undefined, {
+        revalidateOnFocus: false,
+        revalidateIfStale: false,
+    })
+
+    const account = data?.message?.default_cash_account
+
+    if (account) {
+        return <div className={cn('border p-2 rounded-md flex items-center gap-2 cursor-pointer outline-[0.5px] transition-all duration-200 hover:bg-surface-gray-1 dark:hover:bg-surface-gray-3',
+            selectedAccount === account ? 'border-outline-gray-5 outline-outline-gray-5 bg-surface-gray-1 dark:bg-surface-gray-3' : 'border-outline-gray-2 outline-outline-gray-2'
+        )}
+            role='button'
+            onClick={() => setSelectedAccount(account ?? '')}
+        >
+            <div className='flex items-center justify-center h-10 w-10'>
+                <Banknote size='24px' />
+            </div>
+            <div className='flex flex-col gap-1'>
+                <span className='font-semibold text-sm'>Cash</span>
+                <span className='text-xs text-ink-gray-5'>{data?.message?.default_cash_account}</span>
+            </div>
+        </div>
+    }
+
+    return null
+}
+
+
+const RecommendedTransferAccount = ({ transaction, onAccountChange }: { transaction: UnreconciledTransaction, onAccountChange: (account: string, is_mirror: boolean) => void }) => {
+
+    const { setValue, watch } = useFormContext<InternalTransferFormFields>()
+
+    const mirrorTransactionName = watch('mirror_transaction_name')
+    const paid_from = watch('paid_from')
+    const paid_to = watch('paid_to')
+
+    const { data } = useFrappeGetCall('erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.search_for_transfer_transaction', {
+        transaction_id: transaction.name
+    }, undefined, {
+        revalidateOnFocus: false,
+        revalidateIfStale: false,
+    })
+
+    // Get bank accounts to find the logo
+    const { banks } = useGetBankAccounts()
+
+    const bank = useMemo(() => {
+        if (data?.message?.bank_account && banks) {
+            return banks.find(bank => bank.name === data.message.bank_account)
+        }
+        return null
+    }, [data?.message?.bank_account, banks])
+
+    const selectTransaction = () => {
+        if (data?.message) {
+            setValue('mirror_transaction_name', data.message.name)
+            onAccountChange(data.message.account, true)
+        }
+    }
+
+    if (data?.message) {
+
+        const isWithdrawal = data.message.withdrawal && data.message.withdrawal > 0
+
+        const amount = isWithdrawal ? data.message.withdrawal : data.message.deposit
+        const currency = data.message.currency
+
+        const isAccountSelected = isWithdrawal ? paid_from === data.message.account : paid_to === data.message.account
+
+        const isSuggested = mirrorTransactionName === data?.message?.name && isAccountSelected
+
+        return (<div className='pb-2'>
+            <div className={cn("flex justify-between items-start gap-3 p-3 border rounded-lg shadow-sm",
+                isSuggested ? "border-outline-green-4 bg-surface-green-1" : "border-outline-violet-2 bg-surface-violet-2/50")}>
+                <div>
+                    <div className='flex flex-col gap-3'>
+                        <div className={cn("flex items-center gap-2 shrink-0",
+                            isSuggested ? "text-ink-green-4" : "text-ink-violet-4"
+                        )}>
+                            <BadgeCheck className="w-4 h-4" />
+                            <span className="text-sm font-medium">{_("Suggested Transfer to {0}", [data.message.account])}</span>
+                        </div>
+                        <div className='flex flex-col gap-1'>
+                            <span className='text-p-sm'>{_("The system found a mirror transaction ({0}) in another account with the same amount and date.", [data.message.name])}</span>
+                            <span className='text-p-sm'>{_("Accepting the suggestion will reconcile both transactions.")}</span>
+                        </div>
+
+                        <div className='flex flex-col gap-1.5'>
+                            <div className='flex items-center gap-1'>
+                                <Calendar size='16px' />
+                                <span className='text-sm'>{formatDate(data.message.date, 'Do MMM YYYY')}</span>
+                            </div>
+                            <span className='text-sm line-clamp-1' title={data.message.description}>{data.message.description}</span>
+                        </div>
+                    </div>
+                </div>
+                <div className='flex flex-col items-end justify-between gap-2 h-full w-[30%]'>
+                    <div className="flex items-center gap-2">
+                        <BankLogo bank={bank} iconSize='24px' imageClassName='h-8 max-w-24' iconClassName={cn(isSuggested ? "text-ink-green-3" : "text-purple-600")} />
+                    </div>
+                    <div className='flex gap-1'>
+                        <div className={cn('flex items-center gap-1 text-end px-0 justify-end py-1 rounded-sm',
+                            isWithdrawal ? 'text-ink-red-3' : 'text-ink-green-3'
+                        )}>
+                            {isWithdrawal ? <ArrowUpRight className="w-5 h-5 text-ink-red-3" /> : <ArrowDownRight className="w-5 h-5 text-ink-green-3" />}
+                            <span className='text-sm font-semibold uppercase'>{isWithdrawal ? _('Transferred Out') : _('Received')}</span>
+                        </div>
+                    </div>
+                    <span className='font-semibold font-numeric text-lg text-end pe-0.5'>{formatCurrency(amount, currency)}</span>
+                    <div className='pt-1'>
+                        <Button
+                            onClick={selectTransaction}
+                            theme={isSuggested ? "green" : "violet"}
+                            size="md"
+                            type='button'
+                        >
+                            {isSuggested ? <CheckCircle /> : <CheckIcon />}
+                            {isSuggested ? _("Accepted") : _("Use Suggestion")}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        )
+    }
+
+    return null
+}
+
+export default TransferModal

banking/src/components/features/BankReconciliation/bankRecAtoms.ts

@@ -0,0 +1,83 @@
+import { BankAccount } from "@/types/Accounts/BankAccount";
+import { getDatesForTimePeriod } from "@/lib/date";
+import { atom } from "jotai";
+import { atomWithStorage, createJSONStorage } from "jotai/utils";
+import { atomFamily } from 'jotai-family'
+import { UnreconciledTransaction } from "./utils";
+import { BankTransaction } from "@/types/Accounts/BankTransaction";
+import { PaymentEntry } from "@/types/Accounts/PaymentEntry";
+import { JournalEntry } from "@/types/Accounts/JournalEntry";
+
+export interface SelectedBank extends Pick<BankAccount, 'name' | 'bank' | 'is_credit_card' | 'company' | 'account_name' | 'bank_account_no' | 'account' | 'account_type' | 'integration_id' | 'is_default' | 'last_integration_date'> {
+    logo?: string,
+    logoDark?: string,
+    darkModeInvert?: boolean,
+    logoClassName?: string,
+    account_currency?: string
+}
+export const selectedBankAccountAtom = atom<SelectedBank | null>(null)
+
+export const bankRecDateAtom = atomWithStorage<{ fromDate: string, toDate: string }>("bank-rec-date", {
+    fromDate: getDatesForTimePeriod('This Month').fromDate,
+    toDate: getDatesForTimePeriod('This Month').toDate
+})
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const bankRecClosingBalanceAtom = atomFamily((_id: string) => {
+    return atom<{ value: number, stringValue: string | number | undefined }>({
+        value: 0,
+        stringValue: '0.00'
+    })
+})
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const bankRecSelectedTransactionAtom = atomFamily((_id: string) => {
+    return atom<UnreconciledTransaction[]>([])
+})
+
+/** Action Modals */
+export const bankRecTransferModalAtom = atom(false)
+export const bankRecRecordPaymentModalAtom = atom(false)
+export const bankRecRecordJournalEntryModalAtom = atom(false)
+
+export const bankRecUnreconcileModalAtom = atom<string>('')
+
+export const bankRecMatchFilters = atomWithStorage<string[]>('bank-rec-match-filters', ['payment_entry', 'journal_entry'])
+
+export const bankRecSearchText = atom<string>('')
+export const bankRecAmountFilter = atom<{ value: number, stringValue?: string | number }>({
+    value: 0,
+    stringValue: '0.00'
+})
+export const bankRecTransactionTypeFilter = atom<string>('All')
+
+export interface ActionLog {
+    type: 'match' | 'payment' | 'transfer' | 'bank_entry'
+    isBulk: boolean
+    timestamp: number,
+    items: ActionLogItem[],
+    bulkCommonData?: {
+        party_type?: string,
+        party?: string,
+        account?: string,
+        bank_account?: string,
+    }
+}
+
+export interface ActionLogItem {
+    bankTransaction: BankTransaction,
+    voucher: {
+        reference_doctype: string,
+        reference_name: string,
+        reference_no?: string,
+        reference_date?: string,
+        posting_date: string,
+        doc?: PaymentEntry | JournalEntry
+    },
+}
+
+const actionLogStorage = createJSONStorage<ActionLog[]>(() => sessionStorage)
+
+export const bankRecActionLog = atomWithStorage<ActionLog[]>('bank-rec-action-log', [], actionLogStorage, {
+    getOnInit: true,
+})

banking/src/components/features/BankReconciliation/logos.ts

@@ -0,0 +1,397 @@
+export const BANK_LOGOS: { keywords: string[], logo: string, locale?: string[], logoDark?: string, darkModeInvert?: boolean, logoClassName?: string }[] = [
+    // United States + International
+    {
+        keywords: ['American Express', 'Amex'],
+        logo: 'Amex.svg',
+        locale: ['Global', 'United States']
+    },
+    {
+        keywords: ['Bank of America', 'BOA'],
+        logo: 'Bank_of_America.png',
+        darkModeInvert: true,
+        locale: ['United States']
+    },
+    {
+        keywords: ['Barclays'],
+        logo: 'Barclays.svg',
+        locale: ['Global', 'United Kingdom'],
+        logoClassName: 'h-12',
+    },
+    {
+        keywords: ['BNP Paribas'],
+        logo: 'BNP_Paribas.svg',
+        logoDark: 'BNP_Paribas-Dark.svg',
+        locale: ['Global', 'France'],
+        logoClassName: 'max-w-24'
+    },
+    {
+        keywords: ['Bank of New York Mellon', 'BNY Mellon', 'BNY'],
+        logo: 'BNY_Mellon.svg',
+        locale: ['Global', 'United States'],
+        logoDark: 'BNY_Mellon-Dark.svg',
+    },
+    {
+        keywords: ['Capital One'],
+        logo: 'Capital_One.png',
+        locale: ['United States'],
+        darkModeInvert: true
+    },
+    {
+        keywords: ['Charles Schwab', 'Schwab'],
+        logo: 'Charles_Schwab.svg',
+        locale: ['United States'],
+        logoClassName: 'h-7'
+    },
+    {
+        keywords: ['Chase'],
+        logo: 'chase.svg',
+        locale: ['Global', 'United States'],
+        logoDark: 'chase-Dark.svg',
+    },
+    {
+        keywords: ['Citi', 'Citibank', 'Citi Group', 'Citi Financial Services'],
+        logo: 'Citi.svg',
+        locale: ['Global', 'United States']
+    },
+    {
+        keywords: ['Deutsche Bank'],
+        logo: 'Deutsche_Bank.svg',
+        locale: ['Global', 'Germany'],
+        darkModeInvert: true,
+    },
+    {
+        keywords: ['Goldman Sachs'],
+        logo: 'Goldman_Sachs.svg',
+        locale: ['Global', 'United States'],
+        darkModeInvert: true,
+    },
+    {
+        keywords: ['HSBC'],
+        logo: 'HSBC.svg',
+        locale: ['Global', 'United Kingdom'],
+        logoDark: 'HSBC-dark.svg',
+    },
+    {
+        keywords: ['JPMorgan Chase', 'JPMorgan', 'JP Morgan', 'JP Morgan Chase', 'JPMorgan Chase & Co', 'JPM', 'JPMC'],
+        logo: 'jpmc.svg',
+        locale: ['Global', 'United States'],
+        darkModeInvert: true,
+    },
+    {
+        keywords: ['Morgan Stanley'],
+        logo: 'Morgan_Stanley.png',
+        locale: ['Global', 'United States'],
+        darkModeInvert: true,
+    },
+    {
+        keywords: ['PNC', 'PNC Financial Services Group', 'PNC Financial Services', 'Pittsburgh National Corporation'],
+        logo: 'PNC.png',
+        locale: ['United States']
+    },
+    {
+        keywords: ['Santander'],
+        logo: 'Santander.svg',
+        locale: ['Global']
+    },
+    {
+        keywords: ['TD Bank', 'Toronto Dominion Bank'],
+        logo: 'Toronto_Dominion_Bank.png',
+        locale: ['Canada']
+    },
+    {
+        keywords: ['Truist'],
+        logo: 'Truist.svg',
+        locale: ['United States'],
+        darkModeInvert: true,
+        logoClassName: 'h-8'
+    },
+    {
+        keywords: ['UBS'],
+        logo: 'UBS.svg',
+        locale: ['Global', 'Switzerland'],
+        logoDark: 'UBS-dark.svg',
+    },
+    {
+        keywords: ['US Bank', 'USBank', 'U.S. Bank', 'U.S. Bancorp'],
+        logo: 'USBank.svg',
+        locale: ['United States'],
+        logoDark: 'USBank-dark.svg',
+    },
+    {
+        keywords: ['Wells Fargo', 'Wells Fargo'],
+        logo: 'Wells_Fargo.svg',
+        locale: ['United States'],
+        logoClassName: 'h-7'
+    },
+    {
+        keywords: ['OakStar', 'Oakstar', 'Oakstar'],
+        logo: 'Oakstar.png',
+        logoDark: 'Oakstar-dark.webp',
+        locale: ['United States'],
+        logoClassName: 'h-7'
+    },
+    {
+        keywords: ['PlainsCapital', 'Plains Capital'],
+        logo: 'PlainsCapitalBank.png',
+        locale: ['United States'],
+        logoClassName: 'h-7'
+    },
+    {
+        keywords: ["Standard Chartered"],
+        logo: 'Standard_Chartered.png',
+        logoDark: 'Standard_Chartered-dark.png',
+        locale: ['Global'],
+    },
+    // India
+    {
+        keywords: ['HDFC Bank', 'HDFC'],
+        logo: 'HDFC.svg',
+        locale: ['India'],
+    },
+    {
+        keywords: ['ICICI Bank', 'ICICI'],
+        logo: 'ICICI.svg',
+        logoDark: 'ICICI-dark.svg',
+        locale: ['India'],
+    },
+    {
+        keywords: ['SBI', 'State Bank of India'],
+        logo: 'State_Bank_of_India.svg',
+        logoDark: 'State_bank_of_India-Dark.svg',
+        locale: ['India'],
+        logoClassName: 'h-4.5'
+    },
+    {
+        keywords: ['Punjab National Bank', 'PNB'],
+        logo: 'Punjab_National_Bank.svg',
+        locale: ['India']
+    },
+    {
+        keywords: ['Union Bank of India', 'Union Bank'],
+        logo: 'Union_Bank_of_India.svg',
+        locale: ['India']
+    },
+    {
+        keywords: ['Yes Bank', 'Yes'],
+        logo: 'Yes_Bank.svg',
+        locale: ['India'],
+        logoDark: 'Yes_Bank-dark.svg',
+    },
+    {
+        keywords: ['RBL Bank', 'RBL'],
+        logo: 'RBL_Bank.svg',
+        locale: ['India'],
+        logoDark: 'RBL_Bank-dark.svg',
+    },
+    {
+        keywords: ['Axis Bank', 'Axis'],
+        logo: 'Axis_Bank.svg',
+        locale: ['India'],
+        darkModeInvert: true
+    },
+    {
+        keywords: ['Bank of Baroda', 'BOB'],
+        logo: 'Bank_of_Baroda.svg',
+        locale: ['India', 'Kenya'],
+        logoClassName: 'h-7'
+    },
+    {
+        keywords: ['Bank of India', 'BOI'],
+        logo: 'Bank_of_India.png',
+        locale: ['India'],
+        logoClassName: 'h-7'
+    },
+    {
+        keywords: ['Bank of Maharashtra', 'BOM'],
+        logo: 'Bank_of_Maharashtra.png',
+        locale: ['India'],
+        logoClassName: 'min-w-24'
+    },
+    {
+        keywords: ['Kotak Mahindra Bank', 'Kotak'],
+        logo: 'Kotak_Mahindra.svg',
+        locale: ['India']
+    },
+    {
+        keywords: ['IndusInd Bank', 'IndusInd'],
+        logo: 'IndusInd_Bank.svg',
+        locale: ['India'],
+        darkModeInvert: true,
+    },
+    {
+        keywords: ['IDBI Bank', 'IDBI'],
+        logo: 'IDBI_Bank.svg',
+        locale: ['India']
+    },
+    {
+        keywords: ['IDFC First Bank', 'IDFC First'],
+        logo: 'IDFC_First_Bank.svg',
+        locale: ['India']
+    },
+    {
+        keywords: ['Federal Bank'],
+        logo: 'Federal_Bank.png',
+        logoDark: 'Federal_Bank-dark.png',
+        locale: ['India']
+    },
+    {
+        keywords: ['Fi Bank'],
+        logo: 'Fi_Bank.svg',
+        locale: ['India']
+    },
+    {
+        keywords: ['RazorpayX', 'Razorpay'],
+        logo: 'Razorpay.svg',
+        logoDark: 'Razorpay-dark.svg',
+        locale: ['India']
+    },
+    {
+        keywords: ['Revolut'],
+        logo: 'Revolut.png',
+        locale: ['Global'],
+        darkModeInvert: true
+    },
+    {
+        keywords: ['Starling Bank'],
+        logo: 'Starling_Bank.png',
+        logoDark: 'Starling_Bank-dark.png',
+        locale: ['Global', 'UK'],
+        logoClassName: 'h-10'
+    },
+    // Australia and New Zealand
+    {
+        keywords: ["Commonwealth Bank", "CBA"],
+        logo: "Commonwealth_Bank.svg",
+        locale: ['Australia', 'New Zealand'],
+    },
+    {
+        keywords: ["Airwallex"],
+        logo: "Airwallex.png",
+        logoDark: "Airwallex-dark.png",
+        locale: ['Global']
+    },
+    {
+        keywords: ["Judo Bank"],
+        logo: "Judo_Bank.svg",
+        logoDark: "Judo_Bank-dark.svg",
+        locale: ['Australia', 'New Zealand']
+    },
+    {
+        keywords: ["Alpha"], // This might conflict with Alpha Bank in Greece
+        logo: "Alpha_Bank.svg",
+        darkModeInvert: true,
+        logoClassName: 'h-4.5',
+        locale: ['Australia', 'New Zealand']
+    },
+    {
+        keywords: ["Australian Tax Office", "Australian Taxation Office"],
+        logo: "Australian_Tax_Office.png",
+        darkModeInvert: true,
+        locale: ['Australia']
+    },
+    {
+        keywords: ["Westpac"],
+        logo: "Westpac.svg",
+        locale: ['Australia']
+    },
+    {
+        keywords: ["ANZ", "ANZ Bank", "Australia and New Zealand Banking Group"],
+        logo: "ANZ.png",
+        locale: ['Australia', 'New Zealand']
+    },
+    {
+        keywords: ["Macquarie Group", "Macquarie Bank"],
+        logo: "Macquarie.svg",
+        darkModeInvert: true,
+        locale: ['Australia']
+    },
+    // Nicaragua
+    {
+        keywords: ["Banco Atlantida", "Banco Atlántida"],
+        logo: "Banco_Atlantida.png",
+        locale: ['Nicaragua']
+    },
+    {
+        keywords: ["Banco de Finanzas"],
+        logo: "Banco_de_Finanzas.svg",
+        locale: ['Nicaragua'],
+        logoClassName: 'h-4.5'
+    },
+    {
+        keywords: ["Avanz"],
+        logo: "Avanz.svg",
+        logoDark: "Avanz-dark.svg",
+        locale: ['Nicaragua'],
+        logoClassName: 'h-7'
+    },
+    {
+        keywords: ["Ficohsa"],
+        logo: "Ficohsa.svg",
+        locale: ['Nicaragua']
+    },
+    {
+        keywords: ["BAC", "BAC Credomatic"],
+        logo: "BAC_Credomatic.svg",
+        locale: ['Nicaragua'],
+        logoClassName: 'h-4.5'
+    },
+    {
+        keywords: ["Banco Lafise"],
+        logo: "Banco_Lafise.png",
+        darkModeInvert: true,
+        locale: ['Nicaragua']
+    },
+    // German
+    {
+        keywords: ["Sparkasse"],
+        logo: "Sparkasse.png",
+        locale: ['Germany']
+    },
+    {
+        keywords: ["Volksbank", "Raiffeisenbank", "VR-Bank"],
+        logo: "Volksbanken_Raiffeisenbanken.svg",
+        locale: ['Germany'],
+        logoClassName: 'min-w-32'
+    },
+    // Kenya
+    {
+        keywords: ["KCB Bank", "KCB"],
+        logo: "KCB_Bank_Kenya.png",
+        locale: ['Kenya']
+    },
+    {
+        keywords: ["Equity Bank"],
+        logo: "Equity_Bank.png",
+        logoDark: "Equity_Bank-dark.png",
+        locale: ['Kenya'],
+    },
+    {
+        keywords: ["I&M"],
+        logo: "I&M.png",
+        locale: ['Kenya']
+    },
+    {
+        keywords: ["ABSA"],
+        logo: "ABSA.png",
+        locale: ['Kenya'],
+        darkModeInvert: true,
+        logoClassName: 'h-7'
+    },
+    {
+        keywords: ["Stanbic"],
+        logo: "Stanbic.png",
+        locale: ['Kenya'],
+        logoClassName: 'h-7'
+    },
+    {
+        keywords: ["DTB", "Diamond Trust Bank"],
+        logo: "Diamond_Trust_Bank.png",
+        locale: ['Kenya']
+    },
+    {
+        keywords: ["Prime Bank"],
+        logo: "Prime_Bank.png",
+        locale: ['Kenya'],
+        logoClassName: 'max-w-28'
+    }
+]

banking/src/components/features/BankReconciliation/utils.ts

@@ -0,0 +1,457 @@
+import { ActionLog, bankRecActionLog, bankRecAmountFilter, bankRecDateAtom, bankRecMatchFilters, bankRecSearchText, bankRecSelectedTransactionAtom, bankRecTransactionTypeFilter, bankRecUnreconcileModalAtom, SelectedBank, selectedBankAccountAtom } from './bankRecAtoms'
+import { useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { useMemo } from 'react'
+import { SWRConfiguration, useFrappeGetCall, useFrappeGetDoc, useFrappePostCall, useSWRConfig } from 'frappe-react-sdk'
+import { BankTransaction } from '@/types/Accounts/BankTransaction'
+import { BankAccount } from '@/types/Accounts/BankAccount'
+import dayjs from 'dayjs'
+import { toast } from 'sonner'
+import { BANK_LOGOS } from './logos'
+import { getErrorMessage } from '@/lib/frappe'
+import { useCurrentCompany } from '@/hooks/useCurrentCompany'
+import _ from '@/lib/translate'
+import { BankTransactionRule } from '@/types/Accounts/BankTransactionRule'
+import { useRef } from 'react'
+import type { DebouncedState } from 'usehooks-ts'
+import { useDebounceCallback } from 'usehooks-ts'
+import Fuse from 'fuse.js'
+
+export const useGetAccountOpeningBalance = () => {
+
+    const companyID = useCurrentCompany()
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+
+    const dates = useAtomValue(bankRecDateAtom)
+
+    const args = useMemo(() => {
+
+        return {
+            bank_account: bankAccount?.name,
+            company: companyID,
+            till_date: dayjs(dates.fromDate).subtract(1, 'days').format('YYYY-MM-DD'),
+        }
+
+    }, [companyID, bankAccount?.name, dates.fromDate])
+
+    return useFrappeGetCall('erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.get_account_balance', args, undefined, {
+        revalidateOnFocus: false
+    })
+}
+
+export const useGetAccountClosingBalance = () => {
+
+    const companyID = useCurrentCompany()
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+
+    const dates = useAtomValue(bankRecDateAtom)
+
+    const args = useMemo(() => {
+
+        return {
+            bank_account: bankAccount?.name,
+            company: companyID,
+            till_date: dates.toDate,
+        }
+
+    }, [companyID, bankAccount?.name, dates.toDate])
+
+    return useFrappeGetCall('erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.get_account_balance', args,
+        `bank-reconciliation-account-closing-balance-${bankAccount?.name}-${dates.toDate}`,
+        {
+            revalidateOnFocus: false
+        }
+    )
+
+}
+
+/**
+ * Hook to fetch the closing balance set in the database for the given bank and date
+ */
+export const useGetAccountClosingBalanceAsPerStatement = (swrConfig: SWRConfiguration = {}) => {
+
+    const dates = useAtomValue(bankRecDateAtom)
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+
+    return useFrappeGetCall<{ message: { balance: number, date?: string } }>("erpnext.accounts.doctype.bank_account.bank_account.get_closing_balance_as_per_statement", {
+        bank_account: bankAccount?.name,
+        date: dates.toDate
+    }, `bank-reconciliation-account-closing-balance-as-per-statement-${bankAccount?.name}-${dates.toDate}`, {
+        revalidateOnFocus: false,
+        ...swrConfig
+    })
+}
+
+export type UnreconciledTransaction = Pick<BankTransaction, 'name' | 'matched_transaction_rule' | 'date' | 'withdrawal' | 'deposit' | 'currency' | 'description' | 'status' | 'transaction_type' | 'reference_number' | 'party_type' | 'party' | 'bank_account' | 'company' | 'unallocated_amount'>
+
+
+export const useGetUnreconciledTransactions = () => {
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+    const dates = useAtomValue(bankRecDateAtom)
+    return useFrappeGetCall<{ message: UnreconciledTransaction[] }>('erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.get_bank_transactions', {
+        bank_account: bankAccount?.name,
+        from_date: dates.fromDate,
+        to_date: dates.toDate
+    }, bankAccount ? `bank-reconciliation-unreconciled-transactions-${bankAccount?.name}-${dates.fromDate}-${dates.toDate}` : null, {
+        revalidateOnFocus: false,
+        revalidateIfStale: false
+    })
+}
+
+export interface LinkedPayment {
+    rank: number,
+    doctype: string,
+    name: string,
+    paid_amount: number,
+    reference_no: string,
+    reference_date: string,
+    posting_date: string,
+    party_type?: string,
+    party?: string,
+    currency: string
+}
+
+export const useGetBankTransactions = () => {
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+    const dates = useAtomValue(bankRecDateAtom)
+    return useFrappeGetCall<{ message: BankTransaction[] }>('erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.get_bank_transactions', {
+        bank_account: bankAccount?.name,
+        from_date: dates.fromDate,
+        to_date: dates.toDate,
+        all_transactions: true
+    }, bankAccount ? `bank-reconciliation-bank-transactions-${bankAccount?.name}-${dates.fromDate}-${dates.toDate}` : null)
+}
+
+
+export const useGetVouchersForTransaction = (transaction: UnreconciledTransaction) => {
+
+    const dates = useAtomValue(bankRecDateAtom)
+
+    const matchFilters = useAtomValue(bankRecMatchFilters)
+
+    return useFrappeGetCall<{ message: LinkedPayment[] }>('erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.get_linked_payments', {
+        bank_transaction_name: transaction.name,
+        document_types: matchFilters ?? ['payment_entry', 'journal_entry'],
+        from_date: dates.fromDate,
+        to_date: dates.toDate,
+        filter_by_reference_date: 0
+    }, `bank-reconciliation-vouchers-${transaction.name}-${dates.fromDate}-${dates.toDate}-${matchFilters.join(',')}`, {
+        revalidateOnFocus: false
+    })
+}
+
+/**
+ * Common hook to refresh the unreconciled transactions list after a transaction is reconciled
+ * @returns function to call to refresh the unreconciled transactions list AFTER the operation is done
+ */
+export const useRefreshUnreconciledTransactions = () => {
+
+    const selectedBank = useAtomValue(selectedBankAccountAtom)
+    const dates = useAtomValue(bankRecDateAtom)
+    const matchFilters = useAtomValue(bankRecMatchFilters)
+    const setSelectedTransaction = useSetAtom(bankRecSelectedTransactionAtom(selectedBank?.name || ''))
+
+    const { mutate } = useSWRConfig()
+
+    const searchString = useAtomValue(bankRecSearchText)
+    const typeFilter = useAtomValue(bankRecTransactionTypeFilter)
+    const amountFilter = useAtomValue(bankRecAmountFilter)
+
+    const { data: unreconciledTransactions } = useGetUnreconciledTransactions()
+
+    /** 
+     * This function should be called after a transaction is reconciled
+     * It will get the next unreconciled transaction and select it
+     * And then refresh the balance + unreconciled transactions list
+     */
+    const onReconcileTransaction = (transaction: UnreconciledTransaction, updatedTransaction?: BankTransaction) => {
+
+        // If the updated transaction has an unallocated amount of 0, then we need to select the next unreconciled transaction
+        if (updatedTransaction && updatedTransaction?.unallocated_amount !== 0) {
+            mutate(`bank-reconciliation-unreconciled-transactions-${selectedBank?.name}-${dates.fromDate}-${dates.toDate}`)
+            mutate(`bank-reconciliation-account-closing-balance-${selectedBank?.name}-${dates.toDate}`)
+            // Update the matching vouchers for the selected transaction
+            mutate(`bank-reconciliation-vouchers-${transaction.name}-${dates.fromDate}-${dates.toDate}-${matchFilters.join(',')}`)
+            return
+        }
+
+        // From unreconciled transactions list, first apply the filters based on the search criteria and other filters
+
+        const searchIndex = unreconciledTransactions ? new Fuse(unreconciledTransactions.message, {
+            keys: ['description', 'reference_number'],
+            threshold: 0.5,
+            includeScore: true
+        }) : null
+
+        const results = getSearchResults(searchIndex, searchString, typeFilter, amountFilter.value, unreconciledTransactions?.message)
+
+        const currentIndex = results.findIndex(t => t.name === transaction.name)
+        let nextTransaction = null
+
+        if (currentIndex !== -1) {
+            // Check if there is a next transaction
+            if (currentIndex < (results.length || 0) - 1) {
+                nextTransaction = results[currentIndex + 1]
+            }
+        }
+
+        // We need to select the next unreconciled transaction for a better UX
+        mutate(`bank-reconciliation-unreconciled-transactions-${selectedBank?.name}-${dates.fromDate}-${dates.toDate}`)
+            .then(res => {
+                if (nextTransaction) {
+                    // Check if next transaction is there in the response
+                    const nextTransactionObj = res?.message.find((t: UnreconciledTransaction) => t.name === nextTransaction.name)
+                    if (nextTransactionObj) {
+                        setSelectedTransaction([nextTransactionObj])
+                    } else {
+                        // If the next transaction is not there in the response, we need to clear the selection
+                        setSelectedTransaction([])
+                    }
+                } else {
+                    // If there is no next transaction, we need to clear the selection
+                    setSelectedTransaction([])
+                }
+            })
+        mutate(`bank-reconciliation-account-closing-balance-${selectedBank?.name}-${dates.toDate}`)
+    }
+
+    return onReconcileTransaction
+
+}
+
+export const useReconcileTransaction = () => {
+
+    const { call, loading } = useFrappePostCall<{ message: BankTransaction }>('erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.reconcile_vouchers')
+
+    const onReconcileTransaction = useRefreshUnreconciledTransactions()
+
+    const setBankRecUnreconcileModalAtom = useSetAtom(bankRecUnreconcileModalAtom)
+
+    const addToActionLog = useUpdateActionLog()
+
+    const reconcileTransaction = (transaction: UnreconciledTransaction, voucher: LinkedPayment) => {
+
+        call({
+            bank_transaction_name: transaction.name,
+            vouchers: JSON.stringify([{
+                "payment_doctype": voucher.doctype,
+                "payment_name": voucher.name,
+                "amount": voucher.paid_amount
+            }])
+        }).then((res) => {
+            addToActionLog({
+                type: 'match',
+                timestamp: (new Date()).getTime(),
+                isBulk: false,
+                items: [
+                    {
+                        bankTransaction: res.message,
+                        voucher: {
+                            reference_doctype: voucher.doctype,
+                            reference_name: voucher.name,
+                            reference_no: voucher.reference_no,
+                            reference_date: voucher.reference_date,
+                            posting_date: voucher.posting_date,
+                        }
+                    }
+                ]
+            })
+            onReconcileTransaction(transaction, res.message)
+            toast.success(_("Reconciled"), {
+                duration: 4000,
+                closeButton: true,
+                action: {
+                    label: _("Undo"),
+                    onClick: () => setBankRecUnreconcileModalAtom(transaction.name)
+                },
+                actionButtonStyle: {
+                    backgroundColor: "rgb(0, 138, 46)"
+                }
+            })
+        }).catch((error) => {
+            console.error(error)
+            toast.error(_("Error"), {
+                duration: 5000,
+                description: getErrorMessage(error)
+            })
+        })
+    }
+
+    return { reconcileTransaction, loading }
+
+}
+
+interface BankAccountWithCurrency extends Pick<BankAccount, 'name' | 'bank' | 'account_name' | 'is_credit_card' | 'company' | 'account' | 'account_type' | 'account_subtype' | 'bank_account_no' | 'last_integration_date'> {
+    account_currency?: string
+}
+
+type BankLogoEntry = (typeof BANK_LOGOS)[number]
+
+/** Prefer the longest keyword match so short tokens (e.g. "anz" in "finanzas") do not beat full bank names. */
+function findBankLogoForName(bankName: string | undefined | null): BankLogoEntry | undefined {
+    if (!bankName) return undefined
+    const haystack = bankName.toLowerCase()
+    let best: BankLogoEntry | undefined
+    let bestKeywordLen = 0
+    for (const entry of BANK_LOGOS) {
+        for (const keyword of entry.keywords) {
+            const needle = keyword.toLowerCase()
+            if (needle.length === 0) continue
+            if (haystack.includes(needle) && needle.length > bestKeywordLen) {
+                bestKeywordLen = needle.length
+                best = entry
+            }
+        }
+    }
+    return best
+}
+
+export const useGetBankAccounts = (onSuccess?: (data?: Omit<SelectedBank, 'logo'>[]) => void, filterFn?: (bank: SelectedBank) => boolean) => {
+
+    const company = useCurrentCompany()
+
+    const { data, isLoading, error } = useFrappeGetCall<{ message: BankAccountWithCurrency[] }>('erpnext.accounts.doctype.bank_account.bank_account.get_list', {
+        company: company
+    }, undefined, {
+        revalidateOnFocus: false,
+        revalidateIfStale: false,
+        onSuccess: (data) => {
+            onSuccess?.(data?.message)
+        }
+    })
+
+    const banks = useMemo(() => {
+        // Match the bank account to the logo
+        const banksWithLogos = data?.message.map((bank) => {
+            const logo = findBankLogoForName(bank.bank)
+            return {
+                ...bank,
+                logo: logo?.logo,
+                logoDark: logo?.logoDark,
+                darkModeInvert: logo?.darkModeInvert,
+                logoClassName: logo?.logoClassName
+            }
+        }) ?? []
+
+        if (filterFn) {
+            return banksWithLogos.filter(filterFn)
+        }
+
+        return banksWithLogos
+    }, [data, filterFn])
+
+    return {
+        banks,
+        isLoading,
+        error
+    }
+
+}
+
+export const useIsTransactionWithdrawal = (transaction: UnreconciledTransaction) => {
+    return useMemo(() => {
+        const isWithdrawal = transaction.withdrawal && transaction.withdrawal > 0
+        const isDeposit = transaction.deposit && transaction.deposit > 0
+
+        return {
+            amount: isWithdrawal ? transaction.withdrawal : transaction.deposit,
+            isWithdrawal,
+            isDeposit
+        }
+    }, [transaction])
+}
+
+export const useGetRuleForTransaction = (transaction: UnreconciledTransaction) => {
+
+    return useFrappeGetDoc<BankTransactionRule>('Bank Transaction Rule', transaction.matched_transaction_rule,
+        transaction.matched_transaction_rule ? undefined : null, {
+        revalidateOnFocus: false,
+        revalidateIfStale: false
+    }
+    )
+}
+
+/** Hook to handle the search input while maintaining debouncing and global state. */
+export function useTransactionSearch(): [string, DebouncedState<(value: string) => void>] {
+    const delay = 500
+    const unwrappedInitialValue = ''
+    const eq = (left: string, right: string) => left === right
+    const [debouncedValue, setDebouncedValue] = useAtom(bankRecSearchText)
+    const previousValueRef = useRef<string | undefined>(unwrappedInitialValue)
+
+    const updateDebouncedValue = useDebounceCallback(
+        setDebouncedValue,
+        delay,
+    )
+
+    // Update the debounced value if the initial value changes
+    if (!eq(previousValueRef.current as string, unwrappedInitialValue)) {
+        updateDebouncedValue(unwrappedInitialValue)
+        previousValueRef.current = unwrappedInitialValue
+    }
+
+    return [debouncedValue, updateDebouncedValue]
+}
+
+/** Utility function to get the search results based on the search index, search string, type filter, amount filter and unreconciled transactions */
+export const getSearchResults = (
+    /** Fuse index of the unreconciled transactions */
+    searchIndex: Fuse<UnreconciledTransaction> | null,
+    /** Search string */
+    search: string,
+    /** Type filter */
+    typeFilter: string,
+    /** Amount filter */
+    amountFilter: number,
+    /** Unreconciled transactions */
+    unreconciledTransactions?: UnreconciledTransaction[]) => {
+
+    let r = []
+    if (!searchIndex || !search) {
+        r = unreconciledTransactions ?? []
+    } else {
+        r = searchIndex.search(search).map((result) => result.item)
+    }
+
+    if (typeFilter !== 'All') {
+        r = r.filter((transaction) => {
+            if (typeFilter === 'Debits') {
+                return transaction.withdrawal && transaction.withdrawal > 0
+            }
+            if (typeFilter === 'Credits') {
+                return transaction.deposit && transaction.deposit > 0
+            }
+        })
+    }
+
+    if (amountFilter > 0) {
+        r = r.filter((transaction) => {
+            if (transaction.withdrawal && transaction.withdrawal > 0) {
+                return transaction.withdrawal === amountFilter
+            }
+            if (transaction.deposit && transaction.deposit > 0) {
+                return transaction.deposit === amountFilter
+            }
+            return false
+        })
+    }
+
+    return r
+}
+
+export const useUpdateActionLog = () => {
+
+    const setActionLog = useSetAtom(bankRecActionLog)
+
+    const addToActionLog = (action: ActionLog) => {
+        // Store at max 100 actions
+        setActionLog((prev) => {
+            const newActions = [action, ...prev]
+            if (newActions.length > 100) {
+                return newActions.slice(0, 100)
+            }
+            return newActions
+        })
+    }
+
+    return addToActionLog
+}

banking/src/components/features/BankStatementImporter/CSV/CSVImport.tsx

@@ -0,0 +1,22 @@
+import CSVRawDataPreview from './CSVRawDataPreview'
+import StatementDetails from './StatementDetails'
+import _ from '@/lib/translate'
+import { GetStatementDetailsResponse } from '../import_utils'
+
+const CSVImport = ({ data }: { data: { message: GetStatementDetailsResponse } }) => {
+
+
+
+    return (
+        <div className="w-full flex">
+            <div className="w-[50%] p-4 h-[calc(100vh-72px)] overflow-scroll">
+                <StatementDetails data={data.message} />
+            </div>
+            <div className="w-[50%] border-s border-t pe-1 ps-0 border-outline-gray-2 h-[calc(100vh-72px)] overflow-scroll">
+                <CSVRawDataPreview data={data.message} />
+            </div>
+        </div>
+    )
+}
+
+export default CSVImport

banking/src/components/features/BankStatementImporter/CSV/CSVRawDataPreview.tsx

@@ -0,0 +1,151 @@
+import { Table, TableBody, TableCell, TableHead, TableRow } from "@/components/ui/table"
+import { cn } from "@/lib/utils"
+import { ArrowDownRightIcon, ArrowUpDownIcon, ArrowUpRightIcon, BanknoteIcon, CalendarIcon, DollarSignIcon, FileTextIcon, ListIcon, ReceiptIcon } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import _ from "@/lib/translate"
+import { GetStatementDetailsResponse } from "../import_utils"
+import { useMemo } from "react"
+import { BankStatementImportLogColumnMap } from "@/types/Accounts/BankStatementImportLogColumnMap"
+
+
+const CSVRawDataPreview = ({ data }: { data: GetStatementDetailsResponse }) => {
+
+    const column_mapping: Record<StandardColumnTypes, number> = useMemo(() => {
+
+        const col_map: Record<string, number> = {}
+
+        data.doc.column_mapping?.forEach(col => {
+            if (col.maps_to && col.maps_to !== "Do not import") {
+                col_map[col.maps_to] = col.index;
+            }
+        })
+
+        return col_map
+
+    }, [data])
+
+    const validColumns = Object.values(column_mapping)
+
+    // Reverse the column mapping to get a map of column index to variable name
+    const columnIndexMap: Record<number, StandardColumnTypes> = Object.fromEntries(Object.entries(column_mapping).map(([variable, columnIndex]) => [columnIndex, variable as StandardColumnTypes]))
+
+    // Loop over the contents of the CSV file and show a preview - highlight the header row and the transaction rows
+    return (
+        <Table containerClassName="rounded-none">
+            <TableBody>
+                {data.raw_data.map((row, index) => {
+
+                    const isHeaderRow = index === data.doc.detected_header_index;
+                    const isTransactionRow = index >= (data.doc.detected_transaction_starting_index ?? 0) && index <= (data.doc.detected_transaction_ending_index ?? 0);
+
+                    return <TableRow key={index}
+                        title={isHeaderRow ? "Header Row" : ""}
+                        className={cn({
+                            // "bg-yellow-100": isHeaderRow,
+                            // "hover:bg-yellow-100": isHeaderRow,
+                            "bg-green-50 hover:bg-green-50 dark:bg-green-700 dark:hover:bg-green-700": isTransactionRow,
+                            "text-ink-gray-5/70": !isTransactionRow && !isHeaderRow,
+                        })}>
+                        {isHeaderRow ? <TableHead className="bg-yellow-100 hover:bg-yellow-100 dark:bg-yellow-400 text-center font-semibold text-ink-gray-8">
+                            {index + 1}
+                        </TableHead> :
+                            <TableCell className="text-center px-1 py-0.5">
+                                {index + 1}
+                            </TableCell>
+                        }
+                        {row.map((cell, cellIndex) => {
+
+                            const isValidColumn = validColumns.includes(cellIndex);
+                            const columnType = columnIndexMap[cellIndex];
+                            const isAmountColumn = ["Amount", "Withdrawal", "Deposit", "Balance"].includes(columnType);
+
+                            if (isHeaderRow) {
+                                return <TableHead key={cellIndex} className={cn("max-w-[250px] w-fit overflow-hidden text-ellipsis py-0.5",
+                                    isValidColumn ? "bg-yellow-100 hover:bg-yellow-100 dark:bg-yellow-400" : "bg-surface-gray-2",
+                                )}>
+                                    <div className={cn("flex items-center text-xs gap-1 px-1 text-ink-gray-8 font-medium", {
+                                        "justify-end": isAmountColumn && isValidColumn
+                                    })}>
+                                        {columnType && <Tooltip>
+                                            <TooltipTrigger>
+                                                <ColumnHeaderIcon columnType={columnType} />
+                                            </TooltipTrigger>
+                                            <TooltipContent>
+                                                {_(columnType)}
+                                            </TooltipContent>
+                                        </Tooltip>
+                                        }
+                                        {cell}
+                                    </div>
+                                </TableHead>
+                            } else {
+                                return <TableCell key={cellIndex} className={cn("max-w-[200px] w-fit overflow-hidden text-ellipsis py-0.5",
+                                    {
+                                        "bg-green-100 dark:bg-green-400 hover:bg-green-100 dark:hover:bg-green-400": isValidColumn && isTransactionRow,
+                                        "text-ink-gray-5": !isValidColumn && isTransactionRow,
+                                    }
+                                )} >
+                                    <div className={cn("min-h-5 flex items-center text-xs px-1", {
+                                        "justify-end": isAmountColumn && isValidColumn && isTransactionRow
+                                    })} title={cell}>
+                                        {cell}
+                                    </div>
+                                </TableCell>
+                            }
+                        }
+
+                        )}
+                    </TableRow>
+                })}
+            </TableBody>
+        </Table >
+    )
+}
+
+type StandardColumnTypes = BankStatementImportLogColumnMap['maps_to'];
+
+const ColumnHeaderIcon = ({ columnType }: { columnType?: StandardColumnTypes }) => {
+    if (!columnType) {
+        return null
+    }
+
+    if (columnType === 'Amount') {
+        return <DollarSignIcon className="w-4 h-4" />
+    }
+
+    if (columnType === 'Withdrawal') {
+        return <ArrowUpRightIcon className="w-4 h-4 text-ink-red-3" />
+    }
+
+    if (columnType === 'Deposit') {
+        return <ArrowDownRightIcon className="w-4 h-4 text-ink-green-3" />
+    }
+
+    if (columnType === 'Balance') {
+        return <BanknoteIcon className="w-4 h-4" />
+    }
+
+    if (columnType === 'Date') {
+        return <CalendarIcon className="w-4 h-4" />
+    }
+
+    if (columnType === 'Description') {
+        return <FileTextIcon className="w-4 h-4" />
+    }
+
+    if (columnType === 'Reference') {
+        return <ReceiptIcon className="w-4 h-4" />
+    }
+
+    if (columnType === 'Transaction Type') {
+        return <ListIcon className="w-4 h-4" />
+    }
+
+    if (columnType === 'Debit/Credit') {
+        return <ArrowUpDownIcon className="w-4 h-4" />
+    }
+
+    return null
+}
+
+export default CSVRawDataPreview

banking/src/components/features/BankStatementImporter/CSV/StatementDetails.tsx

@@ -0,0 +1,351 @@
+import _ from '@/lib/translate'
+import { GetStatementDetailsResponse } from '../import_utils'
+import { flt, formatCurrency } from '@/lib/numbers'
+import { formatDate } from '@/lib/date'
+import { bankRecDateAtom } from '../../BankReconciliation/bankRecAtoms'
+import { AlertCircleIcon, ChevronLeftIcon, ChevronRightIcon, ExternalLinkIcon, InfoIcon, Loader2Icon } from 'lucide-react'
+import { H2, H3, Paragraph } from '@/components/ui/typography'
+import { FileTypeIcon } from '@/components/ui/file-dropzone'
+import { getFileExtension } from '@/lib/file'
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Separator } from '@/components/ui/separator'
+import { Button } from '@/components/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { useFrappeEventListener, useFrappePostCall } from 'frappe-react-sdk'
+import { toast } from 'sonner'
+import ErrorBanner from '@/components/ui/error-banner'
+import { Link, useNavigate } from 'react-router-dom'
+import { useMemo, useState } from 'react'
+import { Progress } from '@/components/ui/progress'
+import { useSetAtom } from 'jotai'
+import { useDirection } from '@/components/ui/direction'
+import BankLogo from '@/components/common/BankLogo'
+import { useGetBankAccounts } from '../../BankReconciliation/utils'
+import { BankStatementImportLog } from '@/types/Accounts/BankStatementImportLog'
+import { Badge } from '@/components/ui/badge'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+
+const parseDateFormat = (dateFormat: string) => {
+
+    const charMap = {
+        "%d": "DD",
+        "%m": "MM",
+        "%Y": "YYYY",
+        "%y": "YY",
+        "%b": "MMM",
+        "%B": "MMMM",
+    }
+
+    let label = dateFormat
+
+    Object.keys(charMap).forEach((char) => {
+        label = label.replace(char, charMap[char as keyof typeof charMap])
+    })
+
+    return dateFormat
+
+}
+
+type Props = {
+    data: GetStatementDetailsResponse,
+}
+
+const StatementDetails = ({ data }: Props) => {
+    const dateFormat = parseDateFormat(data.date_format)
+
+    const { call, loading, error } = useFrappePostCall<{ docs: BankStatementImportLog[] }>('run_doc_method')
+
+    const navigate = useNavigate()
+
+    const setDates = useSetAtom(bankRecDateAtom)
+
+    const direction = useDirection()
+
+    const onImport = () => {
+
+        call({
+            docs: data.doc,
+            method: 'insert_transactions'
+        }).then((response) => {
+            const doc = response.docs ? response.docs[0] : undefined
+            if (doc && doc.start_date && doc.end_date) {
+                setDates({
+                    fromDate: doc.start_date,
+                    toDate: doc.end_date,
+                })
+            }
+            toast.success(_("Bank statement imported."))
+            navigate(`/`)
+        }).catch(() => {
+            toast.error(_("There was an error while importing the bank statement."))
+        })
+
+    }
+
+    const [progress, setProgress] = useState(0)
+
+    useFrappeEventListener("bank-rec-statement-import-progress", (event) => {
+        setProgress(event.progress)
+    })
+
+    const file_name = data.doc.file.split("/").pop() ?? ""
+
+    const { banks } = useGetBankAccounts()
+
+    const bank = useMemo(() => {
+
+        return banks?.find((bank) => bank.name === data.doc.bank_account)
+
+    }, [data.doc.bank_account, banks])
+
+    return (
+        <div className='flex flex-col gap-4'>
+            <div className='flex flex-col gap-4'>
+                <div className='flex justify-between items-center'>
+                    <Button size='sm' variant='outline' asChild>
+                        <Link to="/statement-importer">
+                            {direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+                            {_("Back")}
+                        </Link>
+                    </Button>
+                    {data.doc.status === 'Completed' ? <Badge theme='green'>{_("Completed")}</Badge> :
+                        <Button onClick={onImport} disabled={loading || data.final_transactions?.length === 0} size='sm' type='button'>
+                            {loading ? <Loader2Icon className='size-4 animate-spin' /> : null}
+                            {loading ? _("Importing...") : _("Import {0} transactions", [data.final_transactions?.length?.toString() || "0"])}</Button>
+                    }
+                </div>
+                <div className='flex items-start gap-4'>
+                    <div className='flex flex-col gap-1'>
+                        <H2 className='text-lg border-0 p-0'>{_("Statement Details")}</H2>
+                        <Paragraph className='text-p-sm'><span>
+                            {_("We've auto-detected the details of the statement file.")}
+                        </span><br />
+                            <span>
+                                {_("Please review the details below and click the 'Import' button to proceed.")}
+                            </span>
+                        </Paragraph>
+                    </div>
+                </div>
+
+                {progress > 0 && <div className='flex flex-col gap-2'><Progress value={progress} max={100} size="lg" />
+                    <span className='text-sm'>{_("Importing {0} transactions", [progress.toString()])}
+                    </span>
+                </div>}
+
+                {error && <ErrorBanner error={error} />}
+
+                <Table>
+                    <TableBody>
+                        <TableRow>
+                            <TableHead>{_("Bank Account")}</TableHead>
+                            <TableCell>
+                                <div className='flex items-center gap-2'>
+                                    <BankLogo bank={bank} />
+                                    <span className="tracking-tight text-sm font-medium">{bank?.account_name}</span>
+                                    <span title="GL Account" className="text-sm">{bank?.account}</span>
+                                </div>
+                            </TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableHead>{_("Statement File")}</TableHead>
+                            <TableCell>
+                                <div className='flex items-center gap-2'>
+                                    <FileTypeIcon fileType={getFileExtension(file_name)} size='md' showBackground={false} />
+                                    {file_name}
+                                </div>
+                            </TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableHead>{_("Transaction Dates")}</TableHead>
+                            <TableCell>{_("{0} to {1}", [formatDate(data.doc.start_date, "Do MMMM YYYY"), formatDate(data.doc.end_date, "Do MMMM YYYY")])}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableHead>{_("Number of Transactions")}</TableHead>
+                            <TableCell>{data.doc.number_of_transactions}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableHead>{_("Total Debits")}</TableHead>
+                            <TableCell><span className='font-numeric'>{formatCurrency(flt(data.doc.total_debits, 2), data.currency)}</span> <span className='text-ink-gray-5 font-sans'>({data.doc.total_debit_transactions} {data.doc.total_debit_transactions === 1 ? _("transaction") : _("transactions")})</span></TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableHead>{_("Total Credits")}</TableHead>
+                            <TableCell><span className='font-numeric'>{formatCurrency(flt(data.doc.total_credits, 2), data.currency)}</span> <span className='text-ink-gray-5 font-sans'>({data.doc.total_credit_transactions} {data.doc.total_credit_transactions === 1 ? _("transaction") : _("transactions")})</span></TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableHead>{_("Closing Balance as of {}", [formatDate(data.doc.end_date, "Do MMMM YYYY")])}</TableHead>
+                            <TableCell className='font-numeric'>{formatCurrency(flt(data.doc.closing_balance, 2), data.currency)}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableHead>
+                                <div className='flex items-center gap-2'>
+                                    {_("Detected Amount Format")} <Tooltip>
+                                        <TooltipTrigger><InfoIcon size={16} /></TooltipTrigger>
+                                        <TooltipContent>
+                                            {_("The amount format detected in the statement file. This is used to parse the deposit and withdrawal values from each row.")}
+                                        </TooltipContent>
+                                    </Tooltip>
+                                </div>
+                            </TableHead>
+                            <TableCell>{data.doc.detected_amount_format}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableHead>
+                                <div className='flex items-center gap-2'>
+                                    {_("Detected Date Format")}
+                                    <Tooltip>
+                                        <TooltipTrigger><InfoIcon size={16} /></TooltipTrigger>
+                                        <TooltipContent>
+                                            {_("The date format detected in the statement file. This is used to parse the date values.")}
+                                        </TooltipContent>
+                                    </Tooltip>
+                                </div>
+                            </TableHead>
+                            <TableCell>
+                                {dateFormat || data.date_format} (e.g.{" "}
+                                {formatDate(new Date(), dateFormat || "YYYY-MM-DD")})
+                            </TableCell>
+                        </TableRow>
+                    </TableBody>
+                </Table>
+            </div>
+
+            {data.doc.status === "Not Started" ? <>
+
+                <ConflictingTransactions transactions={data.conflicting_transactions} />
+
+                <Separator />
+
+                <div className='flex flex-col gap-4'>
+                    <div className='flex flex-col gap-1'>
+                        <H3 className='text-base border-0 p-0'>{_("Preview Transactions")}</H3>
+                        {data.final_transactions?.length === 1 ? (
+                            <Paragraph className='text-p-sm'>{_("We've found 1 transaction in the statement file that will be imported into the system. Please review the details below and click the 'Import' button to proceed.")}</Paragraph>
+                        ) : (
+                            <Paragraph className='text-p-sm'>{_("{0} transactions will be imported into the system. Please review the details below and click the 'Import' button to proceed.", [data.final_transactions?.length?.toString() || "0"])}</Paragraph>
+                        )}
+                    </div>
+                    <div className='max-h-[400px] overflow-scroll pb-2'>
+                        <Table>
+                            <TableCaption>{_("Transactions to be imported into the system")}</TableCaption>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead className='w-8'>#</TableHead>
+                                    <TableHead>{_("Date")}</TableHead>
+                                    <TableHead>{_("Description")}</TableHead>
+                                    <TableHead>{_("Ref.")}</TableHead>
+                                    <TableHead className='text-end'>{_("Withdrawal")}</TableHead>
+                                    <TableHead className='text-end'>{_("Deposit")}</TableHead>
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                {data.final_transactions?.map((transaction, index) => (
+                                    <TableRow key={index}>
+                                        <TableCell className='w-8'>{index + 1}</TableCell>
+                                        <TableCell>{formatDate(transaction.date)}</TableCell>
+                                        <TableCell className='max-w-[200px] w-fit overflow-hidden text-ellipsis'>{transaction.description}</TableCell>
+                                        <TableCell className='max-w-[100px] w-fit overflow-hidden text-ellipsis'>{transaction.reference}</TableCell>
+                                        <TableCell className='text-end font-numeric'>{formatCurrency(transaction.withdrawal, data.currency)}</TableCell>
+                                        <TableCell className='text-end font-numeric'>{formatCurrency(transaction.deposit, data.currency)}</TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </div>
+                </div>
+            </> : null}
+        </div>
+
+    )
+}
+
+const ConflictingTransactions = ({ transactions }: { transactions: GetStatementDetailsResponse["conflicting_transactions"] }) => {
+
+    if (transactions.length === 0) {
+        return null
+    }
+
+    return <>
+        <Alert theme="red">
+            <AlertCircleIcon />
+            <AlertTitle>{_("Conflicting Transactions")}</AlertTitle>
+            <AlertDescription>
+                {transactions.length === 1 ? _("We've found 1 existing transaction in the system that conflicts with the transactions in the statement file. Are you sure you want to proceed with the import?")
+                    : _("We've found {0} existing transactions in the system that conflict with the transactions in the statement file. Are you sure you want to proceed with the import?", [transactions.length.toString()])}
+
+                <div className='py-2'>
+                    <Dialog>
+                        <DialogTrigger asChild>
+                            <Button
+                                size='sm'
+                                type='button'
+                                theme='red'
+                                variant='solid'>
+                                <span>{transactions.length > 1 ? _("View transactions") : _("View transaction")}</span>
+                            </Button>
+                        </DialogTrigger>
+                        <DialogContent className='min-w-7xl'>
+                            <DialogHeader>
+                                <DialogTitle>{_("Conflicting Transactions")}</DialogTitle>
+                                <DialogDescription>
+                                    {transactions.length === 1 ? _("We've found 1 existing transaction in the system that conflicts with the transactions in the statement file. Are you sure you want to proceed with the import?")
+                                        : _("We've found {0} existing transactions in the system that conflict with the transactions in the statement file. Are you sure you want to proceed with the import?", [transactions.length.toString()])}
+                                </DialogDescription>
+                            </DialogHeader>
+
+                            <div className='max-h-[400px] overflow-scroll pb-2'>
+                                <Table>
+                                    <TableCaption>{_("Existing transactions in the system belonging to the same bank account and date range")}</TableCaption>
+                                    <TableHeader>
+                                        <TableRow>
+                                            <TableHead>{_("Date")}</TableHead>
+                                            <TableHead>{_("Description")}</TableHead>
+                                            <TableHead>{_("Ref.")}</TableHead>
+                                            <TableHead className='text-end'>{_("Withdrawal")}</TableHead>
+                                            <TableHead className='text-end'>{_("Deposit")}</TableHead>
+                                            <TableHead></TableHead>
+                                        </TableRow>
+                                    </TableHeader>
+                                    <TableBody>
+                                        {transactions.map((transaction) => (
+                                            <TableRow key={transaction.name}>
+                                                <TableCell>{formatDate(transaction.date)}</TableCell>
+                                                <TableCell title={transaction.description} className='max-w-[200px] w-fit overflow-hidden text-ellipsis'>{transaction.description}</TableCell>
+                                                <TableCell title={transaction.reference_number} className='max-w-[100px] w-fit overflow-hidden text-ellipsis'>{transaction.reference_number ? transaction.reference_number : "-"}</TableCell>
+                                                <TableCell className='text-end font-numeric'>{formatCurrency(transaction.withdrawal, transaction.currency)}</TableCell>
+                                                <TableCell className='text-end font-numeric'>{formatCurrency(transaction.deposit, transaction.currency)}</TableCell>
+                                                <TableCell className='text-end'>
+                                                    <Tooltip>
+                                                        <TooltipTrigger asChild>
+                                                            <Button variant='link' isIconButton asChild className='text-ink-gray-5 hover:text-black p-0 h-4'>
+                                                                <a href={`/desk/bank-transaction/${transaction.name}`} target='_blank' rel='noopener noreferrer'>
+                                                                    <ExternalLinkIcon />
+                                                                </a>
+                                                            </Button>
+                                                        </TooltipTrigger>
+                                                        <TooltipContent>
+                                                            {_("Open {0} in a new tab", [transaction.name])}
+                                                        </TooltipContent>
+                                                    </Tooltip>
+
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                            </div>
+                            <DialogFooter>
+                                <DialogClose asChild>
+                                    <Button variant={'outline'} size='md' type='button'>{_("Close")}</Button>
+                                </DialogClose>
+                            </DialogFooter>
+                        </DialogContent>
+
+                    </Dialog>
+                </div>
+            </AlertDescription>
+        </Alert>
+    </>
+}
+
+export default StatementDetails

banking/src/components/features/BankStatementImporter/import_utils.ts

@@ -0,0 +1,42 @@
+import { BankStatementImportLog } from "@/types/Accounts/BankStatementImportLog"
+import { useFrappeGetCall } from "frappe-react-sdk"
+
+
+export interface GetStatementDetailsResponse {
+    doc: BankStatementImportLog,
+    conflicting_transactions: Array<{
+        name: string,
+        date: string,
+        withdrawal: number,
+        deposit: number,
+        description: string,
+        reference_number: string,
+        currency: string,
+    }>,
+    final_transactions: Array<{
+        date: string,
+        withdrawal: number,
+        deposit: number,
+        description: string,
+        reference: string,
+        transaction_type?: string,
+        debit_credit?: string,
+        included_fee?: number,
+        excluded_fee?: number,
+        party_name?: string,
+        party_account_number?: string,
+        party_iban?: string,
+    }>,
+    date_format: string,
+    raw_data: Array<Array<string>>,
+    currency: string,
+}
+
+export const useGetStatementDetails = (id: string) => {
+    return useFrappeGetCall<{ message: GetStatementDetailsResponse }>("erpnext.accounts.doctype.bank_statement_import_log.bank_statement_import_log.get_statement_details", {
+        statement_import_id: id,
+    }, undefined, {
+        revalidateOnFocus: false
+    })
+
+}

banking/src/components/features/Settings/KeyboardShortcuts.tsx

@@ -0,0 +1,115 @@
+import { Badge } from '@/components/ui/badge'
+import { Kbd, KbdGroup } from '@/components/ui/kbd'
+import { KeyboardMetaKeyIcon } from '@/components/ui/keyboard-keys'
+import { SettingsPanelDescription, SettingsPanelTitle, SettingsPanelHeader, SettingsPanelContent } from '@/components/ui/settings-dialog'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import _ from '@/lib/translate'
+import { ArrowRightLeftIcon, HistoryIcon, LandmarkIcon, ReceiptIcon, SaveIcon, SettingsIcon, ZapIcon } from 'lucide-react'
+
+const Shortcuts = [
+    {
+        shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>B</Kbd></KbdGroup>,
+        action: {
+            icon: <LandmarkIcon />,
+            label: _("Bank Entry"),
+            description: _("Record a bank journal entry for expenses, income or split transactions")
+        }
+    },
+    {
+        shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>P</Kbd></KbdGroup>,
+        action: {
+            icon: <ReceiptIcon />,
+            label: _("Record Payment"),
+            description: _("Record a payment against a customer or supplier")
+        }
+    },
+    {
+        shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>I</Kbd></KbdGroup>,
+        action: {
+            icon: <ArrowRightLeftIcon />,
+            label: _("Transfer"),
+            description: _("Record a transfer between two bank accounts")
+        }
+    },
+    {
+        shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>R</Kbd></KbdGroup>,
+        action: {
+            icon: <ZapIcon />,
+            label: _("Accept Matching Rule"),
+            description: _("Accept the rule for the selected transaction")
+        }
+    },
+    {
+        shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>S</Kbd></KbdGroup>,
+        action: {
+            icon: <SaveIcon />,
+            label: _("Save"),
+            description: _("Save the currently opened form")
+        }
+    },
+    {
+        shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>Z</Kbd></KbdGroup>,
+        action: {
+            icon: <HistoryIcon />,
+            label: _("Reconciliation History"),
+            description: _("View all reconciliation actions taken in this session")
+        }
+    },
+    {
+        shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>⇧</Kbd><Kbd>G</Kbd></KbdGroup>,
+        action: {
+            icon: <SettingsIcon />,
+            label: _("Settings"),
+            description: _("Open the settings dialog")
+        }
+    }
+]
+
+const KeyboardShortcuts = () => {
+    return (
+        <>
+            <SettingsPanelHeader>
+                <SettingsPanelTitle>{_("Keyboard Shortcuts")}</SettingsPanelTitle>
+                <SettingsPanelDescription>{_("Get around the system quickly with keyboard shortcuts")}</SettingsPanelDescription>
+            </SettingsPanelHeader>
+            <SettingsPanelContent>
+                <div className='flex flex-col gap-3'>
+                    <p className='text-p-sm text-ink-gray-6'>
+                        {_("Transaction actions work when one or more unreconciled transactions are selected.")}
+                        <br />
+                        {_("To select more than one transaction at a time, press and hold the shift key.")}
+                    </p>
+                    <Table containerClassName='dark:border-outline-gray-2'>
+                        <TableHeader>
+                            <TableRow>
+                                <TableHead>{_("Shortcut")}</TableHead>
+                                <TableHead>{_("Action")}</TableHead>
+                                <TableHead>{_("Description")}</TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {Shortcuts.map((shortcut) => (
+                                <TableRow className='hover:bg-surface-gray-2'>
+                                    <TableCell>
+                                        {shortcut.shortcut}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Badge size='lg' variant='outline'>
+                                            {shortcut.action.icon}
+                                            {shortcut.action.label}
+                                        </Badge>
+                                    </TableCell>
+                                    <TableCell>
+                                        <p className='text-p-sm text-ink-gray-6 text-wrap'>{shortcut.action.description}</p>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </div>
+            </SettingsPanelContent>
+        </>
+    )
+}
+
+export default KeyboardShortcuts

banking/src/components/features/Settings/MatchingRules.tsx

@@ -0,0 +1,46 @@
+import { Button } from '@/components/ui/button'
+import { SettingsPanelTitle, SettingsPanelHeader, SettingsPanelDescription, SettingsPanelContent } from '@/components/ui/settings-dialog'
+import _ from '@/lib/translate'
+import { PlusIcon } from 'lucide-react'
+import { useState } from 'react'
+import RuleList, { RunRulesButton } from './Rules/RuleList'
+import CreateNewRule from '../BankReconciliation/Rules/CreateNewRule'
+import EditRule from '../BankReconciliation/Rules/EditRule'
+
+const MatchingRules = () => {
+
+    const [selectedRule, setSelectedRule] = useState<string | null>(null)
+    const [isNewRule, setIsNewRule] = useState(false)
+
+
+    if (isNewRule) {
+        return <CreateNewRule onCreate={() => setIsNewRule(false)} />
+    }
+
+    if (selectedRule) {
+        return <EditRule onClose={() => setSelectedRule(null)} ruleID={selectedRule} />
+    }
+
+    return (
+        <>
+            <SettingsPanelHeader
+                actions={
+                    <div className='flex gap-2 items-center'>
+                        <RunRulesButton />
+                        <Button type='button' onClick={() => setIsNewRule(true)}><PlusIcon /> {_("Add Rule")}</Button>
+                    </div>
+                }
+            >
+                <SettingsPanelTitle>{_("Transaction Matching Rules")}</SettingsPanelTitle>
+
+                <SettingsPanelDescription>
+                    {_("Set up rules to automatically classify transactions. Drag and drop rules to reorder their priority.")}
+                </SettingsPanelDescription>
+            </SettingsPanelHeader>
+            <SettingsPanelContent>
+                <RuleList setSelectedRule={setSelectedRule} />
+            </SettingsPanelContent>
+        </>
+    )
+}
+export default MatchingRules

banking/src/components/features/Settings/Preferences.tsx

@@ -0,0 +1,261 @@
+import ErrorBanner from "@/components/ui/error-banner"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import { SettingsPanelDescription, SettingsPanelHeader, SettingsPanelTitle, SettingsPanelContent } from "@/components/ui/settings-dialog"
+import { Switch } from "@/components/ui/switch"
+import { useTheme } from "@/components/ui/theme-provider"
+import _ from "@/lib/translate"
+import { AccountsSettings } from "@/types/Accounts/AccountsSettings"
+import { useFrappeGetDoc, useFrappeUpdateDoc } from "frappe-react-sdk"
+import { toast } from "sonner"
+
+
+export const Preferences = () => {
+
+
+    const { data: accountsSettings, mutate, error: fetchError, isLoading } = useFrappeGetDoc<AccountsSettings>("Accounts Settings", "Accounts Settings", undefined, {
+        revalidateOnFocus: false
+    })
+
+    const { updateDoc, error } = useFrappeUpdateDoc<AccountsSettings>()
+
+    const onUpdate = (field: keyof AccountsSettings, value: any) => {
+        mutate(updateDoc("Accounts Settings", "Accounts Settings", {
+            [field]: value
+        }), {
+            optimisticData: {
+                ...accountsSettings as AccountsSettings,
+                [field]: value
+            },
+            revalidate: false,
+        }).then(() => {
+            toast.success(_("Preferences updated"), {
+                dismissible: true,
+                duration: 500,
+            })
+        })
+    }
+
+    return <>
+
+        <SettingsPanelHeader>
+            <SettingsPanelTitle>{_("Preferences")}</SettingsPanelTitle>
+            <SettingsPanelDescription>{_("Configure settings for the banking module")}</SettingsPanelDescription>
+        </SettingsPanelHeader>
+        <SettingsPanelContent>
+
+            <div className='flex flex-col gap-4 w-full'>
+                {fetchError && <ErrorBanner error={fetchError} />}
+                {error && <ErrorBanner error={error} />}
+
+                <div className="flex flex-col flex-1">
+
+                    <ThemeSwitcher />
+
+                    <div className="flex justify-between items-center gap-8 py-3">
+                        <div className="flex flex-col">
+                            <Label htmlFor="transfer_match_days" className="text-p-base text-ink-gray-6">{_("Number of days to match transfers")}</Label>
+                            <p className="text-p-sm text-ink-gray-5">
+                                {_("For example, if set to 4, the system will try to find matching transfer transactions in other banks 4 days before and after the transaction date. This is because transactions can clear on different days on different bank accounts.")}
+                            </p>
+                        </div>
+                        <div className="min-w-40 flex justify-end">
+                            <Select disabled={isLoading} onValueChange={(value) => onUpdate("transfer_match_days", Number(value))} value={accountsSettings?.transfer_match_days?.toString()}>
+                                <SelectTrigger id="transfer_match_days" className="min-w-32">
+                                    <SelectValue placeholder={_("Select number of days")} />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="0">{_("Same day")}</SelectItem>
+                                    <SelectItem value="1">{_("Within 1 day")}</SelectItem>
+                                    <SelectItem value="2">{_("Within 2 days")}</SelectItem>
+                                    <SelectItem value="3">{_("Within 3 days")}</SelectItem>
+                                    <SelectItem value="4">{_("Within 4 days")}</SelectItem>
+                                    <SelectItem value="5">{_("Within 5 days")}</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="flex justify-between items-center gap-8 py-3">
+                        <div className="flex flex-col">
+                            <Label htmlFor="automatically_run_rules_on_unreconciled_transactions" className="text-p-base text-ink-gray-6">{_("Automatically run rules on unreconciled transactions")}</Label>
+                            <p className="text-p-sm text-ink-gray-5">
+                                {_("This will automatically run transaction matching rules on unreconciled transactions every hour.")}
+                            </p>
+                        </div>
+                        <div className="flex justify-end">
+                            <Switch
+                                id="automatically_run_rules_on_unreconciled_transactions"
+                                className="dark:disabled:bg-surface-gray-2"
+                                disabled={isLoading}
+                                checked={accountsSettings?.automatically_run_rules_on_unreconciled_transactions === 1}
+                                onCheckedChange={(checked) => onUpdate("automatically_run_rules_on_unreconciled_transactions", checked ? 1 : 0)}
+                            />
+                        </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="flex justify-between items-center gap-8 py-3">
+                        <div className="flex flex-col">
+                            <Label htmlFor="enable_party_matching" className="text-p-base text-ink-gray-6">{_("Enable automatic party matching")}</Label>
+                            <p className="text-p-sm text-ink-gray-5">
+                                {_("The system will attempt to automatically match a party to a bank transaction based on account number or IBAN.")}
+
+                            </p>
+                        </div>
+                        <div className="flex justify-end">
+                            <Switch
+                                id="enable_party_matching"
+                                className="dark:disabled:bg-surface-gray-2"
+                                disabled={isLoading}
+                                checked={accountsSettings?.enable_party_matching === 1}
+                                onCheckedChange={(checked) => onUpdate("enable_party_matching", checked ? 1 : 0)}
+                            />
+                        </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="flex justify-between items-center gap-8 py-3">
+                        <div className="flex flex-col">
+                            <Label htmlFor="enable_fuzzy_matching" className="text-p-base text-ink-gray-6">{_("Enable party name/description fuzzy matching")}</Label>
+                            <p className="text-p-sm text-ink-gray-5">
+                                {_("If a party cannot be matched by account number or IBAN, the system will try fuzzy matching using the party name and transaction description.")}
+
+                            </p>
+                        </div>
+                        <div className="flex justify-end">
+                            <Switch
+                                id="enable_fuzzy_matching"
+                                className="dark:disabled:bg-surface-gray-2"
+                                disabled={accountsSettings?.enable_party_matching !== 1 || isLoading}
+                                checked={accountsSettings?.enable_fuzzy_matching === 1}
+                                onCheckedChange={(checked) => onUpdate("enable_fuzzy_matching", checked ? 1 : 0)}
+                            />
+                        </div>
+                    </div>
+
+                </div>
+
+
+
+                {/* <DataField
+                            name='transfer_match_days'
+                            label={_("Number of days to match transfers")}
+                            isRequired
+                            inputProps={{
+                                type: 'number',
+                                inputMode: 'numeric',
+                            }}
+                            formDescription={_("For example, if set to 4, the system will try to find matching transactions in other banks 4 days before and after the transaction date. This is because transactions can clear on different days on different bank accounts.")}
+                        /> */}
+
+            </div>
+        </SettingsPanelContent>
+    </>
+}
+
+
+const ThemeSwitcher = () => {
+
+    const { theme, setTheme } = useTheme()
+
+    const themeCards: Array<{ value: "Light" | "Dark" | "Automatic", label: string }> = [
+        {
+            value: "Light",
+            label: _("Light"),
+        },
+        {
+            value: "Dark",
+            label: _("Dark"),
+        },
+        {
+            value: "Automatic",
+            label: _("System"),
+        },
+    ]
+
+    return <div className="flex flex-col gap-3 pb-3">
+        <div className="flex flex-col">
+            <Label className="text-p-base text-ink-gray-6">{_("Theme")}</Label>
+            <p className="text-p-sm text-ink-gray-5">
+                {_("Switch between light, dark, or system theme")}
+            </p>
+        </div>
+        <div className="flex gap-3">
+            {themeCards.map((option) => {
+                const selected = theme === option.value
+
+                return (
+                    <button
+                        key={option.value}
+                        type="button"
+                        onClick={() => setTheme(option.value)}
+                        aria-pressed={selected}
+                        className={`flex-1 basis-0 min-w-0 overflow-hidden rounded-lg border cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-blue-4 ${selected ? "border-outline-gray-5" : "border-outline-gray-modals hover:border-outline-gray-4"}`}
+                    >
+                        {option.value === "Automatic" ? (
+                            <div className="flex w-full min-w-0">
+                                <ThemePreviewWindow theme="light" roundedClass="rounded-tl-[10.5px]" />
+                                <ThemePreviewWindow theme="dark" roundedClass="rounded-tr-[10.5px]" />
+                            </div>
+                        ) : (
+                            <ThemePreviewWindow theme={option.value === "Light" ? "light" : "dark"} roundedClass="rounded-t-[10.5px]" />
+                        )}
+                        <div className="flex items-center justify-between px-3 py-2 border-t border-outline-gray-modals">
+                            <div className="text-base text-ink-gray-7">{option.label}</div>
+                            <span className={`rounded-full size-3.5 ${selected ? "border-4 border-outline-gray-5" : "border border-outline-gray-4"}`} />
+                        </div>
+                    </button>
+                )
+            })}
+        </div>
+    </div>
+
+}
+
+const ThemePreviewWindow = ({ theme, roundedClass }: { theme: "light" | "dark", roundedClass: string }) => {
+    const isLight = theme === "light"
+    const frameClass = isLight ? "bg-white border-gray-100" : "bg-gray-900 border-gray-800"
+    const subtleSurfaceClass = isLight ? "bg-gray-50" : "bg-gray-800"
+    const mutedLineClass = isLight ? "bg-gray-200" : "bg-gray-700"
+    const mutedLineStrongClass = isLight ? "bg-gray-300" : "bg-gray-600"
+    const dividerClass = isLight ? "border-gray-100" : "border-gray-800"
+    const cardClass = isLight ? "bg-white border-gray-200" : "bg-gray-900 border-gray-700"
+
+    return <div className={`flex flex-1 min-w-0 pl-5 pt-3.5 ${isLight ? "bg-surface-gray-2" : "bg-surface-gray-3"} ${roundedClass}`}>
+        <div className={`w-full rounded-tl-sm border ${frameClass}`}>
+            <div className={`flex gap-[3px] py-[3px] px-1 border-b ${dividerClass}`}>
+                <div className="size-1.5 bg-[#FF5F57] rounded-full" />
+                <div className="size-1.5 bg-[#FEBC2D] rounded-full" />
+                <div className="size-1.5 bg-[#28C840] rounded-full" />
+            </div>
+            <div className="p-1.5">
+                <div className={`flex items-center gap-1.5 p-1 rounded-sm border ${subtleSurfaceClass} ${dividerClass}`}>
+                    <div className={`h-2 w-8 rounded-full ${mutedLineStrongClass}`} />
+                    <div className={`h-2 w-6 rounded-full ${mutedLineClass}`} />
+                    <div className={`h-2 w-7 rounded-full ml-auto ${mutedLineClass}`} />
+                </div>
+                <div className="grid grid-cols-2 gap-1 mt-1.5">
+                    <div className={`rounded-sm border p-1 ${cardClass}`}>
+                        <div className={`h-1.5 w-full rounded-full ${mutedLineStrongClass}`} />
+                        <div className={`h-1.5 w-4/5 rounded-full mt-1 ${mutedLineClass}`} />
+                        <div className={`h-1.5 w-3/5 rounded-full mt-1 ${mutedLineClass}`} />
+                    </div>
+                    <div className={`rounded-sm border p-1 ${cardClass}`}>
+                        <div className="flex items-center justify-between gap-1">
+                            <div className={`h-1.5 w-2/5 rounded-full ${mutedLineStrongClass}`} />
+                            {/* <div className={`h-2.5 w-5 rounded-sm border ${chipClass}`} /> */}
+                        </div>
+                        <div className={`h-1.5 w-full rounded-full mt-1 ${mutedLineClass}`} />
+                        <div className={`h-1.5 w-3/4 rounded-full mt-1 ${mutedLineClass}`} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+}

banking/src/components/features/Settings/Rules/RuleList.tsx

@@ -0,0 +1,314 @@
+import { Button } from "@/components/ui/button"
+import ErrorBanner from "@/components/ui/error-banner"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Badge } from "@/components/ui/badge"
+import _ from "@/lib/translate"
+import { BankTransactionRule } from "@/types/Accounts/BankTransactionRule"
+import { FrappeConfig, FrappeContext, useFrappeGetCall, useFrappeGetDocList, useFrappePostCall } from "frappe-react-sdk"
+import { ArrowDownRight, ArrowDownUp, ArrowUpRight, MoreVertical, Trash2, GripVertical, Play, RefreshCw, ZapIcon, CalendarSyncIcon } from "lucide-react"
+import { useContext, useState } from "react"
+import { toast } from "sonner"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, DropdownMenuCheckboxItem } from "@/components/ui/dropdown-menu"
+import {
+    DndContext,
+    closestCenter,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+    DragEndEvent,
+} from '@dnd-kit/core'
+import {
+    arrayMove,
+    SortableContext,
+    sortableKeyboardCoordinates,
+    verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import {
+    useSortable,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
+import { cn } from "@/lib/utils"
+
+const useGetRuleList = () => {
+    return useFrappeGetDocList<BankTransactionRule>("Bank Transaction Rule", {
+        fields: ["name", "rule_name", "rule_description", "transaction_type", "priority"],
+        orderBy: {
+            field: 'priority',
+            order: 'asc'
+        },
+        limit: 100
+    })
+}
+
+export const RunRulesButton = () => {
+
+    const { data } = useGetRuleList()
+
+    const { call: runRuleEvaluation, loading: isRunningRules } = useFrappePostCall('erpnext.accounts.doctype.bank_transaction_rule.bank_transaction_rule.run_rule_evaluation')
+
+    const handleRunRules = async (forceEvaluate: boolean = false) => {
+        try {
+            await runRuleEvaluation({
+                force_evaluate: forceEvaluate
+            })
+            toast.success(forceEvaluate ? _("Rules evaluation started") : _("Rules evaluation completed"))
+        } catch (error) {
+            toast.error(_("Failed to run rules evaluation"))
+            console.error("Error running rules evaluation:", error)
+        }
+    }
+
+    if (!data || data.length === 0) {
+        return null
+    }
+
+    return <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm" disabled={isRunningRules}>
+                {isRunningRules ? (
+                    <RefreshCw className="animate-spin" />
+                ) : (
+                    <Play />
+                )}
+                {isRunningRules ? _("Running...") : _("Run Rules")}
+            </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+            <DropdownMenuItem onClick={() => handleRunRules(false)} disabled={isRunningRules} title={_("Run rules on unreconciled transactions that haven't been evaluated yet")}>
+                <Play />
+                {_("Run on new transactions")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleRunRules(true)} disabled={isRunningRules} title={_("Force re-evaluate all unreconciled transactions, even if they were previously evaluated")}>
+                <RefreshCw />
+                {_("Force evaluate all")}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <AutoRunRuleItem />
+        </DropdownMenuContent>
+    </DropdownMenu>
+}
+
+const AutoRunRuleItem = () => {
+
+    const { db } = useContext(FrappeContext) as FrappeConfig
+
+    const { data: accountsSetting, mutate: setAutomaticallyRunRulesOnUnreconciledTransactions } = useFrappeGetCall("frappe.client.get_single_value", {
+        "doctype": "Accounts Settings",
+        "field": "automatically_run_rules_on_unreconciled_transactions"
+    })
+
+    const automaticallyRunRulesOnUnreconciledTransactions = accountsSetting?.message ? true : false
+
+    const onAutoClassifyTransactions = (checked: boolean) => {
+        toast.promise(db.setValue("Accounts Settings", "Accounts Settings", "automatically_run_rules_on_unreconciled_transactions", checked ? 1 : 0).then(() => {
+            setAutomaticallyRunRulesOnUnreconciledTransactions({
+                message: {
+                    automatically_run_rules_on_unreconciled_transactions: checked ? 1 : 0,
+                }
+            }, {
+                revalidate: false
+            })
+        }), {
+            loading: _("Updating..."),
+            success: checked ? _("Scheduled job enabled. Transactions will be auto classified.") : _("Scheduled job disabled. Transactions will not be auto classified."),
+            error: _("Failed to update auto classify transactions settings")
+        })
+    }
+
+
+    return <DropdownMenuCheckboxItem
+        checked={automaticallyRunRulesOnUnreconciledTransactions}
+        onCheckedChange={onAutoClassifyTransactions}>
+        <CalendarSyncIcon />
+        {_("Run rules automatically")}
+    </DropdownMenuCheckboxItem>
+}
+
+
+
+const RuleList = ({ setSelectedRule }: { setSelectedRule: (rule: string) => void }) => {
+
+    const { data, error, isLoading, mutate } = useGetRuleList()
+
+    const { db } = useContext(FrappeContext) as FrappeConfig
+
+    const sensors = useSensors(
+        useSensor(PointerSensor),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        })
+    )
+
+    const onDeleteRule = (ruleID: string) => {
+        toast.promise(db.deleteDoc("Bank Transaction Rule", ruleID).then(() => {
+            mutate()
+        }), {
+            loading: _("Deleting rule..."),
+            success: _("Rule deleted."),
+            error: _("Failed to delete rule.")
+        })
+    }
+
+    const handleDragEnd = async (event: DragEndEvent) => {
+        const { active, over } = event
+
+        if (active.id !== over?.id && data) {
+            const oldIndex = data.findIndex((rule) => rule.name === active.id)
+            const newIndex = data.findIndex((rule) => rule.name === over?.id)
+
+            const newData = arrayMove(data, oldIndex, newIndex)
+
+            // Update priorities based on new order
+            const updatePromises = newData.map((rule, index) => {
+                const newPriority = index + 1
+                if (rule.priority !== newPriority) {
+                    return db.setValue("Bank Transaction Rule", rule.name, "priority", newPriority)
+                }
+                return Promise.resolve()
+            })
+
+            try {
+                await Promise.all(updatePromises)
+                toast.success(_("Rule priorities updated"))
+                mutate() // Refresh the data
+            } catch (error) {
+                toast.error(_("Failed to update rule priorities"))
+                console.error("Error updating priorities:", error)
+            }
+        }
+    }
+
+    return (
+        <>
+            <div className="overflow-y-auto">
+                {isLoading && <div className="flex flex-col gap-2">
+                    <Skeleton className="w-full h-10" />
+                    <Skeleton className="w-full h-10" />
+                    <Skeleton className="w-full h-10" />
+                    <Skeleton className="w-full h-10" />
+                    <Skeleton className="w-full h-10" />
+                </div>}
+
+                {error && <ErrorBanner error={error} />}
+
+                {data && data.length === 0 && <Empty className="h-96">
+                    <EmptyMedia>
+                        <ZapIcon />
+                    </EmptyMedia>
+                    <EmptyHeader>
+                        <EmptyTitle>{_("No rules setup yet")}</EmptyTitle>
+                        <EmptyDescription>{_("Configure rules to save time when reconciling transactions.")}</EmptyDescription>
+                    </EmptyHeader>
+
+                </Empty>}
+
+                {data && data.length > 0 && (
+                    <DndContext
+                        sensors={sensors}
+                        collisionDetection={closestCenter}
+                        onDragEnd={handleDragEnd}
+                    >
+                        <SortableContext
+                            items={data.map(rule => rule.name)}
+                            strategy={verticalListSortingStrategy}
+                        >
+                            <ul className="space-2 divide-y divide-outline-gray-modals">
+                                {data?.map((rule) => (
+                                    <SortableRuleItem
+                                        key={rule.name}
+                                        rule={rule}
+                                        setSelectedRule={setSelectedRule}
+                                        onDeleteRule={onDeleteRule}
+                                    />
+                                ))}
+                            </ul>
+                        </SortableContext>
+                    </DndContext>
+                )}
+            </div>
+        </>
+    )
+}
+const SortableRuleItem = ({
+    rule,
+    setSelectedRule,
+    onDeleteRule
+}: {
+    rule: BankTransactionRule
+    setSelectedRule: (rule: string) => void
+    onDeleteRule: (ruleID: string) => void
+}) => {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging,
+    } = useSortable({ id: rule.name })
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+    }
+
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+
+    return (
+        <li ref={setNodeRef} style={style}>
+            <div className={cn("flex justify-between items-center py-2 my-0.5 h-full hover:bg-surface-gray-1 pe-2 rounded", isDropdownOpen && "bg-surface-gray-1")}>
+                <div className="flex items-center gap-2">
+                    <div
+                        {...attributes}
+                        {...listeners}
+                        className="cursor-grab active:cursor-grabbing p-1 rounded"
+                        title={_("Drag to reorder")}
+                    >
+                        <GripVertical className="w-4 h-4 text-ink-gray-5" />
+                    </div>
+                    <Badge theme="gray" className="font-numeric tabular-nums">
+                        {rule.priority}
+                    </Badge>
+                    <div className="flex flex-col gap-1">
+                        <div className="flex items-center gap-2">
+                            <Button
+                                variant='link'
+                                size='sm'
+                                className="p-0 h-fit text-start cursor-pointer no-underline hover:underline"
+                                onClick={() => setSelectedRule(rule.name)}>
+                                {rule.rule_name}
+                            </Button>
+                            <div title={rule.transaction_type === "Any" ? _("Applies to withdrawals and deposits") : rule.transaction_type === "Withdrawal" ? _("Applies to withdrawals") : _("Applies to deposits")}>
+                                {rule.transaction_type === "Any" ? <ArrowDownUp className="text-ink-gray-5 w-4 h-4" /> : rule.transaction_type === "Withdrawal" ? <ArrowUpRight className="text-ink-red-3 w-5 h-5" /> : <ArrowDownRight className="text-ink-green-3 w-5 h-5" />}
+                            </div>
+                        </div>
+                        <span className="text-sm text-ink-gray-5">
+                            {rule.rule_description}
+                        </span>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-2 h-full justify-center">
+                    <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant='ghost' isIconButton className="hover:bg-transparent">
+                                <MoreVertical />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuItem onClick={() => onDeleteRule(rule.name)}>
+                                <Trash2 />
+                                {_("Delete")}
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </div>
+            </div>
+        </li>
+    )
+}
+
+export default RuleList

banking/src/components/features/Settings/Settings.tsx

@@ -0,0 +1,95 @@
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogTrigger } from '@/components/ui/dialog'
+import {
+    SettingsDialog,
+    SettingsPanel,
+    SettingsPanels,
+    SettingsTabGroup,
+    SettingsTabItem,
+    SettingsTabs,
+} from '@/components/ui/settings-dialog'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import _ from '@/lib/translate'
+import { KeyboardIcon, SettingsIcon, SlidersVerticalIcon, ZapIcon } from 'lucide-react'
+import { useState } from 'react'
+import { Preferences } from './Preferences'
+import MatchingRules from './MatchingRules'
+import KeyboardShortcuts from './KeyboardShortcuts'
+import { useHotkeys } from 'react-hotkeys-hook'
+
+const Settings = () => {
+
+    const [isOpen, setIsOpen] = useState(false)
+
+    useHotkeys('shift+meta+g', () => {
+        setIsOpen(x => !x)
+    }, {
+        enabled: true,
+        preventDefault: true,
+        enableOnFormTags: false
+    })
+
+    return (
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <DialogTrigger asChild>
+                        <Button variant={'outline'} isIconButton size='md'>
+                            <SettingsIcon />
+                        </Button>
+                    </DialogTrigger>
+                </TooltipTrigger>
+                <TooltipContent>
+                    {_("Settings")}
+                </TooltipContent>
+            </Tooltip>
+            <SettingsDialog defaultValue="preferences" onClose={() => setIsOpen(false)}>
+                <SettingsTabs>
+                    <SettingsTabGroup header={_("Settings")}>
+                        <SettingsTabItem
+                            icon={<SlidersVerticalIcon />}
+                            label={_("Preferences")}
+                            value="preferences"
+                        />
+                        <SettingsTabItem
+                            icon={<ZapIcon />}
+                            label={_("Matching Rules")}
+                            value="rules"
+                        />
+                        {/* <SettingsTabItem
+                            icon={<LandmarkIcon />}
+                            label={_("Bank Accounts")}
+                            value="bank-accounts"
+                        />
+                        <SettingsTabItem
+                            icon={<ListIcon />}
+                            label={_("Masters")}
+                            value="masters"
+                        /> */}
+                        <SettingsTabItem
+                            icon={<KeyboardIcon />}
+                            label={_("Keyboard Shortcuts")}
+                            value="keyboard-shortcuts"
+                        />
+                    </SettingsTabGroup>
+                </SettingsTabs>
+
+                <SettingsPanels>
+                    <SettingsPanel value="preferences">
+                        <Preferences />
+                    </SettingsPanel>
+                    <SettingsPanel value="rules">
+                        <MatchingRules />
+                    </SettingsPanel>
+                    <SettingsPanel value="bank-accounts" />
+                    <SettingsPanel value="masters" />
+                    <SettingsPanel value="keyboard-shortcuts">
+                        <KeyboardShortcuts />
+                    </SettingsPanel>
+                </SettingsPanels>
+            </SettingsDialog>
+        </Dialog >
+    )
+}
+
+export default Settings

banking/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,196 @@
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black-200 dark:bg-black-700",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "bg-surface-modal shadow-xl rounded-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 p-6 duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-2xl leading-6 text-ink-gray-8 font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-ink-gray-7 text-p-base", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "bg-surface-gray-1 mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = "solid",
+  size = "md",
+  theme = "red",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size" | "theme">) {
+  return (
+    <Button variant={variant} size={size} theme={theme} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "md",
+  theme = "gray",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size" | "theme">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

banking/src/components/ui/alert.tsx

@@ -0,0 +1,104 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3.5 text-base grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-1 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        subtle: "bg-surface-white",
+        outline: "border border-outline-gray-3",
+      },
+      theme: {
+        gray: "text-ink-gray-8",
+        blue: "text-ink-blue-3",
+        green: "text-ink-green-3",
+        red: "text-ink-red-3",
+        amber: "text-ink-amber-3",
+      }
+    },
+    compoundVariants: [
+      // Subtle alerts
+      {
+        theme: "gray",
+        variant: "subtle",
+        className: "bg-surface-gray-2 border-outline-gray-1"
+      },
+      {
+        theme: "blue",
+        variant: "subtle",
+        className: "bg-surface-blue-2 border-surface-blue-2"
+      },
+      {
+        theme: "green",
+        variant: "subtle",
+        className: "bg-surface-green-2 border-surface-green-2"
+      },
+      {
+        theme: "red",
+        variant: "subtle",
+        className: "bg-surface-red-2 border-surface-red-2"
+      },
+      {
+        theme: "amber",
+        variant: "subtle",
+        className: "bg-surface-amber-2 border-surface-amber-2"
+      }
+    ],
+    defaultVariants: {
+      variant: "subtle",
+      theme: "gray",
+    },
+  }
+)
+
+export type AlertProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariants>
+
+function Alert({
+  className,
+  variant,
+  theme,
+  ...props
+}: AlertProps) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant, theme }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 min-h-4 text-ink-gray-8 font-medium text-p-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-ink-gray-6 col-start-2 grid justify-items-start gap-1 text-p-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

banking/src/components/ui/badge.tsx

@@ -0,0 +1,188 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center select-none rounded-full whitespace-nowrap gap-1 w-fit shrink-0 [&>svg]:pointer-events-none transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        solid: "",
+        subtle: "",
+        outline: "bg-transparent border",
+        ghost: "bg-transparent",
+      },
+      size: {
+        sm: 'h-4 text-xs px-1.5 [&>svg]:size-2.5',
+        md: 'h-5 text-xs px-1.5 [&>svg]:size-3',
+        lg: 'h-6 text-sm px-2 [&>svg]:size-3',
+      },
+      theme: {
+        gray: "",
+        blue: "",
+        green: "",
+        red: "",
+        orange: "",
+        violet: "",
+      }
+    },
+    compoundVariants: [
+      // Solid badges
+      {
+        variant: "solid",
+        theme: "gray",
+        className: "text-ink-white bg-surface-gray-7 [a&]:hover:bg-surface-gray-8"
+      },
+      {
+        variant: "solid",
+        theme: "blue",
+        className: "text-ink-blue-1 bg-surface-blue-5 [a&]:hover:bg-surface-blue-6"
+      },
+      {
+        variant: "solid",
+        theme: "green",
+        className: "text-ink-green-1 bg-surface-green-5 [a&]:hover:bg-surface-green-6"
+      },
+      {
+        variant: "solid",
+        theme: "orange",
+        className: "text-ink-amber-1 bg-surface-amber-5 [a&]:hover:bg-surface-amber-6"
+      },
+      {
+        variant: "solid",
+        theme: "red",
+        className: "text-ink-red-1 bg-surface-red-5 [a&]:hover:bg-surface-red-6"
+      },
+      {
+        variant: "solid",
+        theme: "violet",
+        className: "text-ink-violet-1 bg-surface-violet-5 [a&]:hover:bg-surface-violet-6"
+      },
+      // Subtle badge
+      {
+        variant: "subtle",
+        theme: "gray",
+        className: "text-ink-gray-6 bg-surface-gray-2 [a&]:hover:bg-surface-gray-3"
+      },
+      {
+        variant: "subtle",
+        theme: "blue",
+        className: "text-ink-blue-4 bg-surface-blue-2 [a&]:hover:bg-surface-blue-3"
+      },
+      {
+        variant: "subtle",
+        theme: "green",
+        className: "text-ink-green-4 bg-surface-green-2 [a&]:hover:bg-surface-green-3"
+      },
+      {
+        variant: "subtle",
+        theme: "orange",
+        className: "text-ink-amber-4 bg-surface-amber-2 [a&]:hover:bg-surface-amber-3"
+      },
+      {
+        variant: "subtle",
+        theme: "red",
+        className: "text-ink-red-4 bg-surface-red-2 [a&]:hover:bg-surface-red-3"
+      },
+      {
+        variant: "subtle",
+        theme: "violet",
+        className: "text-ink-violet-4 bg-surface-violet-2 [a&]:hover:bg-surface-violet-3"
+      },
+      // Outline badge
+      {
+        variant: "outline",
+        theme: "gray",
+        className: "text-ink-gray-6 border-outline-gray-2 [a&]:hover:bg-surface-gray-2"
+      },
+      {
+        variant: "outline",
+        theme: "blue",
+        className: "text-ink-blue-4 border-outline-blue-2 [a&]:hover:bg-surface-blue-2"
+      },
+      {
+        variant: "outline",
+        theme: "green",
+        className: "text-ink-green-4 border-outline-green-2 [a&]:hover:bg-surface-green-2"
+      },
+      {
+        variant: "outline",
+        theme: "orange",
+        className: "text-ink-amber-4 border-outline-amber-2 [a&]:hover:bg-surface-amber-2"
+      },
+      {
+        variant: "outline",
+        theme: "red",
+        className: "text-ink-red-4 border-outline-red-2 [a&]:hover:bg-surface-red-2"
+      },
+      {
+        variant: "outline",
+        theme: "violet",
+        className: "text-ink-violet-4 border-outline-violet-2 [a&]:hover:bg-surface-violet-2"
+      },
+      // Ghost badge
+      {
+        variant: "ghost",
+        theme: "gray",
+        className: "text-ink-gray-6"
+      },
+      {
+        variant: "ghost",
+        theme: "blue",
+        className: "text-ink-blue-4"
+      },
+      {
+        variant: "ghost",
+        theme: "green",
+        className: "text-ink-green-4"
+      },
+      {
+        variant: "ghost",
+        theme: "orange",
+        className: "text-ink-amber-4"
+      },
+      {
+        variant: "ghost",
+        theme: "red",
+        className: "text-ink-red-4"
+      },
+      {
+        variant: "ghost",
+        theme: "violet",
+        className: "text-ink-violet-4"
+      }
+    ],
+    defaultVariants: {
+      variant: "subtle",
+      size: "md",
+      theme: "gray",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "subtle",
+  size = "md",
+  theme = "gray",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      data-size={size}
+      data-theme={theme}
+      className={cn(badgeVariants({ variant, size, theme }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

banking/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { MoreHorizontal } from "lucide-react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-ink-gray-5 flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("text-ink-gray-5 font-medium text-lg hover:text-ink-gray-7 active:text-ink-gray-7 transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-ink-gray-8 text-lg font-medium text-balance tracking-wide", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <span className="text-ink-gray-4 text-base">/</span>}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

banking/src/components/ui/button.tsx

@@ -0,0 +1,263 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap transition-all disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:shadow-focus-red aria-invalid:border-outline-red-3",
+  {
+    variants: {
+      variant: {
+        solid: "text-ink-white",
+        subtle: "",
+        ghost: "bg-transparent",
+        outline: "bg-surface-white border",
+        link: "bg-transparent underline-offset-4 underline",
+      },
+      size: {
+        sm: "h-7 text-base px-2 rounded [&_svg:not([class*='size-'])]:size-4",
+        md: "h-8 text-base font-medium px-2.5 rounded [&_svg:not([class*='size-'])]:size-4.5",
+        lg: "h-10 text-lg font-medium px-3 rounded-md [&_svg:not([class*='size-'])]:size-5",
+        xl: "h-11.5 text-xl font-medium px-3.5 rounded-lg [&_svg:not([class*='size-'])]:size-6",
+        "2xl": "h-13 text-2xl font-medium px-3.5 rounded-xl [&_svg:not([class*='size-'])]:size-6",
+      },
+      theme: {
+        gray: "focus-visible:shadow-focus-gray",
+        blue: "focus-visible:shadow-focus-blue",
+        green: "focus-visible:shadow-focus-green",
+        red: "focus-visible:shadow-focus-red",
+        amber: "focus-visible:shadow-focus-amber",
+        violet: "focus-visible:shadow-focus-violet",
+      },
+      isIconButton: {
+        true: "px-0",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Icon only buttons - Sizes
+      {
+        isIconButton: true,
+        size: "sm",
+        className: "size-7"
+      },
+      {
+        isIconButton: true,
+        size: "md",
+        className: "size-8"
+      },
+      {
+        isIconButton: true,
+        size: "lg",
+        className: "size-10"
+      },
+      {
+        isIconButton: true,
+        size: "xl",
+        className: "size-11.5"
+      },
+      {
+        isIconButton: true,
+        size: "2xl",
+        className: "size-13"
+      },
+      // Solid buttons
+      {
+        variant: "solid",
+        theme: "gray",
+        className: "bg-surface-gray-7 hover:bg-surface-gray-6 active:bg-surface-gray-5 disabled:bg-surface-gray-2 disabled:text-ink-gray-4"
+      },
+      {
+        variant: "solid",
+        theme: "blue",
+        className: "bg-surface-blue-5 text-ink-blue-1 hover:bg-surface-blue-6 active:bg-surface-blue-7 disabled:bg-surface-blue-2 disabled:text-ink-blue-2"
+      },
+      {
+        variant: "solid",
+        theme: "green",
+        className: "bg-surface-green-5 text-ink-green-1 hover:bg-surface-green-6 active:bg-surface-green-7 disabled:bg-surface-green-2 disabled:text-ink-green-2"
+      },
+      {
+        variant: "solid",
+        theme: "red",
+        className: "bg-surface-red-5 text-ink-red-1 hover:bg-surface-red-6 active:bg-surface-red-7 disabled:bg-surface-red-2 disabled:text-ink-red-2"
+      },
+      {
+        variant: "solid",
+        theme: "violet",
+        className: "bg-surface-violet-5 text-ink-violet-1 hover:bg-surface-violet-6 active:bg-surface-violet-7 disabled:bg-surface-violet-2 disabled:text-ink-violet-2"
+      },
+      {
+        variant: "solid",
+        theme: "amber",
+        className: "bg-surface-amber-5 text-ink-amber-1 hover:bg-surface-amber-6 active:bg-surface-amber-7 disabled:bg-surface-amber-2 disabled:text-ink-amber-2"
+      },
+      // Subtle Buttons
+      {
+        variant: "subtle",
+        theme: "gray",
+        className: "text-ink-gray-7 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 disabled:bg-surface-gray-2 disabled:text-ink-gray-4"
+      },
+      {
+        variant: "subtle",
+        theme: "blue",
+        className: "text-ink-blue-4 bg-surface-blue-2 hover:bg-surface-blue-3 active:bg-surface-blue-4 disabled:bg-surface-blue-2 disabled:text-ink-blue-2"
+      },
+      {
+        variant: "subtle",
+        theme: "green",
+        className: "text-ink-green-4 bg-surface-green-2 hover:bg-surface-green-3 active:bg-surface-green-4 disabled:bg-surface-green-2 disabled:text-ink-green-2"
+      },
+      {
+        variant: "subtle",
+        theme: "red",
+        className: "text-ink-red-4 bg-surface-red-2 hover:bg-surface-red-3 active:bg-surface-red-4 disabled:bg-surface-red-2 disabled:text-ink-red-2"
+      },
+      {
+        variant: "subtle",
+        theme: "violet",
+        className: "text-ink-violet-4 bg-surface-violet-2 hover:bg-surface-violet-3 active:bg-surface-violet-4 disabled:bg-surface-violet-2 disabled:text-ink-violet-2"
+      },
+      {
+        variant: "subtle",
+        theme: "amber",
+        className: "text-ink-amber-4 bg-surface-amber-2 hover:bg-surface-amber-3 active:bg-surface-amber-4 disabled:bg-surface-amber-2 disabled:text-ink-amber-2"
+      },
+      // Outline buttons
+      {
+        variant: "outline",
+        theme: "gray",
+        className:
+          "text-ink-gray-7 border-outline-gray-2 hover:border-outline-gray-3 active:border-outline-gray-4 active:bg-surface-gray-4 disabled:bg-surface-gray-2 disabled:text-ink-gray-4 disabled:border-outline-gray-2"
+      },
+      {
+        variant: "outline",
+        theme: "blue",
+        className:
+          "text-ink-blue-4 border-outline-blue-2 hover:border-outline-blue-3 active:border-outline-blue-4 active:bg-surface-blue-4 disabled:bg-surface-blue-2 disabled:text-ink-blue-2 disabled:border-outline-blue-2"
+      },
+      {
+        variant: "outline",
+        theme: "green",
+        className:
+          "text-ink-green-4 border-outline-green-2 hover:border-outline-green-3 active:border-outline-green-4 active:bg-surface-green-4 disabled:bg-surface-green-2 disabled:text-ink-green-2 disabled:border-outline-green-2"
+      },
+      {
+        variant: "outline",
+        theme: "red",
+        className:
+          "text-ink-red-4 border-outline-red-2 hover:border-outline-red-3 active:border-outline-red-4 active:bg-surface-red-4 disabled:bg-surface-red-2 disabled:text-ink-red-2 disabled:border-outline-red-2"
+      },
+      {
+        variant: "outline",
+        theme: "violet",
+        className: "text-ink-violet-4 border-outline-violet-2 hover:border-outline-violet-3 active:border-outline-violet-4 active:bg-surface-violet-4 disabled:bg-surface-violet-2 disabled:text-ink-violet-2 disabled:border-outline-violet-2"
+      },
+      {
+        variant: "outline",
+        theme: "amber",
+        className: "text-ink-amber-4 border-outline-amber-2 hover:border-outline-amber-3 active:border-outline-amber-4 active:bg-surface-amber-4 disabled:bg-surface-amber-2 disabled:text-ink-amber-2 disabled:border-outline-amber-2"
+      },
+      // Ghost buttons
+      {
+        variant: "ghost",
+        theme: "gray",
+        className:
+          "text-ink-gray-7 hover:bg-surface-gray-3 active:bg-surface-gray-4 disabled:text-ink-gray-4"
+      },
+      {
+        variant: "ghost",
+        theme: "blue",
+        className:
+          "text-ink-blue-4 hover:bg-surface-blue-3 active:bg-surface-blue-4 disabled:text-ink-blue-2"
+      },
+      {
+        variant: "ghost",
+        theme: "green",
+        className:
+          "text-ink-green-4 hover:bg-surface-green-3 active:bg-surface-green-4 disabled:text-ink-green-2"
+      },
+      {
+        variant: "ghost",
+        theme: "red",
+        className:
+          "text-ink-red-4 hover:bg-surface-red-3 active:bg-surface-red-4 disabled:text-ink-red-2"
+      },
+      {
+        variant: "ghost",
+        theme: "violet",
+        className: "text-ink-violet-4 hover:bg-surface-violet-3 active:bg-surface-violet-4 disabled:text-ink-violet-2"
+      },
+      {
+        variant: "ghost",
+        theme: "amber",
+        className: "text-ink-amber-4 hover:bg-surface-amber-3 active:bg-surface-amber-4 disabled:text-ink-amber-2"
+      },
+      //Link buttons
+      {
+        variant: "link",
+        theme: "gray",
+        className: "text-ink-gray-8 hover:text-ink-gray-8 active:text-ink-gray-8 disabled:text-ink-gray-4"
+      },
+      {
+        variant: "link",
+        theme: "blue",
+        className: "text-ink-blue-3 hover:text-ink-blue-4 active:text-ink-blue-4 disabled:text-ink-blue-link"
+      },
+      {
+        variant: "link",
+        theme: "green",
+        className: "text-ink-green-3 hover:text-ink-green-4 active:text-ink-green-4 disabled:text-ink-green-2"
+      },
+      {
+        variant: "link",
+        theme: "red",
+        className: "text-ink-red-3 hover:text-ink-red-4 active:text-red-4 disabled:text-ink-red-2"
+      },
+      {
+        variant: "link",
+        theme: "violet",
+        className: "text-ink-violet-3 hover:text-ink-violet-4 active:text-ink-violet-4 disabled:text-ink-violet-2"
+      },
+      {
+        variant: "link",
+        theme: "amber",
+        className: "text-ink-amber-3 hover:text-ink-amber-4 active:text-ink-amber-4 disabled:text-ink-amber-2"
+      }
+    ],
+    defaultVariants: {
+      variant: "solid",
+      size: "sm",
+      theme: "gray",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "solid",
+  size = "sm",
+  theme = "gray",
+  isIconButton = false,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      data-theme={theme}
+      className={cn(buttonVariants({ variant, size, theme, className, isIconButton }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

banking/src/components/ui/calendar.tsx

@@ -0,0 +1,218 @@
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+} from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-surface-modal group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-outline-gray-1 border border-outline-gray-2 shadow-xs has-focus:ring-outline-gray-1/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-surface-modal inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md ps-2 pe-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-ink-gray-5 [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-ink-gray-5 rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-ink-gray-5",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-e-md group/day aspect-square select-none",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-s-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-s-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-s-md bg-surface-gray-1",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-e-md bg-surface-gray-1", defaultClassNames.range_end),
+        today: cn(
+          "bg-surface-gray-1 text-ink-gray-8 rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-ink-gray-5 aria-selected:text-ink-gray-5",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-ink-gray-5 opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      isIconButton
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-surface-gray-7 data-[selected-single=true]:text-ink-white data-[range-middle=true]:bg-surface-gray-1 data-[range-middle=true]:text-ink-gray-8 data-[range-start=true]:bg-surface-gray-7 data-[range-start=true]:text-ink-white data-[range-end=true]:bg-surface-gray-7 data-[range-end=true]:text-ink-white group-data-[focused=true]/day:border-outline-gray-1 group-data-[focused=true]/day:ring-outline-gray-1/50 dark:hover:text-ink-gray-8 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-e-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-s-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

banking/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-surface-cards text-ink-gray-8 flex flex-col gap-6 rounded-xl border py-6 shadow-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-ink-gray-5 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

banking/src/components/ui/checkbox.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { CheckIcon } from "lucide-react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  size = "md",
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root> & { size?: "sm" | "md" }) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border data-[state=checked]:text-ink-white shrink-0 transition-shadow outline-none align-middle",
+        "rounded-[4px]",
+        "border-ink-gray-4 data-[state=checked]:bg-ink-gray-8 data-[state=checked]:border-ink-gray-8",
+        // Hover state
+        "hover:border-ink-gray-5 hover:shadow-checkbox-hover hover:data-[state=checked]:bg-ink-gray-7 hover:data-[state=checked]:border-ink-gray-7",
+        // Active state
+        "active:border-ink-gray-6 active:data-[state=checked]:bg-ink-gray-6 active:data-[state=checked]:border-ink-gray-6",
+        // Focus state
+        "focus-visible:border-ink-gray-8 focus-visible:shadow-focus-gray focus-visible:data-[state=checked]:bg-ink-gray-8 focus-visible:data-[state=checked]:border-ink-gray-8",
+        // Disabled state
+        "disabled:border-ink-gray-3 disabled:bg-surface-gray-1 disabled:cursor-not-allowed disabled:data-[state=checked]:bg-surface-gray-3 disabled:data-[state=checked]:border-surface-gray-3 disabled:text-ink-gray-4",
+        // Invalid state
+        "aria-invalid:border-red-500",
+        size === "sm" ? "size-3.5" : "size-4",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className={size === 'sm' ? "size-2.5" : "size-3"} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

banking/src/components/ui/command.tsx

@@ -0,0 +1,183 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-surface-modal flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-ink-gray-4 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex items-center gap-2 m-1.5 h-8 rounded px-2.5 py-2 border border-transparent transition-all bg-surface-gray-2 not-focus-within:hover:bg-surface-gray-3 text-ink-gray-7 focus-within:bg-surface-white focus-within:border-outline-gray-4 focus-within:shadow-focus-gray"
+    >
+      <SearchIcon className="size-4 shrink-0 text-ink-gray-4" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "flex w-full bg-transparent outline-hidden text-base placeholder:text-ink-gray-4",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-ink-gray-6 [&_[cmdk-group-heading]]:text-ink-gray-4 overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-outline-gray-modals mx-0.5 h-px my-1", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "py-1.5 px-2 flex cursor-default text-ink-gray-6 items-center gap-2 rounded text-base relative outline-hidden select-none",
+        "data-[selected=true]:bg-surface-gray-2 [&_svg:not([class*='text-'])]:text-ink-gray-6 data-[disabled=true]:pointer-events-none data-[disabled=true]:text-ink-gray-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-ink-gray-5 ms-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

banking/src/components/ui/dialog.tsx

@@ -0,0 +1,156 @@
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black-200 dark:bg-black-700",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-surface-modal shadow-xl rounded-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 p-6 duration-200 outline-none sm:max-w-lg max-h-[90vh] overflow-y-auto",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="data-[state=open]:bg-surface-gray-1 data-[state=open]:text-ink-gray-8 absolute top-4 ltr:right-4 rtl:left-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon className="w-4 h-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 sm:text-start", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-2xl leading-6 text-ink-gray-8 font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-ink-gray-7 text-p-base", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

banking/src/components/ui/direction.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Direction } from "radix-ui"
+
+function DirectionProvider({
+    dir,
+    direction,
+    children,
+}: React.ComponentProps<typeof Direction.DirectionProvider> & {
+    direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
+}) {
+    return (
+        <Direction.DirectionProvider dir={direction ?? dir}>
+            {children}
+        </Direction.DirectionProvider>
+    )
+}
+
+const useDirection = Direction.useDirection
+
+export { DirectionProvider, useDirection }

banking/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,262 @@
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-surface-modal min-w-32 rounded-lg p-1 shadow-xl",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+const BASE_ITEM_STYLES = `outline-hidden select-none relative flex cursor-default items-center 
+gap-2 rounded px-2 py-1.5 text-base text-ink-gray-6 data-[variant=destructive]:text-ink-red-3 
+data-[variant=destructive]:*:[svg]:text-ink-red-3! [&_svg:not([class*='text-'])]:text-ink-gray-6 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 
+data-disabled:pointer-events-none data-disabled:text-ink-gray-3 data-disabled:*:[svg]:text-ink-gray-3! focus:bg-surface-gray-2 data-inset:ps-8`
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        BASE_ITEM_STYLES,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        BASE_ITEM_STYLES,
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      {children}
+      <span className="pointer-events-none flex size-4 ms-2 px-2 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        BASE_ITEM_STYLES,
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <span className="pointer-events-none flex size-4 ps-2 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium text-ink-gray-4 data-inset:ps-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-outline-gray-modals my-1 h-px mx-0.5", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-ink-gray-5 ms-auto text-xs tabular-nums",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        BASE_ITEM_STYLES,
+        "data-[state=open]:bg-surface-gray-3",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ms-auto cn-rtl-flip size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-surface-modal rounded-lg p-1 shadow-xl min-w-32 text-ink-gray-6 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

banking/src/components/ui/empty.tsx

@@ -0,0 +1,85 @@
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 min-h-64 flex-1 flex-col items-center justify-center gap-3 rounded-lg p-6 text-center text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex flex-col items-center gap-1 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-icon"
+      className={cn("flex justify-center items-center shrink-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-transparent size-7.5 [&_svg:not([class*='size-'])]:size-7.5 [&_svg:not([class*='text-'])]:text-ink-gray-5", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-lg font-medium text-ink-gray-7", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-center text-p-base text-ink-gray-6 [&>a:hover]:text-ink-gray-7 [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}

banking/src/components/ui/error-banner.tsx

@@ -0,0 +1,64 @@
+import { getErrorMessages } from '@/lib/frappe'
+import { FrappeError } from 'frappe-react-sdk'
+import { Alert, AlertDescription, AlertProps, AlertTitle } from '@/components/ui/alert'
+import { AlertCircle } from 'lucide-react'
+import MarkdownRenderer from '@/components/ui/markdown'
+import _ from '@/lib/translate'
+import { useMemo } from 'react'
+
+type ErrorBannerProps = AlertProps & {
+    error?: FrappeError | null,
+    overrideHeading?: string,
+}
+
+interface ParsedErrorMessage {
+    message: string,
+    title?: string,
+    indicator?: string,
+}
+
+const parseHeading = (message?: ParsedErrorMessage) => {
+    if (message?.title === 'Message' || message?.title === 'Error') return "There was an error."
+    return message?.title
+}
+
+const wrapLooseListItemsWithUl = (html: string): string => {
+    // Regex matches consecutive <li>...</li> blocks not wrapped in <ul> or <ol>
+    // It wraps them in a <ul> if not already wrapped.
+    return html.replace(/(?:^|[^>])((<li[\s\S]*?<\/li>)+)(?![\s\S]*?<\/ul>)(?![\s\S]*?<\/ol>)/g, (match, p1) => {
+        // Check if the match already has <ul> or <ol> wrapping (simple check)
+        if (/^<ul>/.test(p1) || /^<ol>/.test(p1)) {
+            return match // Already wrapped, keep as is
+        }
+        return match.replace(p1, `<ul>${p1}</ul>`)
+    })
+}
+
+const ErrorBanner = ({ error, overrideHeading, ...props }: ErrorBannerProps) => {
+
+
+    //exc_type: "ValidationError" or "PermissionError" etc
+    // exc: With entire traceback - useful for reporting maybe
+    // httpStatus and httpStatusText - not needed
+    // _server_messages: Array of messages - useful for showing to user
+    // console.log(JSON.parse(error?._server_messages!))
+
+    const messages = useMemo(() => {
+        return getErrorMessages(error)
+    }, [error])
+
+    return (
+        <Alert theme={messages[0]?.indicator === 'yellow' ? 'amber' : "red"} {...props}>
+            <AlertCircle />
+            <AlertTitle>{overrideHeading ?? parseHeading(messages[0])}</AlertTitle>
+            <AlertDescription>
+                {messages.map((m, i) => {
+                    const safeMessage = wrapLooseListItemsWithUl(m.message)
+                    return <MarkdownRenderer content={safeMessage} key={i} />
+                })}
+            </AlertDescription>
+        </Alert>
+    )
+}
+
+export default ErrorBanner

banking/src/components/ui/file-dropzone.tsx

@@ -0,0 +1,289 @@
+import _ from '@/lib/translate'
+import { Dispatch, SetStateAction, useCallback } from 'react'
+import { Accept, useDropzone } from 'react-dropzone'
+import { cn } from '@/lib/utils'
+import { formatBytes, getFileExtension } from '@/lib/file'
+import { Button } from './button'
+import { Trash2Icon } from 'lucide-react'
+
+type Props = {
+    files: File[],
+    setFiles?: Dispatch<SetStateAction<File[]>>
+    accept?: Accept,
+    multiple?: boolean
+    onDrop?: (acceptedFiles: File[]) => void,
+    onUpdate?: VoidFunction
+    className?: string
+}
+
+export const FileDropzone = ({ files, setFiles, accept, multiple = true, onDrop, className, onUpdate }: Props) => {
+
+    const onFileDrop = useCallback((acceptedFiles: File[]) => {
+        // Do something with the files
+        if (multiple) {
+            setFiles?.((prev) => [...prev, ...acceptedFiles])
+        } else {
+            setFiles?.(acceptedFiles)
+        }
+        onDrop?.(acceptedFiles)
+        onUpdate?.()
+
+    }, [setFiles, onDrop, multiple, onUpdate])
+    const { getRootProps, getInputProps } = useDropzone({ onDrop: onFileDrop, accept, multiple })
+    return (
+        <div {...getRootProps()} className={cn('border border-outline-gray-2 border-dashed p-4 rounded bg-surface-gray-1 focus-within:bg-surface-gray-2 focus-within:border-outline-gray-4 focus-within:outline-none', className)}>
+            <input {...getInputProps()} />
+            {files.length === 0 ? <p className='text-sm text-ink-gray-5 text-center h-8 flex items-center justify-center'>{multiple ? _("Drop some files here, or click to select files") : _("Drop a file here, or click to select a file")}</p> : null}
+            <div className='flex flex-col gap-4'>
+                {files.map(f => <div key={f.name} className='flex justify-between items-center'>
+                    <div className='flex items-center gap-2'>
+                        <FileTypeIcon fileType={getFileExtension(f.name)} size='sm' />
+                        <div className='flex flex-col gap-0.5'>
+                            <span className='text-ink-gray-7 text-sm'>{f.name}</span>
+                            <span className='text-ink-gray-5 text-xs'>{formatBytes(f.size)}</span>
+                        </div>
+                    </div>
+                    <Button type='button' variant='ghost' isIconButton
+                        className='text-ink-gray-5 hover:text-ink-gray-8 hover:bg-transparent'
+                        onClick={(e) => {
+                            e.stopPropagation()
+                            setFiles?.(files.filter(file => file.name !== f.name))
+                            onUpdate?.()
+                        }}>
+                        <Trash2Icon className='w-4 h-4' />
+                    </Button>
+                </div>)}
+            </div>
+        </div>
+    )
+}
+
+interface FileTypeIconProps {
+    fileType: string
+    size?: 'sm' | 'md' | 'lg' | 'xl'
+    className?: string
+    showBackground?: boolean
+}
+
+const sizeClasses = {
+    sm: 'h-8 w-8',
+    md: 'h-10 w-10',
+    lg: 'h-12 w-12',
+    xl: 'h-16 w-16'
+}
+
+const iconSizeClasses = {
+    sm: 'h-5 w-5',
+    md: 'h-6 w-6',
+    lg: 'h-8 w-8',
+    xl: 'h-10 w-10'
+}
+
+// Special sizing for PowerPoint icon due to different viewBox
+const pptIconSizeClasses = {
+    sm: 'h-3.5 w-3.5',
+    md: 'h-4 w-4',
+    lg: 'h-5 w-5',
+    xl: 'h-6 w-6'
+}
+
+export const FileTypeIcon = ({
+    fileType,
+    size = 'md',
+    className,
+    showBackground = true
+}: FileTypeIconProps) => {
+
+
+    const containerClass = cn(sizeClasses[size], className)
+
+    const RenderIcon = ({ className }: { className?: string }) => {
+        switch (fileType.toLowerCase()) {
+            case 'pdf':
+                return (
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className={cn("text-white", iconSizeClasses[size], className)}>
+                        <path d="M7 22.9c.1-.6.5-1 .9-1.4.5-.5 1.1-.8 1.8-1.2.7-.4 1.4-.7 2.1-1 .1 0 .2-.1.2-.2.6-1.2 1.2-2.4 1.7-3.6.3-.7.5-1.4.8-2.1v-.1c-.3-.7-.6-1.5-.7-2.3-.2-.8-.2-1.6-.1-2.4.1-.5.4-.9.8-1.3.1-.1.3-.1.5-.1h.8c.2 0 .4.1.5.3.3.2.5.5.7.8.2.4.2.8.3 1.2 0 1.2-.2 2.3-.4 3.4-.1.4-.2.7-.3 1.1v.1c.6 1.1 1.4 2.1 2.2 3 .1.1.1.1.3.1 1.1-.2 2.2-.2 3.2-.2.6 0 1.3.1 1.9.4.3.2.6.4.8.7.1.2.2.4.2.6v.7c0 .2-.1.4-.3.5-.2.2-.4.5-.8.5-.2 0-.5.1-.7.1-1.6.1-2.9-.4-4.2-1.3-.2-.2-.5-.4-.7-.6-.1 0-.1-.1-.2-.1-.6.1-1.2.2-1.8.4-.8.2-1.6.5-2.4.7-.1 0-.1.1-.2.1-.5.9-1.1 1.8-1.7 2.6-.5.6-1.1 1.2-1.7 1.7-.3.2-.7.4-1.1.5h-.8c-.2 0-.3 0-.5-.1-.5-.2-.9-.6-1-1.1-.1 0-.1-.2-.1-.4zm8.8-7c-.3.8-.7 1.6-1 2.4l2.4-.6c-.5-.6-1-1.3-1.4-1.8zm4.3 2.6c.6.4 1.3.7 2 .9.3.1.5 0 .7-.1.2-.1.3-.4.1-.5 0-.1-.1-.1-.2-.1-.2-.1-.5-.1-.8-.2-.6-.1-1.2-.1-1.8 0zm-9.4 2.8s-.1 0 0 0c-.6.3-1.2.7-1.7 1.1-.3.2-.5.5-.7.8v.2c.1.1.1.1.2.1.3-.2.5-.4.7-.5.6-.5 1-1.1 1.5-1.7zM15 11.2c.1 0 .1 0 0 0 .2-.6.3-1.2.3-1.7 0-.3 0-.6-.1-.9 0-.1-.1-.1-.2-.1s-.1.1-.2.1c-.2.3-.2.6-.2 1 0 .3 0 .5.1.8.2.2.2.5.3.8z" fill="currentColor" />
+                    </svg>
+                )
+            case 'doc':
+            case 'docx':
+                return (
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className={cn("text-white", iconSizeClasses[size], className)}>
+                        <path d="M26 11.4V8.8c0-.4-.3-.8-.8-.8h-7.3V6.2h-1.4c-.2 0-.3.1-.5.1-.7.1-1.4.3-2.1.4-.7.1-1.4.2-2 .4-.7.1-1.4.2-2.2.4-.8.1-1.5.2-2.2.3-.5.1-1 .2-1.4.2H6v15.9c.8.1 1.6.3 2.4.4.8.1 1.7.3 2.5.4.8.1 1.6.3 2.4.4.8.1 1.7.3 2.5.5.3.1.7.1 1 .1h.9V24c0-.1 0-.1.1-.1h7.3c.1 0 .3 0 .4-.1.2 0 .3-.1.3-.3 0-.2.1-.3.1-.5V11.4c.1.1.1.1.1 0zm-11 1.5l-.9 3.9c-.2.7-.3 1.4-.5 2.2 0 .1-.1.1-.1.1-.2.1-.4 0-.6 0h-.6c-.1 0-.1 0-.1-.1-.1-.6-.3-1.3-.4-1.9-.2-.8-.3-1.6-.5-2.4 0 .2-.1.4-.1.6l-.6 3c0 .2-.1.5-.1.7 0 .1 0 .1-.1.1-.4 0-.8-.1-1.2-.1-.1 0-.1 0-.1-.1-.3-1.6-.6-3.2-1-4.9-.1-.3-.1-.7-.2-1v-.1h1.2c.2 1.4.5 2.8.7 4.3 0-.2.1-.4.1-.6.3-1.2.5-2.5.8-3.7 0-.1 0-.1.1-.1h1c.2 0 .2 0 .3.2.3 1.4.6 2.8.9 4.3v.1c.1-.8.3-1.6.4-2.4.1-.7.3-1.5.4-2.2 0 0 0-.1.1-.1.4 0 .8 0 1.3-.1h.1c-.2 0-.3.2-.3.3zm10.3-4.1s0 .1 0 0v14.5h-7.5v-1.8h5.9v-.9H18c-.1 0-.1 0-.1-.1v-.9c0-.1 0-.1.1-.1h5.8v-.9h-5.9v-1.1h5.8v-.9h-5.9v-1h5.8c.1 0 .1 0 .1-.1v-.7c0-.1 0-.1-.1-.1H18c-.1 0-.1 0-.1-.1v-1h5.9v-.9h-5.7c-.1 0-.1 0-.1-.1v-.9c0-.1 0-.1.1-.1h5.7v-.9h-5.9v-1.2h5.8c.1 0 .1 0 .1-.1v-.7c0-.1 0-.1-.1-.1h-5.9V9c0-.1 0-.1.1-.1h7.3c.1-.2.1-.2.1-.1z" fill="currentColor" />
+                    </svg>
+                )
+            case 'xls':
+            case 'xlsx':
+            case 'csv':
+                return (
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className={cn("text-white", iconSizeClasses[size], className)}>
+                        <path d="M26 9.3v13.6c0 .1-.1.2-.1.3-.2.3-.5.5-.8.5h-7.7v2c-.3-.1-.7-.1-1-.2-.7-.1-1.5-.3-2.2-.4-.8-.1-1.6-.3-2.4-.4-.8-.1-1.6-.3-2.4-.4-.7-.1-1.5-.3-2.2-.4-.4-.1-.7-.1-1.1-.2V9c.1 0 .3-.1.4-.1.7-.5 1.5-.7 2.3-.8.7-.1 1.4-.3 2-.4.6-.1 1.3-.2 1.9-.4.7-.1 1.5-.3 2.2-.4.8-.1 1.5-.3 2.3-.4h.1v1.9h7.8c.4 0 .8.3.9.7v.2zm-.8-.1h-7.9v1.2H20v1.7h-2.7v.6H20v1.7h-2.7v.6H20v1.7h-2.7v.7h2.8v1.7h-2.8v.6H20v1.7h-2.7v1.2h7.9V9.2zM14.7 20.7s0-.1-.1-.1c-.7-1.4-1.5-2.8-2.2-4.2v-.2c.7-1.4 1.4-2.7 2.2-4.1V12h-.1c-.2 0-.5 0-.7.1-.3 0-.6 0-1 .1-.1 0-.1 0-.1.1-.3.6-.5 1.1-.8 1.7-.2.5-.4.9-.6 1.4-.1-.2-.1-.5-.2-.7-.3-.7-.6-1.5-.9-2.2-.1-.2-.1-.2-.3-.2-.4 0-.8.1-1.2.1h-.4v.1c.1.2.2.5.3.7l1.5 3v.1c-.6 1.2-1.3 2.4-1.9 3.6 0 .1-.1.1-.1.2h.6c.4 0 .7.1 1.1.1.1 0 .1 0 .1-.1.3-.6.6-1.2.9-1.9.1-.3.3-.6.4-.9 0-.1 0-.2.1-.3v.1c.1.2.1.4.2.5.4.8.7 1.6 1.1 2.5.1.1.1.2.3.2.5 0 1 .1 1.5.1.1.3.2.3.3.3z" fill="currentColor" />
+                        <path d="M23.9 10.4v1.7h-3.1v-1.7h3.1zm-3.1 11.2v-1.7h3.1v1.7h-3.1zm0-4.7v-1.7h3.1v1.7h-3.1zm3.1-4.1v1.7h-3.1v-1.7h3.1zm0 4.8v1.7h-3.1v-1.7h3.1z" fill="currentColor" />
+                    </svg>
+                )
+            case 'ppt':
+            case 'pptx':
+                return (
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 116.03" className={cn("text-white", pptIconSizeClasses[size], className)}>
+                        <g>
+                            <path d="M0.38,12.11L69.16,0.09L69.69,0v0.54v114.96v0.53l-0.53-0.09L0.38,104.63L0,104.57v-0.38V12.55v-0.38L0.38,12.11 L0.38,12.11z M76.29,17.01h43.79c0.77,0,1.47,0.32,1.98,0.82c0.51,0.51,0.82,1.21,0.82,1.98v76.75c0,0.78-0.32,1.5-0.84,2.01 s-1.23,0.84-2.01,0.84H76.29h-0.45v-0.45v-9.16v-0.45h0.45h33.62v-6.15H76.29h-0.45v-0.45v-7.17V75.1h0.45h33.62v-6.15H76.29h-0.45 v-0.45v-8.49v-0.88l0.71,0.51c1.32,0.94,2.79,1.68,4.36,2.18c1.52,0.48,3.14,0.74,4.82,0.74c4.38,0,8.34-1.78,11.21-4.64 c2.82-2.82,4.59-6.7,4.64-11H85.83h-0.45v-0.45V30.86c-1.56,0.03-3.06,0.29-4.47,0.74c-1.57,0.5-3.04,1.24-4.36,2.18l-0.71,0.51 v-0.88V17.46v-0.45H76.29L76.29,17.01z M99.26,32.75c-2.76-2.77-6.54-4.52-10.73-4.65v15.48h15.36 C103.79,39.35,102.04,35.53,99.26,32.75L99.26,32.75z M30.91,80.41V63.97v-0.45h0.45h6.22c2.41,0,4.56-0.35,6.45-1.05 c1.87-0.7,3.49-1.75,4.86-3.15c1.37-1.4,2.39-3.04,3.08-4.91c0.69-1.88,1.03-4,1.03-6.37c0-1.61-0.16-3.12-0.48-4.55 c-0.32-1.42-0.79-2.76-1.43-4.01c-0.63-1.25-1.4-2.36-2.29-3.32c-0.89-0.96-1.91-1.78-3.06-2.45c-2.31-1.35-4.97-2.03-7.98-2.03 H22.07v48.75H30.91L30.91,80.41z M37.76,55.2h-6.39h-0.45v-0.45V40.43v-0.45h0.45h6.51l0.01,0c0.95,0.01,1.81,0.21,2.57,0.59 c0.76,0.38,1.41,0.95,1.96,1.71h0c0.54,0.74,0.95,1.6,1.21,2.58c0.27,0.97,0.4,2.05,0.4,3.24c0,1.1-0.13,2.08-0.39,2.94h0 c-0.27,0.88-0.67,1.63-1.21,2.26c-0.54,0.63-1.21,1.11-2,1.43C39.65,55.05,38.76,55.2,37.76,55.2L37.76,55.2z" fill="currentColor" />
+                        </g>
+                    </svg>
+                )
+            case 'video':
+            case 'mp4':
+            case 'mov':
+            case 'mkv':
+            case 'avi':
+            case 'webm':
+                return (
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className={cn("text-white", iconSizeClasses[size], className)}>
+                        <path d="M16 4c-6.6 0-12 5.4-12 12s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm-2 16.5V9.5l8 5.5-8 5.5z" fill="currentColor" />
+                    </svg>
+                )
+            case 'audio':
+            case 'mp3':
+            case 'wav':
+            case 'ogg':
+            case 'flac':
+                return (
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className={cn("text-white", iconSizeClasses[size], className)}>
+                        <path d="M16 4c-6.6 0-12 5.4-12 12s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm-2 16.5V9.5l8 5.5-8 5.5z" fill="currentColor" />
+                    </svg>
+                )
+            case 'image':
+            case 'jpg':
+            case 'jpeg':
+            case 'png':
+            case 'gif':
+            case 'webp':
+                return (
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className={cn("text-white", iconSizeClasses[size], className)}>
+                        <path d="M26 4H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM6 26V6h20v20H6z" fill="currentColor" />
+                        <path d="M10 12c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm12 8H10l4-6 3 4 2-3 7 5z" fill="currentColor" />
+                    </svg>
+                )
+            case 'zip':
+            case 'rar':
+            case '7z':
+            case 'tar':
+            case 'gz':
+                return (
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className={cn("text-white", iconSizeClasses[size], className)}>
+                        <path d="M26 4H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM6 26V6h20v20H6z" fill="currentColor" />
+                        <path d="M10 8h12v2H10V8zm0 4h12v2H10v-2zm0 4h12v2H10v-2z" fill="currentColor" />
+                    </svg>
+                )
+            default:
+                return (
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={cn("text-white", iconSizeClasses[size], className)}>
+                        <path d="M18 22a2 2 0 0 0 2-2V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12zM13 4l5 5h-5V4zM7 8h3v2H7V8zm0 4h10v2H7v-2zm0 4h10v2H7v-2z" fill="currentColor" />
+                    </svg>
+                )
+        }
+    }
+
+    const getBackgroundColor = () => {
+        switch (fileType.toLowerCase()) {
+            case 'pdf':
+                return 'bg-red-700'
+            case 'doc':
+            case 'docx':
+                return 'bg-[#1A5CBD]'
+            case 'xls':
+            case 'xlsx':
+            case 'csv':
+                return 'bg-green-700'
+            case 'ppt':
+            case 'pptx':
+                return 'bg-[#ED6C47]'
+            case 'video':
+            case 'mp4':
+            case 'mov':
+            case 'mkv':
+            case 'avi':
+            case 'webm':
+                return 'bg-purple-600'
+            case 'audio':
+            case 'mp3':
+            case 'wav':
+            case 'ogg':
+            case 'flac':
+                return 'bg-purple-600'
+            case 'image':
+            case 'jpg':
+            case 'jpeg':
+            case 'png':
+            case 'gif':
+            case 'webp':
+                return 'bg-blue-600'
+            case 'zip':
+            case 'rar':
+            case '7z':
+            case 'tar':
+            case 'gz':
+                return 'bg-yellow-600'
+            default:
+                return 'bg-gray-500'
+        }
+    }
+
+    const getTextColor = () => {
+        switch (fileType.toLowerCase()) {
+            case 'pdf':
+                return 'text-red-700'
+            case 'doc':
+            case 'docx':
+                return 'text-[#1A5CBD]'
+            case 'xls':
+            case 'xlsx':
+            case 'csv':
+                return 'text-green-700 dark:text-green-500'
+            case 'ppt':
+            case 'pptx':
+                return 'text-[#ED6C47]'
+            case 'video':
+            case 'mp4':
+            case 'mov':
+            case 'mkv':
+            case 'avi':
+            case 'webm':
+                return 'text-purple-600'
+            case 'audio':
+            case 'mp3':
+            case 'wav':
+            case 'ogg':
+            case 'flac':
+                return 'text-purple-600'
+            case 'image':
+            case 'jpg':
+            case 'jpeg':
+            case 'png':
+            case 'gif':
+            case 'webp':
+                return 'text-blue-600'
+            case 'zip':
+            case 'rar':
+            case '7z':
+            case 'tar':
+            case 'gz':
+                return 'text-yellow-600'
+            default:
+                return 'text-gray-50'
+        }
+    }
+
+    if (showBackground) {
+        return (
+            <div className={cn("rounded-md flex items-center justify-center", getBackgroundColor(), containerClass)}>
+                <RenderIcon />
+            </div>
+        )
+    }
+
+    return (
+        <div className={cn("flex items-center justify-center")}>
+            <RenderIcon className={getTextColor()} />
+        </div>
+    )
+}

banking/src/components/ui/form-elements.tsx

@@ -0,0 +1,383 @@
+import { FieldValues, RegisterOptions, useFormContext } from "react-hook-form"
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormRequiredIndicator, useFormField } from "@/components/ui/form"
+import _ from "@/lib/translate"
+import { Input } from "./input"
+import { ComponentProps, FocusEventHandler, useCallback, useState } from "react"
+import { parseDate } from "chrono-node"
+import { formatDate, getUserDateFormat, toDate } from "@/lib/date"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover"
+import { Button } from "./button"
+import { CalendarIcon } from "lucide-react"
+import { Calendar } from "./calendar"
+import dayjs from "dayjs"
+import { Textarea } from "./textarea"
+import AccountsDropdown, { AccountsDropdownProps } from "../common/AccountsDropdown"
+import PartyTypeDropdown, { PartyTypeDropdownProps } from "../common/PartyTypeDropdown"
+import CurrencyInput from "react-currency-input-field"
+import { getSystemDefault } from "@/lib/frappe"
+import { getCurrencySymbol } from "@/lib/currency"
+import { getCurrencyFormatInfo } from "@/lib/numbers"
+import LinkFieldCombobox, { LinkFieldComboboxProps } from "../common/LinkFieldCombobox"
+import { Select, SelectContent, SelectTrigger, SelectValue } from "./select"
+import { InputGroup, InputGroupAddon } from "./input-group"
+
+interface FormElementProps {
+    name: string,
+    rules?: Omit<RegisterOptions<FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs">,
+    label: string,
+    isRequired?: boolean,
+    disabled?: boolean,
+    formDescription?: string,
+    hideLabel?: boolean,
+    readOnly?: boolean,
+
+}
+
+interface DataFieldProps extends FormElementProps {
+    inputProps?: Omit<ComponentProps<"input">, "value" | "onChange" | "onBlur" | "name" | "ref">
+}
+
+export const DataField = ({ name, rules, label, isRequired, formDescription, inputProps, hideLabel, disabled, readOnly }: DataFieldProps) => {
+
+    const { control } = useFormContext()
+    return <FormField
+        control={control}
+        disabled={disabled}
+        name={name}
+        rules={rules}
+        render={({ field }) => (
+            <FormItem className='flex flex-col'>
+                <FormLabel className={hideLabel ? 'sr-only' : ''}>{label}{isRequired && <FormRequiredIndicator />}</FormLabel>
+                <FormControl>
+                    <Input {...field} maxLength={140} aria-readonly={readOnly} readOnly={readOnly} {...inputProps} />
+                </FormControl>
+                {formDescription && <FormDescription>{formDescription}</FormDescription>}
+                <FormMessage />
+            </FormItem>
+        )}
+    />
+}
+
+interface SelectFieldProps extends FormElementProps {
+    children: React.ReactNode
+}
+
+export const SelectFormField = ({ name, rules, label, isRequired, formDescription, hideLabel, children, disabled, readOnly }: SelectFieldProps) => {
+
+    const { control } = useFormContext()
+
+    return <FormField
+        control={control}
+        name={name}
+        disabled={disabled}
+        rules={rules}
+        render={({ field }) => (
+            <FormItem>
+                <FormLabel className={hideLabel ? 'sr-only' : ''}>{label}{isRequired && <FormRequiredIndicator />}</FormLabel>
+                <FormControl>
+                    <Select onValueChange={field.onChange} value={field.value} disabled={disabled || readOnly} aria-readonly={readOnly}>
+                        <FormControl>
+                            <SelectTrigger className="w-full">
+                                <SelectValue />
+                            </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                            {children}
+                        </SelectContent>
+                    </Select>
+                </FormControl>
+                {formDescription && <FormDescription>{formDescription}</FormDescription>}
+                <FormMessage />
+            </FormItem>
+        )}
+    />
+}
+
+interface DateFieldProps extends FormElementProps {
+    inputProps?: Omit<ComponentProps<"input">, "value" | "onChange" | "onBlur" | "name" | "ref">
+}
+
+export const DateField = ({ name, rules, label, isRequired, formDescription, inputProps, hideLabel, disabled }: DateFieldProps) => {
+
+    const { control } = useFormContext()
+
+    const DatePicker = ({ field }: { field: FieldValues }) => {
+
+        const userDateFormat = getUserDateFormat()
+        const [open, setOpen] = useState(false)
+
+        const [value, setValue] = useState<string | undefined>(field.value ? formatDate(field.value) : undefined)
+
+        const date = field.value ? toDate(field.value) : undefined
+
+        return <div className="relative flex gap-2">
+            <FormControl>
+                <Input className="pe-10"
+                    name={field.name}
+                    onBlur={() => {
+                        setValue(formatDate(field.value))
+                        field.onBlur()
+                    }}
+                    placeholder={userDateFormat}
+                    value={value}
+                    onChange={(e) => {
+                        setValue(e.target.value)
+                        if (e.target.value) {
+                            // On change in value, try computing date usning standard formats first
+                            const dateObj = toDate(e.target.value, userDateFormat)
+                            // If we find a valid date, use it
+                            if (dateObj && !isNaN(dateObj.getTime())) {
+                                field.onChange(formatDate(dateObj, "YYYY-MM-DD"))
+                            } else {
+                                // If not, try parsing using chrono-node for things like "1st July 2025"
+                                const date = parseDate(e.target.value)
+                                if (date) {
+                                    field.onChange(formatDate(date, "YYYY-MM-DD"))
+                                }
+                            }
+                        } else {
+                            field.onChange("")
+                        }
+                    }}
+                    onKeyDown={(e) => {
+                        if (e.key === "ArrowDown") {
+                            e.preventDefault()
+                            setOpen(true)
+                        }
+                    }}
+                    maxLength={140}
+                    {...inputProps} />
+            </FormControl>
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>
+                    <Button
+                        id="date-picker-button"
+                        variant="ghost"
+                        className="absolute top-1/2 ltr:right-2 rtl:left-2 size-6 -translate-y-1/2"
+                    >
+                        <CalendarIcon className="size-3.5" />
+                        <span className="sr-only">{_("Select date")}</span>
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto overflow-hidden p-0" align="center">
+                    <Calendar
+                        mode="single"
+                        selected={date}
+                        fixedWeeks
+                        endMonth={dayjs().add(1, "year").toDate()}
+                        captionLayout="dropdown"
+                        defaultMonth={date}
+                        onSelect={(date) => {
+                            setValue(formatDate(date))
+                            field.onChange(formatDate(date, "YYYY-MM-DD"))
+                            setOpen(false)
+                        }}
+                    />
+                </PopoverContent>
+            </Popover>
+        </div>
+    }
+
+    return <FormField
+        control={control}
+        name={name}
+        disabled={disabled}
+        rules={rules}
+        render={({ field }) => (
+            <FormItem className='flex flex-col'>
+                <FormLabel className={hideLabel ? 'sr-only' : ''}>{label}{isRequired && <FormRequiredIndicator />}</FormLabel>
+                <DatePicker field={field} />
+                {formDescription && <FormDescription>{formDescription}</FormDescription>}
+                <FormMessage />
+            </FormItem>
+        )}
+    />
+}
+
+
+interface SmallTextFieldProps extends FormElementProps {
+    inputProps?: Omit<ComponentProps<"textarea">, "value" | "onChange" | "onBlur" | "name" | "ref">
+}
+
+export const SmallTextField = ({ name, rules, label, isRequired, formDescription, inputProps, hideLabel, disabled, readOnly }: SmallTextFieldProps) => {
+
+    const { control } = useFormContext()
+    return <FormField
+        control={control}
+        name={name}
+        disabled={disabled}
+        rules={rules}
+        render={({ field }) => (
+            <FormItem className='flex flex-col'>
+                <FormLabel className={hideLabel ? 'sr-only' : ''}>{label}{isRequired && <FormRequiredIndicator />}</FormLabel>
+                <FormControl>
+                    <Textarea {...field} {...inputProps} readOnly={readOnly} aria-readonly={readOnly} />
+                </FormControl>
+                {formDescription && <FormDescription>{formDescription}</FormDescription>}
+                <FormMessage />
+            </FormItem>
+        )}
+    />
+}
+
+
+interface AccountFormFieldProps extends Omit<AccountsDropdownProps, 'value' | 'onChange'>, FormElementProps {
+}
+export const AccountFormField = (props: AccountFormFieldProps) => {
+
+    const { control } = useFormContext()
+
+    return <FormField
+        control={control}
+        disabled={props.disabled}
+        name={props.name}
+        rules={props.rules}
+        render={({ field }) => (
+            <FormItem className='flex flex-col'>
+                <FormLabel className={props.hideLabel ? 'sr-only' : ''}>{props.label}{props.isRequired && <FormRequiredIndicator />}</FormLabel>
+                <AccountsDropdown {...props} value={field.value} onChange={field.onChange} useInForm readOnly={props.readOnly} />
+                {props.formDescription && <FormDescription>{props.formDescription}</FormDescription>}
+                <FormMessage />
+            </FormItem>
+        )}
+    />
+}
+
+interface PartyTypeFormField extends FormElementProps {
+    inputProps?: Omit<PartyTypeDropdownProps, 'value' | 'onChange'>
+}
+
+export const PartyTypeFormField = ({ name, rules, label, isRequired, formDescription, hideLabel, inputProps, disabled, readOnly }: PartyTypeFormField) => {
+
+    const { control } = useFormContext()
+
+    return <FormField
+        control={control}
+        disabled={disabled}
+        name={name}
+        rules={rules}
+        render={({ field }) => (
+            <FormItem className='flex flex-col'>
+                <FormLabel className={hideLabel ? 'sr-only' : ''}>{label}{isRequired && <FormRequiredIndicator />}</FormLabel>
+                <PartyTypeDropdown {...inputProps} value={field.value} onChange={field.onChange} useInForm readOnly={readOnly} />
+                {formDescription && <FormDescription>{formDescription}</FormDescription>}
+                <FormMessage />
+            </FormItem>
+        )}
+    />
+}
+
+
+interface CurrencyFormFieldProps extends FormElementProps {
+    currency?: string,
+    style?: React.CSSProperties,
+    leftSlot?: React.ReactNode,
+}
+
+export const CurrencyFormField = ({ name, rules, label, isRequired, formDescription, hideLabel, currency, disabled, readOnly, style = {}, leftSlot }: CurrencyFormFieldProps) => {
+
+    const { control } = useFormContext()
+
+    const defaultCurrency = getSystemDefault("currency")
+    const currencySymbol = getCurrencySymbol(currency ?? defaultCurrency)
+
+
+    const CurrencyField = ({ field }: { field: FieldValues }) => {
+
+        const onFocus: FocusEventHandler<HTMLInputElement> = useCallback((e) => {
+            // When the input is focused, select the text
+            // A short timeout is needed so that the input selects the text after the focus event
+            setTimeout(() => {
+                // Check if the input is focused - do not select text if the input is not focused
+                if (e.target.contains(document.activeElement)) {
+                    e.target.select()
+                }
+            }, 100)
+        }, [])
+
+        const { formItemId } = useFormField()
+
+        // Get the correct separators for the currency
+        const formatInfo = getCurrencyFormatInfo(currency ?? defaultCurrency)
+        const groupSeparator = formatInfo.group_sep || ","
+        const decimalSeparator = formatInfo.decimal_str || "."
+
+        return <CurrencyInput
+            ref={field.ref}
+            name={field.name}
+            style={{
+                textAlign: 'right',
+                ...style
+            }}
+            id={formItemId}
+            onBlur={field.onBlur}
+            disabled={field.disabled}
+            readOnly={readOnly}
+            aria-readonly={readOnly}
+            onFocus={onFocus}
+            groupSeparator={groupSeparator}
+            decimalSeparator={decimalSeparator}
+            placeholder={`${currencySymbol} 0${decimalSeparator}00`}
+            decimalsLimit={2}
+            value={field.value}
+            maxLength={12}
+            decimalScale={2}
+            prefix={currencySymbol + " "}
+            onValueChange={(v, _n, values) => {
+                // If the input ends with a decimal or a decimal with trailing zeroes, store the string since we need the user to be able to type the decimals.
+                // When the user eventually types the decimals or blurs out, the value is formatted anyway.
+                // Otherwise store the float value
+                // Check if the value ends with a decimal or a decimal with trailing zeroes
+                const isDecimal = v?.endsWith(decimalSeparator) || v?.endsWith(decimalSeparator + '0')
+                const newValue = isDecimal ? v : values?.float ?? ''
+                field.onChange(newValue)
+            }}
+            customInput={Input}
+        />
+    }
+
+    return <FormField
+        control={control}
+        disabled={disabled}
+        name={name}
+        rules={rules}
+        render={({ field }) => (
+            <FormItem className='flex flex-col'>
+                <FormLabel className={hideLabel ? 'sr-only' : ''}>{label}{isRequired && <FormRequiredIndicator />}</FormLabel>
+
+                <FormControl>
+                    <InputGroup>
+                        {leftSlot && <InputGroupAddon>{leftSlot}</InputGroupAddon>}
+                        <CurrencyField field={field} />
+                    </InputGroup>
+
+                </FormControl>
+                {formDescription && <FormDescription>{formDescription}</FormDescription>}
+                <FormMessage />
+            </FormItem>
+        )}
+    />
+}
+
+interface LinkFormFieldProps extends FormElementProps, Omit<LinkFieldComboboxProps, 'value' | 'onChange'> {
+}
+
+export const LinkFormField = ({ name, rules, label, isRequired, formDescription, hideLabel, disabled, readOnly, ...inputProps }: LinkFormFieldProps) => {
+
+    const { control } = useFormContext()
+
+    return <FormField
+        control={control}
+        name={name}
+        disabled={disabled}
+        rules={rules}
+        render={({ field }) => (
+            <FormItem className='flex flex-col'>
+                <FormLabel className={hideLabel ? 'sr-only' : ''}>{label}{isRequired && <FormRequiredIndicator />}</FormLabel>
+                <LinkFieldCombobox {...inputProps} value={field.value} onChange={field.onChange} useInForm disabled={disabled} readOnly={readOnly} />
+                {formDescription && <FormDescription>{formDescription}</FormDescription>}
+                <FormMessage />
+            </FormItem>
+        )}
+    />
+}

banking/src/components/ui/form.tsx

@@ -0,0 +1,174 @@
+import * as React from "react"
+import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui"
+
+import {
+    Controller,
+    FormProvider,
+    useFormContext,
+    useFormState,
+    type ControllerProps,
+    type FieldPath,
+    type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+    name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+    {} as FormFieldContextValue
+)
+
+const FormField = <
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+    ...props
+}: ControllerProps<TFieldValues, TName>) => {
+    return (
+        <FormFieldContext.Provider value={{ name: props.name }}>
+            <Controller {...props} />
+        </FormFieldContext.Provider>
+    )
+}
+
+const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext)
+    const itemContext = React.useContext(FormItemContext)
+    const { getFieldState } = useFormContext()
+    const formState = useFormState({ name: fieldContext.name })
+    const fieldState = getFieldState(fieldContext.name, formState)
+
+    if (!fieldContext) {
+        throw new Error("useFormField should be used within <FormField>")
+    }
+
+    const { id } = itemContext
+
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState,
+    }
+}
+
+type FormItemContextValue = {
+    id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+    {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+    const id = React.useId()
+
+    return (
+        <FormItemContext.Provider value={{ id }}>
+            <div
+                data-slot="form-item"
+                className={cn("grid gap-1.5", className)}
+                {...props}
+            />
+        </FormItemContext.Provider>
+    )
+}
+
+function FormLabel({
+    className,
+    ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+    const { error, formItemId } = useFormField()
+
+    return (
+        <Label
+            data-slot="form-label"
+            data-error={!!error}
+            className={className}
+            htmlFor={formItemId}
+            {...props}
+        />
+    )
+}
+
+function FormRequiredIndicator({ className, ...props }: React.ComponentProps<"span">) {
+    return (
+        <span className={cn("text-ink-red-2", className)} {...props}>
+            *
+        </span>
+    )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof SlotPrimitive.Slot>) {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+    return (
+        <SlotPrimitive.Slot
+            data-slot="form-control"
+            id={formItemId}
+            aria-describedby={
+                !error
+                    ? `${formDescriptionId}`
+                    : `${formDescriptionId} ${formMessageId}`
+            }
+            aria-invalid={!!error}
+            {...props}
+        />
+    )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+    const { formDescriptionId } = useFormField()
+
+    return (
+        <p
+            data-slot="form-description"
+            id={formDescriptionId}
+            className={cn("text-ink-gray-5 text-p-base", className)}
+            {...props}
+        />
+    )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+    const { error, formMessageId } = useFormField()
+    const body = error ? String(error?.message ?? "") : props.children
+
+    if (!body) {
+        return null
+    }
+
+    return (
+        <p
+            data-slot="form-message"
+            id={formMessageId}
+            className={cn("text-ink-red-4 text-p-base", className)}
+            {...props}
+        >
+            {body}
+        </p>
+    )
+}
+
+export {
+    useFormField,
+    Form,
+    FormItem,
+    FormLabel,
+    FormControl,
+    FormDescription,
+    FormMessage,
+    FormField,
+    FormRequiredIndicator,
+}

banking/src/components/ui/hover-card.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "rounded-lg border bg-surface-modal shadow-xl text-ink-gray-8 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) p-4 outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

banking/src/components/ui/input-group.tsx

@@ -0,0 +1,161 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+const inputGroupVariants = cva(cn("group/input-group relative flex w-full items-center outline-none min-w-0 border border-transparent transition-all",
+
+  // Variants based on alignment.
+  "has-[>[data-align=inline-start]]:[&>input]:ps-2",
+  "has-[>[data-align=inline-end]]:[&>input]:pe-2",
+  "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+  "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+
+  // Focus state.
+  "has-[[data-slot=input]:focus-visible]:bg-surface-white has-[[data-slot=input]:focus-visible]:border-outline-gray-4 has-[[data-slot=input]:focus-visible]:shadow-focus-gray",
+
+  // Disabled state
+  "has-[>[data-slot=input]:disabled]:bg-surface-gray-1 has-[>[data-slot=input]:disabled]:text-ink-gray-3 has-[>[data-slot=input]:disabled]:cursor-not-allowed has-[>[data-slot=input]:disabled]:pointer-events-none",
+
+  // Error state.
+  "has-[[data-slot][aria-invalid=true]]:shadow-focus-red has-[[data-slot][aria-invalid=true]]:border-outline-red-3",
+
+  // Read only state
+  "has-[[data-slot][aria-readonly=true]]:bg-surface-gray-1 has-[[data-slot][aria-readonly=true]]:text-ink-gray-6 has-[[data-slot][aria-readonly=true]]:pointer-events-none",
+
+),
+  {
+    variants: {
+      variant: {
+        subtle: "bg-surface-gray-2",
+        outline: "bg-surface-white border-outline-gray-2"
+      },
+      size: {
+        sm: "h-7 has-[>textarea]:h-auto rounded text-base",
+        md: "h-8 has-[>textarea]:h-auto rounded text-base",
+        lg: "h-10 has-[>textarea]:h-auto rounded-md text-lg"
+      }
+    },
+    defaultVariants: {
+      variant: "subtle",
+      size: "md"
+    }
+  }
+)
+
+function InputGroup({ className, variant = "subtle", size = "md", ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupVariants>) {
+  return (
+    <div
+      data-slot="input-group"
+      data-variant={variant}
+      data-size={size}
+      role="group"
+      className={cn(
+        inputGroupVariants({ variant, size }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-ink-gray-5 flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first ps-3 has-[>button]:ms-[-0.45rem] has-[>kbd]:ms-[-0.35rem]",
+        "inline-end":
+          "order-last pe-3 has-[>button]:me-[-0.45rem] has-[>kbd]:me-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "text-sm shadow-none flex gap-2 items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-ink-gray-5 flex items-center gap-2 text-sm whitespace-nowrap [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+}

banking/src/components/ui/input.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { cva, VariantProps } from "class-variance-authority"
+
+const inputVariants = cva(cn("flex w-full min-w-0 transition-all outline-none border border-transparent",
+  "focus-visible:bg-surface-white focus-visible:border-outline-gray-4 focus-visible:shadow-focus-gray",
+  "active:bg-surface-white active:shadow-sm active:border-outline-gray-4",
+  "placeholder:text-ink-gray-4 text-ink-gray-7",
+  "disabled:bg-surface-gray-1 disabled:placeholder:text-ink-gray-3 disabled:text-ink-gray-3 disabled:cursor-not-allowed disabled:pointer-events-none",
+  "aria-readonly:bg-surface-gray-1 aria-readonly:text-ink-gray-6 aria-readonly:pointer-events-none aria-invalid:shadow-focus-red aria-invalid:border-outline-red-3",
+  "in-data-[slot=input-group]:border-transparent! in-data-[slot=input-group]:focus-visible:shadow-none! in-data-[slot=input-group]:bg-transparent!"),
+  {
+    variants: {
+      inputSize: {
+        sm: "text-base rounded py-1.5 px-2 h-7",
+        md: "text-base rounded py-2 px-2.5 h-8",
+        lg: "text-lg rounded-md py-[11px] px-3 h-10",
+      },
+      variant: {
+        subtle: "bg-surface-gray-2 hover:bg-surface-gray-3 aria-invalid:bg-surface-red-1",
+        outline: "bg-surface-white border-outline-gray-2 hover:border-outline-gray-3 active:border-outline-gray-4 disabled:border-outline-gray-2",
+      }
+    },
+    defaultVariants: {
+      inputSize: "md",
+      variant: "subtle"
+    }
+  }
+)
+
+function Input({ className, type, inputSize = "md", variant = "subtle", ...props }: React.ComponentProps<"input"> & VariantProps<typeof inputVariants>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      data-input-size={inputSize}
+      data-variant={variant}
+      className={cn(
+        "file:text-ink-gray-8 file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium",
+        inputVariants({ inputSize, variant }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

banking/src/components/ui/kbd.tsx

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-surface-gray-2 py-0.5 text-ink-gray-5 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-surface-gray-6 [[data-slot=tooltip-content]_&]:text-ink-gray-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

banking/src/components/ui/keyboard-keys.tsx

@@ -0,0 +1,8 @@
+
+export const KeyboardMetaKeyIcon = () => {
+    if (navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
+        return <span className="text-sm">⌘</span>
+    } else {
+        return <span>Ctrl</span>
+    }
+}

banking/src/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-base text-ink-gray-5 select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

banking/src/components/ui/list-view.tsx

@@ -0,0 +1,510 @@
+import * as React from "react"
+import {
+    type Cell,
+    type ColumnDef,
+    type ColumnSizingState,
+    type Header,
+    type OnChangeFn,
+    type Row,
+    type RowSelectionState,
+    flexRender,
+    functionalUpdate,
+    getCoreRowModel,
+    useReactTable,
+} from "@tanstack/react-table"
+import { useVirtualizer } from "@tanstack/react-virtual"
+import { useDebounceCallback } from "usehooks-ts"
+
+import { Checkbox } from "@/components/ui/checkbox"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { useDirection } from "./direction"
+
+/** Optional per-column layout hints for `ListView`. */
+export type ListViewColumnMeta = {
+    /** CSS grid track (`1fr`, `2fr`, `minmax(0,1fr)`). When set, used instead of TanStack pixel `size` in `grid-template-columns`. */
+    gridWidth?: string
+    align?: "left" | "center" | "right"
+    /**
+     * Tabular figures for stable digit width. Default: on when `align` is `right` (amounts); set `false` to opt out, or `true` for dates/IDs.
+     */
+    tabularNums?: boolean
+    /**
+     * Full text for an overflow tooltip (shown only when the cell truncates). If omitted, a string `accessorKey` value is used when available.
+     */
+    getTooltipText?: (row: unknown) => string | null | undefined
+    /** `false` disables the overflow tooltip for this column. */
+    truncateTooltip?: boolean
+    /**
+     * `false` skips single-line truncation for cells with custom layouts (e.g. action buttons). Default `true`.
+     */
+    truncate?: boolean
+}
+
+function alignClass(meta: ListViewColumnMeta | undefined) {
+    switch (meta?.align) {
+        case "center":
+            return "justify-center text-center"
+        case "right":
+            return "justify-end text-end"
+        default:
+            return "justify-start text-start"
+    }
+}
+
+function tabularNumsClass(meta: ListViewColumnMeta | undefined) {
+    if (meta?.tabularNums === false) return ""
+    if (meta?.tabularNums === true) return "tabular-nums"
+    if (meta?.align === "right") return "tabular-nums"
+    return ""
+}
+
+function resolveTooltipLabel<TData>(
+    row: Row<TData>,
+    meta: ListViewColumnMeta | undefined,
+    columnDef: ColumnDef<TData, unknown>,
+): string | undefined {
+    if (meta?.truncateTooltip === false) return undefined
+    const fromMeta = meta?.getTooltipText?.(row.original as unknown)
+    if (fromMeta != null && String(fromMeta).length > 0) {
+        return String(fromMeta)
+    }
+    const key = "accessorKey" in columnDef ? columnDef.accessorKey : undefined
+    if (key !== undefined && key !== null && key !== "") {
+        try {
+            const v = row.getValue(String(key))
+            if (v != null && v !== "") return String(v)
+        } catch {
+            /* column may not expose a value */
+        }
+    }
+    return undefined
+}
+
+function ListViewCellBody<TData>({
+    cell,
+    row,
+    meta,
+    children,
+}: {
+    cell: Cell<TData, unknown>
+    row: Row<TData>
+    meta: ListViewColumnMeta | undefined
+    children: React.ReactNode
+}) {
+    const ref = React.useRef<HTMLDivElement>(null)
+    const [overflowing, setOverflowing] = React.useState(false)
+    const direction = useDirection()
+
+    const tooltipLabel = resolveTooltipLabel(row, meta, cell.column.columnDef)
+    const tooltipAlign = meta?.align === "right" && direction === "ltr" ? "end" : "start"
+
+    const measure = React.useCallback(() => {
+        const el = ref.current
+        if (!el) return
+        setOverflowing(el.scrollWidth > el.clientWidth + 1)
+    }, [])
+
+    React.useLayoutEffect(() => {
+        measure()
+    }, [measure, children, tooltipLabel])
+
+    React.useEffect(() => {
+        const el = ref.current
+        if (!el || typeof ResizeObserver === "undefined") return
+        const ro = new ResizeObserver(measure)
+        ro.observe(el)
+        return () => ro.disconnect()
+    }, [measure])
+
+    if (meta?.truncate === false) {
+        return <div className="min-w-0 flex-1 overflow-visible">{children}</div>
+    }
+
+    const inner = (
+        <div
+            ref={ref}
+            className={cn(
+                "min-h-0 min-w-0 flex-1 truncate",
+            )}
+        >
+            {children}
+        </div>
+    )
+
+    if (!tooltipLabel || !overflowing) {
+        return inner
+    }
+
+    return (
+        <Tooltip delayDuration={400}>
+            <TooltipTrigger asChild>{inner}</TooltipTrigger>
+            <TooltipContent
+                side="bottom"
+                align={tooltipAlign}
+                className="max-w-sm text-balance wrap-break-word"
+            >
+                {tooltipLabel}
+            </TooltipContent>
+        </Tooltip>
+    )
+}
+
+function gridTemplateFromHeaders<TData>(headers: Header<TData, unknown>[]) {
+    return headers
+        .map((header) => {
+            const meta = header.column.columnDef.meta as ListViewColumnMeta | undefined
+            if (meta?.gridWidth) {
+                return meta.gridWidth
+            }
+            return `${header.getSize()}px`
+        })
+        .join(" ")
+}
+
+function defaultGetRowId<TData>(row: TData, index: number) {
+    const r = row as Record<string, unknown>
+    if (r && typeof r.name === "string") return r.name
+    if (r && typeof r.id === "string") return r.id
+    return String(index)
+}
+
+export type ListViewProps<TData> = {
+    data: TData[]
+    columns: ColumnDef<TData, unknown>[]
+    /**
+     * Stable row id for selection and keys. Defaults to `name`, then `id`, then row index (index is fragile if data order changes).
+     */
+    getRowId?: (originalRow: TData, index: number) => string
+    /** Pixel height of each body row (default 40, matches frappe-ui ListView). */
+    rowHeight?: number
+    className?: string
+    /** Classes for the scrollable viewport (default includes max-height). */
+    scrollAreaClassName?: string
+    /** Max height of the scroll area; number is pixels. Default `420`. */
+    maxHeight?: number | string
+    emptyState?: React.ReactNode
+    enableColumnResizing?: boolean
+    columnSizing?: ColumnSizingState
+    onColumnSizingChange?: OnChangeFn<ColumnSizingState>
+    /** Debounced callback for persisting widths (e.g. localStorage). */
+    onColumnSizingCommit?: (sizing: ColumnSizingState) => void
+    columnSizingCommitDelayMs?: number
+    enableRowSelection?: boolean
+    rowSelection?: RowSelectionState
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>
+    onRowClick?: (row: TData, event: React.MouseEvent) => void
+}
+
+function ListViewInner<TData>({
+    data,
+    columns: userColumns,
+    getRowId: getRowIdProp,
+    rowHeight = 40,
+    className,
+    scrollAreaClassName,
+    maxHeight = 420,
+    emptyState,
+    enableColumnResizing = true,
+    columnSizing: controlledColumnSizing,
+    onColumnSizingChange: controlledOnColumnSizingChange,
+    onColumnSizingCommit,
+    columnSizingCommitDelayMs = 250,
+    enableRowSelection = false,
+    rowSelection: controlledRowSelection,
+    onRowSelectionChange: controlledOnRowSelectionChange,
+    onRowClick,
+}: ListViewProps<TData>) {
+    const parentRef = React.useRef<HTMLDivElement>(null)
+
+    const [internalColumnSizing, setInternalColumnSizing] = React.useState<ColumnSizingState>({})
+    const columnSizing = controlledColumnSizing ?? internalColumnSizing
+
+    const [internalRowSelection, setInternalRowSelection] = React.useState<RowSelectionState>({})
+    const rowSelection = controlledRowSelection ?? internalRowSelection
+    const setRowSelection = controlledOnRowSelectionChange ?? setInternalRowSelection
+
+    const debouncedSizingCommit = useDebounceCallback(
+        (sizing: ColumnSizingState) => {
+            onColumnSizingCommit?.(sizing)
+        },
+        columnSizingCommitDelayMs,
+    )
+
+    const selectionColumn = React.useMemo<ColumnDef<TData, unknown>>(
+        () => ({
+            id: "__list_view_select__",
+            size: 36,
+            minSize: 36,
+            maxSize: 36,
+            enableResizing: false,
+            meta: {
+                truncate: false,
+                truncateTooltip: false,
+            } satisfies ListViewColumnMeta,
+            header: ({ table }) => (
+                <div className="flex size-full items-center justify-center">
+                    <Checkbox
+                        aria-label="Select all rows"
+                        checked={
+                            table.getIsAllRowsSelected()
+                                ? true
+                                : table.getIsSomeRowsSelected()
+                                    ? "indeterminate"
+                                    : false
+                        }
+                        onCheckedChange={(value) => table.toggleAllRowsSelected(value === true)}
+                        onClick={(e) => e.stopPropagation()}
+                    />
+                </div>
+            ),
+            cell: ({ row }) => (
+                <div className="flex size-full items-center justify-center">
+                    <Checkbox
+                        aria-label="Select row"
+                        checked={row.getIsSelected()}
+                        onCheckedChange={(value) => row.toggleSelected(value === true)}
+                        onClick={(e) => e.stopPropagation()}
+                    />
+                </div>
+            ),
+        }),
+        [],
+    )
+
+    const columns = React.useMemo(() => {
+        if (!enableRowSelection) return userColumns
+        return [selectionColumn, ...userColumns]
+    }, [enableRowSelection, selectionColumn, userColumns])
+
+    const getRowId = React.useCallback(
+        (originalRow: TData, index: number) =>
+            (getRowIdProp ?? defaultGetRowId)(originalRow, index),
+        [getRowIdProp],
+    )
+
+    const onColumnSizingChangeInternal = React.useCallback<OnChangeFn<ColumnSizingState>>(
+        (updater) => {
+            if (controlledOnColumnSizingChange) {
+                controlledOnColumnSizingChange(updater)
+                return
+            }
+            setInternalColumnSizing((old) => {
+                const next = functionalUpdate(updater, old)
+                debouncedSizingCommit(next)
+                return next
+            })
+        },
+        [controlledOnColumnSizingChange, debouncedSizingCommit],
+    )
+
+    const direction = useDirection()
+
+    const table = useReactTable({
+        data,
+        columns,
+        defaultColumn: {
+            minSize: 50,
+            size: 150,
+        },
+        columnResizeMode: "onChange",
+        columnResizeDirection: direction,
+        enableColumnResizing,
+        getCoreRowModel: getCoreRowModel(),
+        getRowId,
+        onColumnSizingChange: onColumnSizingChangeInternal,
+        onRowSelectionChange: setRowSelection,
+        state: {
+            columnSizing,
+            rowSelection,
+        },
+        enableRowSelection,
+    })
+
+    const headerGroup = table.getHeaderGroups()[0]
+    const gridTemplateColumns = headerGroup
+        ? gridTemplateFromHeaders(headerGroup.headers)
+        : ""
+
+    const { rows } = table.getRowModel()
+
+    const rowVirtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => rowHeight,
+        overscan: 10,
+    })
+
+    const maxHeightStyle =
+        typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+
+    if (data.length === 0) {
+        return (
+            <div
+                className={cn(
+                    "bg-surface-gray-2 text-ink-gray-5 flex min-h-32 items-center justify-center rounded-md px-4 text-sm",
+                    className,
+                )}
+            >
+                {emptyState ?? "No data"}
+            </div>
+        )
+    }
+
+    /** Tracks + column gaps + horizontal padding (`px-2` × 2) so header and body share one scroll width. */
+    const colCount = headerGroup?.headers.length ?? 0
+    const minTableOuterWidth =
+        table.getCenterTotalSize() +
+        Math.max(0, colCount - 1) * 16 +
+        16
+
+    return (
+        <div className={cn("flex min-w-0 flex-col", className)} role="grid">
+            <div
+                ref={parentRef}
+                className={cn("min-h-0 overflow-auto", scrollAreaClassName)}
+                style={{ maxHeight: maxHeightStyle }}
+            >
+                {headerGroup ? (
+                    <div
+                        className="bg-surface-gray-2 sticky top-0 z-10 mb-2 grid w-full items-center gap-x-4 rounded p-2"
+                        role="row"
+                        style={{
+                            display: "grid",
+                            gridTemplateColumns,
+                            minWidth: `max(100%, ${minTableOuterWidth}px)`,
+                            boxSizing: "border-box",
+                        }}
+                    >
+                        {headerGroup.headers.map((header) => {
+                            const meta = header.column.columnDef.meta as ListViewColumnMeta | undefined
+                            return (
+                                <div
+                                    key={header.id}
+                                    className={cn(
+                                        "text-ink-gray-5 group relative flex min-w-0 items-center px-1 text-sm",
+                                        alignClass(meta),
+                                    )}
+                                    role="columnheader"
+                                >
+                                    <div className="min-w-0 flex-1 truncate">
+                                        {header.isPlaceholder
+                                            ? null
+                                            : flexRender(header.column.columnDef.header, header.getContext())}
+                                    </div>
+                                    {enableColumnResizing && header.column.getCanResize() ? (
+                                        <>
+                                            <span
+                                                aria-hidden
+                                                className={cn(
+                                                    "pointer-events-none absolute ltr:right-0 rtl:left-0 z-1 w-0.5 bg-gray-400",
+                                                    "opacity-0 transition-[opacity,background-color] ease-in-out duration-150",
+                                                    "group-hover:opacity-100 group-hover:bg-gray-400",
+                                                    header.column.getIsResizing() && "bg-outline-gray-6 opacity-100",
+                                                )}
+                                                style={{ height: "100%" }}
+                                            />
+                                            <div
+                                                role="separator"
+                                                aria-orientation="vertical"
+                                                aria-label="Resize column"
+                                                onMouseDown={(e) => {
+                                                    e.preventDefault()
+                                                    document.body.classList.add("select-none", "cursor-col-resize")
+                                                    const end = () => {
+                                                        document.body.classList.remove("select-none", "cursor-col-resize")
+                                                        window.removeEventListener("mouseup", end)
+                                                        window.removeEventListener("touchend", end)
+                                                    }
+                                                    window.addEventListener("mouseup", end)
+                                                    window.addEventListener("touchend", end)
+                                                    header.getResizeHandler()(e)
+                                                }}
+                                                onTouchStart={header.getResizeHandler()}
+                                                className="absolute top-0 ltr:right-0 rtl:left-0 z-10 h-full w-2 max-w-[12px] cursor-col-resize touch-none select-none bg-transparent"
+                                            />
+                                        </>
+                                    ) : null}
+                                </div>
+                            )
+                        })}
+                    </div>
+                ) : null}
+
+                <div
+                    className="relative w-full"
+                    style={{
+                        height: `${rowVirtualizer.getTotalSize()}px`,
+                        minWidth: `max(100%, ${minTableOuterWidth}px)`,
+                        boxSizing: "border-box",
+                    }}
+                >
+                    {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                        const row = rows[virtualRow.index]
+                        if (!row) return null
+                        const leadDataColumnIndex = enableRowSelection ? 1 : 0
+                        return (
+                            <div
+                                key={row.id}
+                                data-index={virtualRow.index}
+                                role="row"
+                                className={cn(
+                                    "ease-in-out absolute top-0 ltr:left-0 rtl:right-0 w-full min-w-0 rounded px-2 transition-all duration-300",
+                                    // virtualRow.index > 0 && "border-t border-outline-gray-1",
+                                    !row.getIsSelected() && "hover:bg-surface-menu-bar",
+                                    row.getIsSelected() && "bg-surface-gray-2 hover:bg-surface-gray-3",
+                                    onRowClick && "cursor-pointer",
+                                )}
+                                style={{
+                                    display: "grid",
+                                    gridTemplateColumns,
+                                    boxSizing: "border-box",
+                                    columnGap: "1rem",
+                                    height: `${rowHeight}px`,
+                                    transform: `translateY(${virtualRow.start}px)`,
+                                }}
+                                onClick={(e) => {
+                                    if (onRowClick) onRowClick(row.original, e)
+                                }}
+                            >
+                                {virtualRow.index > 0 && <div className="absolute top-0 inset-s-2 inset-e-2 h-px bg-outline-gray-1" />}
+                                {row.getVisibleCells().map((cell, cellIndex) => {
+                                    const meta = cell.column.columnDef.meta as ListViewColumnMeta | undefined
+                                    return (
+                                        <div
+                                            key={cell.id}
+                                            role="gridcell"
+                                            className={cn(
+                                                "flex min-w-0 items-center overflow-hidden text-sm",
+                                                cellIndex === leadDataColumnIndex
+                                                    ? "text-ink-gray-8"
+                                                    : "text-ink-gray-7",
+                                                alignClass(meta),
+                                                tabularNumsClass(meta),
+                                            )}
+                                        >
+                                            <ListViewCellBody cell={cell} row={row} meta={meta}>
+                                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                            </ListViewCellBody>
+                                        </div>
+                                    )
+                                })}
+
+
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+/**
+ * Div-based list with CSS Grid columns, optional resize handles, row virtualization, and frappe-ui–aligned Espresso tokens.
+ */
+export function ListView<TData>(props: ListViewProps<TData>) {
+    return <ListViewInner {...props} />
+}
+
+export type { ColumnSizingState, RowSelectionState }

banking/src/components/ui/loaders.tsx

@@ -0,0 +1,27 @@
+import { Skeleton } from "./skeleton"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table"
+
+export const TableLoader = ({ rows = 10, columns = 5 }: { rows?: number, columns?: number }) => {
+    return <Table>
+        <TableHeader>
+            <TableRow>
+                {Array.from({ length: columns }).map((_, index) => (
+                    <TableHead key={index}>
+                        <Skeleton className="h-4 w-full" />
+                    </TableHead>
+                ))}
+            </TableRow>
+        </TableHeader>
+        <TableBody>
+            {Array.from({ length: rows }).map((_, index) => (
+                <TableRow key={index}>
+                    {Array.from({ length: columns }).map((_, index) => (
+                        <TableCell key={index}>
+                            <Skeleton className="h-4 w-full" />
+                        </TableCell>
+                    ))}
+                </TableRow>
+            ))}
+        </TableBody>
+    </Table>
+}

banking/src/components/ui/markdown.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import rehypeRaw from 'rehype-raw'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+// import './markdown.css'
+
+interface MarkdownRendererProps {
+    content: string,
+    className?: string
+}
+
+const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content }) => {
+    return <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw]}
+    // components={{
+    //     p: (props) => <Text {...props} as='p' />,
+    //     ul: (props) => <UnorderedList {...props} />,
+    //     ol: (props) => <OrderedList {...props} />,
+    //     li: (props) => <ListItem {...props} />,
+    //     a: (props) => <Link {...props} />,
+    // }}>
+    >
+        {content}
+    </ReactMarkdown>
+}
+
+export default MarkdownRenderer

banking/src/components/ui/popover.tsx

@@ -0,0 +1,87 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-surface-modal rounded-lg border p-3 shadow-xl outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin)",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-ink-gray-5", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+}

banking/src/components/ui/progress.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { cva, VariantProps } from "class-variance-authority"
+
+const progressVariants = cva(
+  "bg-surface-gray-2 relative w-full overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        sm: "h-0.5",
+        md: "h-1",
+        lg: "h-2.5",
+        xl: "h-3"
+      }
+    }
+  }
+)
+
+interface ProgressProps extends React.ComponentProps<typeof ProgressPrimitive.Root>, VariantProps<typeof progressVariants> {
+  /** Optional text label displayed on the progress bar */
+  label?: React.ReactNode,
+  /** Whether to show a hint/tooltip for the progress value */
+  hint?: boolean,
+  /** Override the default hint text with custom progress value */
+  hintText?: React.ReactNode
+}
+
+function Progress({
+  className,
+  value,
+  size = "sm",
+  label,
+  hint,
+  hintText,
+  ...props
+}: ProgressProps) {
+
+  const progressValue = hintText ? hintText : `${value}%`
+
+  return (
+    <div className="flex flex-col gap-2.5">
+      {label || hint ? <div className="flex items-center justify-between gap-1">
+        {label && <span className="text-base font-medium text-ink-gray-7">{label}</span>}
+        {hint && <span className="text-base font-medium text-ink-gray-5">{progressValue}</span>}
+      </div> : null}
+      <ProgressPrimitive.Root
+        data-slot="progress"
+        data-size={size}
+        className={cn(
+          progressVariants({ size }),
+          className
+        )}
+        {...props}
+      >
+        <ProgressPrimitive.Indicator
+          data-slot="progress-indicator"
+          className="bg-surface-gray-7 rounded-xl h-full w-full flex-1 transition-all"
+          style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+        />
+      </ProgressPrimitive.Root>
+    </div>
+  )
+}
+
+export { Progress }

banking/src/components/ui/radio-group.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import { CircleIcon } from "lucide-react"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-outline-gray-2 text-ink-gray-7 focus-visible:border-outline-gray-1 focus-visible:ring-outline-gray-1/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

banking/src/components/ui/select.tsx

@@ -0,0 +1,221 @@
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { cva, VariantProps } from "class-variance-authority"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+
+const selectVariants = cva(cn("flex w-fit items-center justify-between gap-2 min-w-0 transition-all outline-none border border-transparent whitespace-nowrap",
+  "focus-visible:bg-surface-white focus-visible:border-outline-gray-4 focus-visible:shadow-focus-gray",
+  "active:bg-surface-white active:shadow-sm active:border-outline-gray-4 data-[state=open]:border-outline-gray-4",
+  "placeholder:text-ink-gray-4 text-ink-gray-7",
+  "disabled:bg-surface-gray-1 disabled:placeholder:text-ink-gray-3 disabled:text-ink-gray-3 disabled:cursor-not-allowed disabled:pointer-events-none",
+  "aria-readonly:bg-surface-gray-1 aria-readonly:text-ink-gray-6 aria-readonly:pointer-events-none aria-invalid:shadow-focus-red aria-invalid:border-outline-red-3",
+  // Disable most styles inside an input group
+  "in-data-[slot=input-group]:border-transparent! in-data-[slot=input-group]:focus-visible:shadow-none! in-data-[slot=input-group]:bg-transparent!"),
+  {
+    variants: {
+      inputSize: {
+        sm: "text-base rounded py-1.5 px-2 h-7",
+        md: "text-base rounded py-2 px-2.5 h-8",
+        lg: "text-lg rounded-md py-[11px] px-3 h-10",
+      },
+      variant: {
+        subtle: "bg-surface-gray-2 hover:bg-surface-gray-3 aria-invalid:bg-surface-red-1",
+        outline: "bg-surface-white border-outline-gray-2 hover:border-outline-gray-3 active:border-outline-gray-4 disabled:border-outline-gray-2",
+      }
+    },
+    defaultVariants: {
+      inputSize: "md",
+      variant: "subtle"
+    }
+  }
+)
+
+function SelectTrigger({
+  className,
+  inputSize = "md",
+  variant = "subtle",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & VariantProps<typeof selectVariants>) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-input-size={inputSize}
+      className={cn(
+        "data-placeholder:text-ink-gray-4 [&_svg:not([class*='text-'])]:text-ink-gray-7",
+        "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        selectVariants({ inputSize, variant }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-surface-modal rounded-lg min-w-32 border shadow-xl",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto",
+          position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-ink-gray-4 px-2 py-1.5 text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "outline-hidden select-none relative flex w-full cursor-default items-center gap-2 rounded py-1.5 pe-8 px-2",
+        "focus:bg-surface-gray-2 text-ink-gray-6 [&_svg:not([class*='text-'])]:text-ink-gray-6 text-base [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "data-disabled:pointer-events-none data-disabled:text-ink-gray-3",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute ltr:right-2 rtl:left-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-outline-gray-modals pointer-events-none mx-0.5 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

banking/src/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-outline-gray-modals shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

banking/src/components/ui/settings-dialog.tsx

@@ -0,0 +1,273 @@
+import * as React from "react"
+import { Tabs as TabsPrimitive, Dialog as DialogPrimitive } from "radix-ui"
+import { cn } from "@/lib/utils"
+import { DialogContent } from "./dialog"
+
+/**
+ * Sample Usage:
+ *
+ * <Dialog open={open} onOpenChange={setOpen}>
+ * <DialogTrigger>
+ * ...your content...
+ * </DialogTrigger>
+ * 
+ *   <SettingsDialog onClose={() => setOpen(false)} defaultValue="preferences">
+ *     <SettingsTabs>
+ *       <SettingsTabGroup header="Configuration">
+ *         <SettingsTabItem icon={<SlidersVerticalIcon />} label="Preferences" value="preferences" />
+ *         <SettingsTabItem icon={<ZapIcon />} label="Matching Rules" value="rules" />
+ *       </SettingsTabGroup>
+ *       <SettingsTabGroup header="Setup">
+ *         <SettingsTabItem icon={<LandmarkIcon />} label="Bank Accounts" value="bank-accounts" />
+ *         <SettingsTabItem icon={<ListIcon />} label="Masters" value="masters" />
+ *       </SettingsTabGroup>
+ *     </SettingsTabs>
+ *
+ *     <SettingsPanels>
+ *       <SettingsPanel value="preferences"><Preferences /></SettingsPanel>
+ *       <SettingsPanel value="rules"><MatchingRules /></SettingsPanel>
+ *       <SettingsPanel value="bank-accounts"><BankAccounts /></SettingsPanel>
+ *       <SettingsPanel value="masters"><Masters /></SettingsPanel>
+ *     </SettingsPanels>
+ *   </SettingsDialog>
+ * </Dialog>
+ */
+
+type SettingsDialogContextValue = {
+    onClose?: VoidFunction
+}
+
+const SettingsDialogContext = React.createContext<SettingsDialogContextValue>({})
+
+/**
+ * Exposes `onClose` to descendant panels so they can dismiss the dialog after
+ * a successful save without prop-drilling.
+ */
+export const useSettingsDialog = () => React.useContext(SettingsDialogContext)
+
+type SettingsDialogProps = Omit<
+    React.ComponentProps<typeof TabsPrimitive.Root>,
+    "orientation"
+> & {
+    onClose?: VoidFunction
+    contentClassName?: string
+}
+
+function SettingsDialog({
+    children,
+    className,
+    contentClassName,
+    onClose,
+    ...props
+}: SettingsDialogProps) {
+    const contextValue = React.useMemo(() => ({ onClose }), [onClose])
+
+    return (
+        <DialogContent className={cn("min-w-5xl max-lg:min-w-[98vw] p-0 overflow-y-hidden", contentClassName)} showCloseButton={false}>
+            <SettingsDialogContext.Provider value={contextValue}>
+                <TabsPrimitive.Root
+                    data-slot="settings-dialog"
+                    orientation="vertical"
+                    className={cn(
+                        "flex h-[calc(100vh-8rem)] bg-surface-menu-bar",
+                        className
+                    )}
+                    {...props}
+                >
+                    {children}
+                </TabsPrimitive.Root>
+            </SettingsDialogContext.Provider>
+        </DialogContent>
+    )
+}
+
+function SettingsTabs({
+    className,
+    ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+    return (
+        <TabsPrimitive.List
+            data-slot="settings-tabs"
+            className={cn(
+                "flex flex-col w-56 bg-surface-menu-bar rounded-s-lg shrink-0 overflow-y-auto m-1",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+type SettingsTabGroupProps = React.ComponentProps<"div"> & {
+    header?: React.ReactNode
+}
+
+function SettingsTabGroup({
+    children,
+    header,
+    className,
+    ...props
+}: SettingsTabGroupProps) {
+    return (
+        <div data-slot="settings-tab-group" className={className} {...props}>
+            {header && (
+                <div className="h-7.5 px-2 py-[7px] my-[3px] flex cursor-default gap-1.5 text-xs font-medium text-ink-gray-5 transition-all duration-300 ease-in-out sticky top-0 z-10 bg-surface-menu-bar">
+                    <span>{header}</span>
+                </div>
+            )}
+            <nav className="space-y-[3px] px-1">{children}</nav>
+            <div className="mb-0.5 mt-[5px]"></div>
+        </div>
+    )
+}
+
+type SettingsTabItemProps = React.ComponentProps<typeof TabsPrimitive.Trigger> & {
+    icon?: React.ReactNode
+    label: React.ReactNode
+}
+
+function SettingsTabItem({
+    icon,
+    label,
+    className,
+    ...props
+}: SettingsTabItemProps) {
+    return (
+        <TabsPrimitive.Trigger
+            data-slot="settings-tab-item"
+            className={cn(
+                "flex h-7.5 cursor-pointer items-center rounded text-ink-gray-6 duration-300 ease-in-out focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-outline-gray-3 w-full",
+                "hover:bg-surface-gray-3",
+                "data-[state=active]:bg-surface-selected data-[state=active]:shadow-sm data-[state=active]:hover:bg-surface-selected",
+                className
+            )}
+            {...props}
+        >
+            <div className="flex w-full items-center justify-between duration-300 ease-in-out px-2 py-[7px]">
+                <div className="flex items-center truncate">
+                    {icon && (
+                        <div className="[&_svg:not([class*='size-'])]:size-4 text-ink-gray-6 [&_svg:not([class*='text-'])]:text-ink-gray-6">
+                            {icon}
+                        </div>
+                    )}
+                    <span
+                        className={cn(
+                            "flex-1 shrink-0 truncate text-sm duration-300 ease-in-out w-auto opacity-100 text-ink-gray-6",
+                            icon && "ms-2"
+                        )}
+                    >
+                        {label}
+                    </span>
+                </div>
+            </div>
+        </TabsPrimitive.Trigger>
+    )
+}
+
+function SettingsPanels({
+    className,
+    ...props
+}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="settings-panels"
+            className={cn(
+                "flex flex-col flex-1 overflow-y-auto bg-surface-modal",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function SettingsPanel({
+    className,
+    ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+    return (
+        <TabsPrimitive.Content
+            data-slot="settings-panel"
+            className={cn("flex flex-col h-full w-full text-ink-gray-8 py-8 px-6 gap-6", className)}
+            {...props}
+        />
+    )
+}
+
+/**
+ * Usage:
+ * 
+ * <SettingsPanelHeader actions={<><Button>Add</Button></>}>
+ * 
+ * <SettingsPanelTitle>Settings</SettingsPanelTitle>
+ * <SettingsPanelDescription>Settings description</SettingsPanelDescription>
+ * 
+ * </SettingsPanelHeader>
+ */
+function SettingsPanelHeader({
+    className,
+    children,
+    actions,
+    ...props
+}: React.ComponentProps<"div"> & { actions?: React.ReactNode }) {
+    return (
+        <div
+            data-slot="dialog-header"
+            className={cn("flex justify-between items-start px-2 text-ink-gray-7", className)}
+            {...props}
+        >
+            <div className="flex flex-col gap-1 w-full">
+                {children}
+            </div>
+            <div className="flex item-center space-x-2 w-fit justify-end">
+                {actions}
+            </div>
+        </div>
+    )
+}
+
+function SettingsPanelTitle({
+    className,
+    ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+    return (
+        <DialogPrimitive.Title
+            data-slot="dialog-title"
+            className={cn("flex gap-2 text-xl font-semibold leading-none h-5", className)}
+            {...props}
+        />
+    )
+}
+
+function SettingsPanelDescription({
+    className,
+    ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+    return (
+        <DialogPrimitive.Description
+            data-slot="dialog-description"
+            className={cn("text-p-base text-ink-gray-6", className)}
+            {...props}
+        />
+    )
+}
+
+function SettingsPanelContent({
+    className,
+    ...props
+}: React.ComponentProps<"div">) {
+    return (
+        <div className={cn("flex-1 flex flex-col overflow-y-auto px-2", className)} {...props} />
+    )
+}
+
+export {
+    SettingsDialog,
+    SettingsTabs,
+    SettingsTabGroup,
+    SettingsTabItem,
+    SettingsPanels,
+    SettingsPanel,
+    SettingsPanelHeader,
+    SettingsPanelTitle,
+    SettingsPanelDescription,
+    SettingsPanelContent
+}

banking/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-surface-gray-2 animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

banking/src/components/ui/sonner.tsx

@@ -0,0 +1,53 @@
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+import { useTheme } from "./theme-provider"
+
+const themeMap = {
+    "Automatic": "system",
+    "Dark": "dark",
+    "Light": "light",
+}
+
+const Toaster = ({ ...props }: ToasterProps) => {
+    const { theme = "Automatic" } = useTheme()
+
+    return (
+        <Sonner
+            theme={themeMap[theme as keyof typeof themeMap] as ToasterProps["theme"]}
+            className="toaster group"
+            icons={{
+                success: (
+                    <CircleCheckIcon className="size-4" />
+                ),
+                info: (
+                    <InfoIcon className="size-4" />
+                ),
+                warning: (
+                    <TriangleAlertIcon className="size-4" />
+                ),
+                error: (
+                    <OctagonXIcon className="size-4" />
+                ),
+                loading: (
+                    <Loader2Icon className="size-4 animate-spin" />
+                ),
+            }}
+            style={
+                {
+                    "--normal-bg": "var(--surface-gray-1)",
+                    "--normal-text": "var(--text-ink-gray-8)",
+                    "--normal-border": "var(--outline-gray-1)",
+                    "--border-radius": "var(--radius)",
+                } as React.CSSProperties
+            }
+            toastOptions={{
+                classNames: {
+                    toast: "cn-toast",
+                },
+            }}
+            {...props}
+        />
+    )
+}
+
+export { Toaster }

banking/src/components/ui/stats.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+export const StatContainer = ({ children, className }: { children: React.ReactNode, className?: string }) => {
+    return <div className={cn("flex flex-col gap-1.5 p-2", className)}>{children}</div>
+}
+
+export const StatLabel = ({ children, className }: { children: React.ReactNode, className?: string }) => {
+    return <span className={cn("uppercase text-2xs font-medium text-ink-gray-6", className)}>{children}</span>
+}
+
+export const StatValue = ({ children, className }: { children: React.ReactNode, className?: string }) => {
+    return <span className={cn("text-xl text-ink-gray-8 font-semibold tabular-nums", className)}>{children}</span>
+}

banking/src/components/ui/switch.tsx

@@ -0,0 +1,45 @@
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "sm",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "md"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer cursor-pointer group/switch inline-flex shrink-0 items-center rounded-full transition-all outline-none disabled:cursor-not-allowed",
+        "data-[state=unchecked]:bg-ink-gray-2 data-[state=unchecked]:hover:bg-ink-gray-3 data-[state=unchecked]:active:bg-ink-gray-4 data-[state=unchecked]:disabled:bg-ink-gray-1",
+        "data-[state=checked]:bg-ink-gray-8 data-[state=checked]:hover:bg-ink-gray-7 data-[state=checked]:active:bg-ink-gray-6 data-[state=checked]:disabled:bg-ink-gray-1",
+        "data-[size=sm]:h-4 data-[size=sm]:w-6.5 data-[size=md]:h-5 data-[size=md]:w-8",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "shadow-switch block pointer-events-none rounded-full ring-0 transition-transform bg-ink-white",
+          "group-data-[size=sm]/switch:size-3 group-data-[size=md]/switch:size-3.5",
+          // Unchecked: keep thumb near the start edge (mirrored by dir)
+          "ltr:data-[state=unchecked]:group-data-[size=sm]/switch:translate-x-0.5",
+          "ltr:data-[state=unchecked]:group-data-[size=md]/switch:translate-x-[3px]",
+          "rtl:data-[state=unchecked]:group-data-[size=sm]/switch:-translate-x-0.5",
+          "rtl:data-[state=unchecked]:group-data-[size=md]/switch:-translate-x-[3px]",
+          // Checked: move to opposite edge (mirrored by dir)
+          "ltr:data-[state=checked]:translate-x-[calc(100%-0px)]",
+          "rtl:data-[state=checked]:-translate-x-[calc(100%-0px)]",
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

banking/src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, containerClassName, ...props }: React.ComponentProps<"table"> & { containerClassName?: string }) {
+  return (
+    <div
+      data-slot="table-container"
+      className={cn("relative w-full overflow-x-auto rounded border-outline-gray-1 border", containerClassName)}
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-surface-gray-2 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-surface-gray-1 data-[state=selected]:bg-surface-gray-2 border-b transition-all",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "bg-surface-gray-2 text-ink-gray-5 text-sm p-2 text-start align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle text-base whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-ink-gray-5 my-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

banking/src/components/ui/tabs.tsx

@@ -0,0 +1,168 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list text-ink-gray-5 inline-flex group-data-[orientation=horizontal]/tabs:w-full group-data-[orientation=vertical]/tabs:w-fit items-center justify-start group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        subtle: "bg-surface-gray-2 p-px",
+        outline: "p-px border border-outline-gray-1",
+        underline: "group-data-[orientation=horizontal]/tabs:border-b border-outline-gray-1 group-data-[orientation=vertical]/tabs:border-e group-data-[orientation=horizontal]/tabs:gap-6 group-data-[orientation=vertical]/tabs:gap-2",
+      },
+      size: {
+        sm: "group-data-[orientation=horizontal]/tabs:h-7",
+        md: "group-data-[orientation=horizontal]/tabs:h-7.5"
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "subtle",
+        size: "sm",
+        className: "rounded gap-1"
+      },
+      {
+        variant: "subtle",
+        size: "md",
+        className: "rounded-md gap-1.5 font-medium"
+      },
+      {
+        variant: "outline",
+        size: "sm",
+        className: "rounded gap-1",
+      },
+      {
+        variant: "outline",
+        size: "md",
+        className: "rounded-md gap-1.5 font-medium",
+      },
+      {
+        variant: "underline",
+        size: "sm",
+        className: "",
+      },
+      {
+        variant: "underline",
+        size: "md",
+        className: "",
+      },
+    ],
+    defaultVariants: {
+      variant: "underline",
+      size: "md",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "underline",
+  size = "md",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      data-size={size}
+      className={cn(tabsListVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        // Common
+        "whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50",
+        "text-ink-gray-5 text-base data-[state=active]:text-ink-gray-8 hover:text-ink-gray-8 relative gap-2",
+        "flex items-center justify-center group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start",
+        // Icon Sizes - 16px for sm, 18px for md
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 group-data-[size=sm]/tabs-list:[&_svg:not([class*='size-'])]:size-4 group-data-[size=md]/tabs-list:[&_svg:not([class*='size-'])]:size-4.5",
+
+        // Variant: subtle, size: sm
+        "group-data-[variant=subtle]/tabs-list:group-data-[size=sm]/tabs-list:py-[5px] group-data-[variant=subtle]/tabs-list:group-data-[size=sm]/tabs-list:px-2 group-data-[variant=subtle]/tabs-list:group-data-[size=sm]/tabs-list:rounded-[7px]",
+        // Variant: subtle, size: md
+        "group-data-[variant=subtle]/tabs-list:group-data-[size=md]/tabs-list:py-1.5 group-data-[variant=subtle]/tabs-list:group-data-[size=md]/tabs-list:px-2.5 group-data-[variant=subtle]/tabs-list:group-data-[size=md]/tabs-list:rounded-[9px]",
+        // Variant: subtle - active - background, text color and shadow applied
+        "group-data-[variant=subtle]/tabs-list:data-[state=active]:bg-surface-selected group-data-[variant=subtle]/tabs-list:data-[state=active]:shadow",
+
+
+        // Variant: outline, size: sm
+        "group-data-[variant=outline]/tabs-list:group-data-[size=sm]/tabs-list:py-[5px] group-data-[variant=outline]/tabs-list:group-data-[size=sm]/tabs-list:px-2 group-data-[variant=outline]/tabs-list:group-data-[size=sm]/tabs-list:rounded-[7px]",
+        // Variant: outline, size: md
+        "group-data-[variant=outline]/tabs-list:group-data-[size=md]/tabs-list:py-1.5 group-data-[variant=outline]/tabs-list:group-data-[size=md]/tabs-list:px-2.5 group-data-[variant=outline]/tabs-list:group-data-[size=md]/tabs-list:rounded-[9px]",
+        // Variant: outline - active - background, text color and shadow applied
+        "group-data-[variant=outline]/tabs-list:data-[state=active]:bg-surface-selected group-data-[variant=outline]/tabs-list:data-[state=active]:shadow",
+
+        // Variant: underline - horizontal
+        "group-data-[variant=underline]/tabs-list:rounded-none ",
+        // Variant: underline - horizontal - no radius
+        "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:px-0",
+        // Variant: underline, size: sm
+        "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs-list:py-1.5 group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs-list:px-1.5",
+        // Variant: underline, size: md
+        "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs-list:py-[7px] group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs-list:font-medium",
+        // Variant: underline - horizontal - active - border applied
+        "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:border-b group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:border-b-transparent group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:data-[state=active]:border-b-ink-gray-8 group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:bottom-px",
+
+
+        // Variant: underline - Vertical
+        "group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:ps-0",
+        // Variant: underline, size: sm
+        "group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs-list:py-1.5 group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs-list:pe-1.5",
+        // Variant: underline, size: md
+        "group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs-list:py-2 group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs-list:pe-2",
+        // Variant: underline - vertical - active - border applied
+        "group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:border-e group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:border-e-transparent group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:data-[state=active]:border-e-ink-gray-8 group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:-right-px",
+
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none group-data-[orientation=vertical]/tabs:px-2 group-data-[orientation=horizontal]/tabs:py-2 group-data-[orientation=vertical]/tabs:h-full", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

banking/src/components/ui/textarea.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { cva, VariantProps } from "class-variance-authority"
+
+
+const textareaVariants = cva(cn("flex field-sizing-content w-full transition-all focus-visible:bg-surface-white focus-visible:border-outline-gray-4 focus-visible:shadow-focus-gray active:bg-surface-white active:shadow-textarea-active active:border-outline-gray-4 outline-none border border-transparent placeholder:text-ink-gray-4 text-ink-gray-7 disabled:bg-surface-gray-1 disabled:placeholder:text-ink-gray-3 disabled:text-ink-gray-3 disabled:cursor-not-allowed aria-readonly:bg-surface-gray-1 aria-readonly:text-ink-gray-6 aria-readonly:pointer-events-none aria-invalid:shadow-focus-red aria-invalid:border-outline-red-3",
+  "in-data-[slot=input-group]:border-transparent! in-data-[slot=input-group]:focus-visible:shadow-none! in-data-[slot=input-group]:bg-transparent!"),
+  {
+    variants: {
+      inputSize: {
+        sm: "text-p-base rounded py-1.5 px-2 min-h-15",
+        md: "text-p-base rounded-md py-2.5 px-3 min-h-20.5",
+        lg: "text-p-lg rounded-md py-3 px-3.5 min-h-25.5",
+      },
+      variant: {
+        subtle: "bg-surface-gray-2 hover:bg-surface-gray-3 aria-invalid:bg-surface-red-1",
+        outline: "bg-surface-white border-outline-gray-2 hover:border-outline-gray-3 active:border-outline-gray-4 disabled:border-outline-gray-2",
+      }
+    },
+    defaultVariants: {
+      inputSize: "md",
+      variant: "subtle"
+    }
+  }
+)
+
+function Textarea({ inputSize = "md", variant = "subtle", className, ...props }: React.ComponentProps<"textarea"> & VariantProps<typeof textareaVariants>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      data-input-size={inputSize}
+      data-variant={variant}
+      className={cn(
+        textareaVariants({ inputSize, variant }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

banking/src/components/ui/theme-provider.tsx

@@ -0,0 +1,89 @@
+import { useFrappePostCall } from "frappe-react-sdk"
+import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "Dark" | "Light" | "Automatic"
+
+type ThemeProviderProps = {
+    children: React.ReactNode
+    defaultTheme?: Theme
+}
+
+type ThemeProviderState = {
+    /** Theme value selected by the user - Light, Dark, Automatic */
+    theme: Theme
+    setTheme: (theme: Theme) => void,
+    /** Resolved theme value - used to apply the theme to the UI - this resolves "Automatic" to "Light" or "Dark" based on the system preference */
+    themeValue: "Light" | "Dark"
+}
+
+const initialState: ThemeProviderState = {
+    theme: "Light",
+    setTheme: () => null,
+    themeValue: "Light",
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+    children,
+    defaultTheme = "Light",
+    ...props
+}: ThemeProviderProps) {
+    const [theme, setTheme] = useState<Theme>(defaultTheme)
+    const [themeValue, setThemeValue] = useState<"Light" | "Dark">(defaultTheme === "Automatic" ? "Light" : defaultTheme)
+
+    const { call: switchTheme } = useFrappePostCall('frappe.core.doctype.user.user.switch_theme')
+
+    useEffect(() => {
+        const root = window.document.documentElement
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+
+        const applySystemTheme = () => {
+            root.classList.remove("light", "dark")
+            root.classList.add(mediaQuery.matches ? "dark" : "light")
+            setThemeValue(mediaQuery.matches ? "Dark" : "Light")
+        }
+
+        if (theme !== "Automatic") {
+            root.classList.remove("light", "dark")
+            root.classList.add(theme.toLowerCase())
+            setThemeValue(theme)
+            return () => { }
+        }
+
+        applySystemTheme()
+        mediaQuery.addEventListener("change", applySystemTheme)
+
+        return () => {
+            mediaQuery.removeEventListener("change", applySystemTheme)
+        }
+    }, [theme])
+
+    const value = {
+        theme,
+        themeValue,
+        setTheme: (theme: Theme) => {
+            switchTheme({
+                theme: theme,
+            }).then(() => {
+                setTheme(theme)
+            })
+            setTheme(theme)
+        },
+    }
+
+    return (
+        <ThemeProviderContext.Provider {...props} value={value}>
+            {children}
+        </ThemeProviderContext.Provider>
+    )
+}
+
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext)
+
+    if (context === undefined)
+        throw new Error("useTheme must be used within a ThemeProvider")
+
+    return context
+}

banking/src/components/ui/tooltip.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 500,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  arrowClassName,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content> & { arrowClassName?: string }) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-surface-gray-7 shadow text-ink-white animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded px-2 py-[5px] text-base text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className={cn("bg-surface-gray-7 fill-surface-gray-7 z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs", arrowClassName)} />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

banking/src/components/ui/typography.tsx

@@ -0,0 +1,45 @@
+import { cn } from "@/lib/utils"
+
+export function H1({ children, className }: { children: React.ReactNode, className?: string }) {
+    return (
+        <h1 className={cn("scroll-m-20 text-3xl font-extrabold text-balance", className)}>
+            {children}
+        </h1>
+    )
+}
+
+export function H2({ children, className }: { children: React.ReactNode, className?: string }) {
+    return (
+        <h2 className={cn("scroll-m-20 border-b pb-2 text-2xl font-semibold first:mt-0", className)}>
+            {children}
+        </h2>
+    )
+}
+
+
+export function H3({ children, className }: { children: React.ReactNode, className?: string }) {
+    return (
+        <h3 className={cn("scroll-m-20 text-xl font-semibold", className)}>
+            {children}
+        </h3>
+    )
+}
+
+export function H4({ children, className }: { children: React.ReactNode, className?: string }) {
+    return (
+        <h4 className={cn("scroll-m-20 text-lg font-semibold", className)}>
+            {children}
+        </h4>
+    )
+}
+
+export function Paragraph({ children, className }: { children: React.ReactNode, className?: string }) {
+    return (
+        <p className={cn("text-p-base", className)}>
+            {children}
+        </p>
+    )
+}
+
+
+

banking/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

banking/src/hooks/useCurrentCompany.ts

@@ -0,0 +1,9 @@
+import { useAtomValue } from "jotai"
+import { atomWithStorage } from "jotai/utils"
+
+export const selectedCompanyAtom = atomWithStorage<string>('bank-rec-selected-company', window.frappe?.boot?.user?.defaults?.company || '')
+
+export const useCurrentCompany = () => {
+    const selectedCompany = useAtomValue(selectedCompanyAtom)
+    return selectedCompany ? selectedCompany : (window.frappe?.boot?.user?.defaults?.company as string)
+}

banking/src/hooks/useDocType.ts

@@ -0,0 +1,30 @@
+import { useFrappeGetCall } from "frappe-react-sdk"
+
+export const useDocType = (doctype: string, with_parent: 0 | 1 = 1, cached_timestamp?: Date) => {
+
+    // @ts-expect-error Locals is available in the FrappeContext
+    const localData = locals?.['DocType']?.[doctype] || null
+    const { data, error, isLoading } = useFrappeGetCall('frappe.desk.form.load.getdoctype', {
+        doctype: doctype,
+        with_parent: with_parent,
+        cached_timestamp: cached_timestamp ?? null,
+    }, localData || !doctype ? null : undefined, {
+        onSuccess: (data) => {
+            if (data) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                data?.docs?.forEach((d: any) => {
+                    // @ts-expect-error Frappe is available in the window
+                    frappe.model.add_to_locals(d)
+                })
+            }
+        },
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+    })
+
+    return {
+        data: localData || (data?.docs?.[0] ?? null),
+        error,
+        isLoading: localData ? false : isLoading
+    }
+}

banking/src/hooks/useFiscalYear.ts

@@ -0,0 +1,13 @@
+import { useFrappeGetCall } from "frappe-react-sdk"
+
+const useFiscalYear = () => {
+
+    return useFrappeGetCall("erpnext.accounts.utils.get_fiscal_year", undefined, 'fiscal_year', {
+        revalidateOnFocus: false,
+        revalidateIfStale: false,
+        revalidateOnReconnect: false
+    })
+
+}
+
+export default useFiscalYear

banking/src/hooks/usePaymentEntryCalculations.tsx

@@ -0,0 +1,138 @@
+import { flt } from "@/lib/numbers"
+import { PaymentEntryDeduction } from "@/types/Accounts/PaymentEntryDeduction"
+import { PaymentEntryReference } from "@/types/Accounts/PaymentEntryReference"
+import { useCallback } from "react"
+import { useFormContext } from "react-hook-form"
+
+export const usePaymentEntryCalculations = () => {
+
+    const { setValue, getValues, watch } = useFormContext()
+
+    const payment_type = watch('payment_type')
+
+    const allocatePartyAmount = (paid_amount: number) => {
+        const deductionsTable = getValues('deductions') ?? []
+        const party_type = getValues('party_type')
+
+        let total_positive_outstanding_including_order = 0
+        let total_negative_outstanding = 0
+        const total_deductions = deductionsTable.reduce((acc: number, row: PaymentEntryDeduction) => acc + row.amount, 0)
+
+        paid_amount -= total_deductions
+
+        const references = getValues('references') ?? []
+        references.forEach((ref: PaymentEntryReference) => {
+            if (flt(ref.outstanding_amount) > 0) {
+                total_positive_outstanding_including_order += flt(ref.outstanding_amount)
+            } else {
+                total_negative_outstanding += Math.abs(flt(ref.outstanding_amount))
+            }
+        })
+        let allocated_negative_outstanding = 0
+        let allocated_positive_outstanding = 0
+        if (
+            (payment_type == "Receive" && party_type == "Customer") ||
+            (payment_type == "Pay" && party_type == "Supplier")
+        ) {
+            if (total_positive_outstanding_including_order > paid_amount) {
+                const remaining_outstanding = total_positive_outstanding_including_order - paid_amount
+                allocated_negative_outstanding = total_negative_outstanding < remaining_outstanding ? total_negative_outstanding : remaining_outstanding
+            }
+
+            allocated_positive_outstanding = paid_amount + allocated_negative_outstanding
+        } else {
+            total_negative_outstanding = flt(total_negative_outstanding)
+            if (paid_amount > total_negative_outstanding) {
+                allocated_positive_outstanding = total_negative_outstanding - paid_amount
+                allocated_negative_outstanding = paid_amount + (total_positive_outstanding_including_order < allocated_positive_outstanding ? total_positive_outstanding_including_order : allocated_positive_outstanding)
+            }
+        }
+
+        references.forEach((ref: PaymentEntryReference, index: number) => {
+            if (flt(ref.outstanding_amount) > 0 && allocated_positive_outstanding >= 0) {
+                setValue(`references.${index}.allocated_amount`, (flt(ref.outstanding_amount) >= allocated_positive_outstanding) ?
+                    allocated_positive_outstanding : ref.outstanding_amount)
+
+                allocated_positive_outstanding -= flt(ref.allocated_amount)
+            } else if (flt(ref.outstanding_amount) < 0 && allocated_negative_outstanding) {
+                setValue(`references.${index}.allocated_amount`, (flt(ref.outstanding_amount) >= allocated_negative_outstanding) ?
+                    -1 * allocated_negative_outstanding : ref.outstanding_amount)
+                allocated_negative_outstanding -= flt(ref.allocated_amount)
+            }
+        })
+
+        setTotalAllocatedAmount()
+    }
+
+    const setDifferenceAmount = useCallback((value: number) => {
+        const base_total_allocated_amount = getValues('base_total_allocated_amount') ?? 0
+        const base_received_amount = getValues('base_received_amount') ?? 0
+        const base_paid_amount = getValues('base_paid_amount') ?? 0
+        const deductionsTable = getValues('deductions') ?? []
+        const base_total_taxes_and_charges = getValues('base_total_taxes_and_charges') ?? 0
+        let difference_amount = 0
+        const base_party_amount = base_total_allocated_amount + flt(value)
+        if (payment_type == "Receive") {
+            difference_amount = base_party_amount - base_received_amount
+        }
+        else if (payment_type == "Pay") {
+            difference_amount = base_paid_amount - base_party_amount
+        }
+        else {
+            difference_amount = base_paid_amount - base_received_amount
+        }
+        const total_deductions = deductionsTable.reduce((acc: number, row: PaymentEntryDeduction) => acc + row.amount, 0)
+        setValue('difference_amount', difference_amount - total_deductions + base_total_taxes_and_charges)
+    }, [getValues, setValue, payment_type])
+
+    const setUnallocatedAmount = useCallback(() => {
+        const deductionsTable = getValues('deductions') ?? []
+        const base_total_allocated_amount = getValues('base_total_allocated_amount') ?? 0
+        const base_received_amount = getValues('base_received_amount') ?? 0
+        const total_allocated_amount = getValues('total_allocated_amount') ?? 0
+        const paid_amount = getValues('paid_amount') ?? 0
+        const base_total_taxes_and_charges = getValues('base_total_taxes_and_charges') ?? 0
+        const base_paid_amount = getValues('base_paid_amount') ?? 0
+        const received_amount = getValues('received_amount') ?? 0
+        const party = getValues('party')
+        let unallocated_amount = 0
+        const total_deductions = deductionsTable.reduce((acc: number, row: PaymentEntryDeduction) => acc + row.amount, 0)
+        if (party) {
+            if (payment_type == "Receive" && base_total_allocated_amount < base_received_amount + total_deductions
+                && total_allocated_amount < paid_amount + total_deductions) {
+                unallocated_amount = base_received_amount + total_deductions + base_total_taxes_and_charges
+                    - base_total_allocated_amount
+            } else if (payment_type == "Pay"
+                && base_total_allocated_amount < base_paid_amount - total_deductions
+                && total_allocated_amount < received_amount + total_deductions) {
+                unallocated_amount = base_paid_amount + base_total_taxes_and_charges - (total_deductions
+                    + base_total_allocated_amount)
+            }
+        }
+        setValue('unallocated_amount', unallocated_amount)
+        setDifferenceAmount(unallocated_amount)
+    }, [getValues, setValue, payment_type, setDifferenceAmount])
+
+    const setTotalAllocatedAmount = useCallback(() => {
+        let total_allocated_amount = 0
+        let base_total_allocated_amount = 0
+
+        const references = getValues('references')
+        references?.forEach((ref: PaymentEntryReference) => {
+            if (ref.allocated_amount) {
+                total_allocated_amount += flt(ref.allocated_amount)
+                base_total_allocated_amount += flt(ref.allocated_amount)
+            }
+        })
+        setValue('total_allocated_amount', Math.abs(total_allocated_amount))
+        setValue('base_total_allocated_amount', Math.abs(base_total_allocated_amount))
+        setUnallocatedAmount()
+    }, [getValues, setValue, setUnallocatedAmount])
+
+    return {
+        setTotalAllocatedAmount,
+        setUnallocatedAmount,
+        setDifferenceAmount,
+        allocatePartyAmount
+    }
+}

banking/src/lib/checks.ts

@@ -0,0 +1,20 @@
+/**
+ * Function to check if a string exists in a list
+ * @param list 
+ * @param item 
+ * @returns 
+ */
+export const in_list = (list: string[], item?: string): boolean => {
+    if (item === undefined) return false
+
+    return list.includes(item)
+}
+
+/**
+ * Function to check if an object is empty
+ * @param obj 
+ * @returns 
+ */
+export const isEmpty = (obj: object) => {
+    return Object.keys(obj).length === 0;
+}

banking/src/lib/company.ts

@@ -0,0 +1,15 @@
+
+export const getCompanyCurrency = (company: string) => {
+    // @ts-expect-error - Locals is synced
+    return locals[':Company']?.[company]?.['default_currency']
+}
+
+export const getCompanyCostCenter = (company: string) => {
+    // @ts-expect-error - Locals is synced
+    return locals[':Company']?.[company]?.['cost_center']
+}
+
+export const getCompany = (company: string) => {
+    // @ts-expect-error - Locals is synced
+    return locals?.[':Company']?.[company]
+}

banking/src/lib/currency.ts

@@ -0,0 +1,24 @@
+export const getCurrencySymbol = (currency: string) => {
+    // @ts-expect-error - Boot is available
+    if (frappe.boot) {
+        // @ts-expect-error - Boot is available
+        if (frappe.boot.sysdefaults && frappe.boot.sysdefaults.hide_currency_symbol == "Yes")
+            return "";
+        // @ts-expect-error - Boot is available
+        if (!currency) currency = frappe.boot.sysdefaults.currency;
+
+        return getCurrencyProperty(currency, 'symbol') || currency;
+    } else {
+        return getCurrencyProperty(currency, 'symbol') || currency
+    }
+}
+
+export const getCurrencyNumberFormat = (currency: string) => {
+    return getCurrencyProperty(currency, 'number_format')
+}
+
+
+export const getCurrencyProperty = (currency: string, property: 'symbol' | 'symbol_on_right' | 'number_format') => {
+    // @ts-expect-error - Locals is synced
+    return locals[':Currency']?.[currency]?.[property]
+}

banking/src/lib/date.ts

@@ -0,0 +1,184 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear'
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import _ from '@/lib/translate';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(advancedFormat);
+dayjs.extend(relativeTime);
+dayjs.extend(quarterOfYear);
+dayjs.extend(customParseFormat);
+
+const FRAPPE_DATE_FORMAT = "YYYY-MM-DD"
+
+export const getUserDateFormat = () => {
+
+    return window?.frappe?.boot?.user?.defaults?.date_format.toUpperCase() || window?.frappe.boot.sysdefaults.date_format.toUpperCase()
+
+}
+// const FRAPPE_DATETIME_FORMAT = "YYYY-MM-DD HH:mm:ss"
+
+export type TimePeriod = 'This Week' | 'This Month' | 'This Quarter' | 'This Year' | 'Last Week' | 'Last Month' | 'Last Quarter' | 'Last Year' | 'Date Range'
+
+export const AVAILABLE_TIME_PERIODS: TimePeriod[] = [
+    'This Month',
+    'This Week',
+    'This Quarter',
+    'This Year',
+    'Last Week',
+    'Last Month',
+    'Last Quarter',
+    'Last Year',
+];
+
+/**
+ * Get the start and end dates for a given time period
+ * @param timePeriod - The time period to get the dates for
+ * @param format - The date format to use (defaults to FRAPPE_DATE_FORMAT)
+ * @param baseDate - Optional base date to use for calculations (defaults to current date)
+ * @returns The start and end dates in specified format, or empty strings if invalid
+ */
+export const getDatesForTimePeriod = (
+    timePeriod: TimePeriod,
+    format: string = FRAPPE_DATE_FORMAT,
+    baseDate?: string
+) => {
+
+    const daysJSObject = baseDate ? dayjs(baseDate) : dayjs()
+
+    // Based on the time period, get the start and end dates
+
+    if (timePeriod === 'This Week') {
+        return {
+            fromDate: daysJSObject.startOf('week').format(format),
+            toDate: daysJSObject.endOf('week').format(format),
+            format: "Do MMM 'YY",
+            translatedLabel: _('This Week')
+        }
+    }
+
+    if (timePeriod === 'This Month' || timePeriod === 'Date Range') {
+        return {
+            fromDate: daysJSObject.startOf('month').format(format),
+            toDate: daysJSObject.endOf('month').format(format),
+            format: "Do MMM 'YY",
+            translatedLabel: _('This Month')
+        }
+    }
+
+    if (timePeriod === 'This Quarter') {
+        return {
+            fromDate: daysJSObject.startOf('quarter').format(format),
+            toDate: daysJSObject.endOf('quarter').format(format),
+            format: 'MMM YYYY',
+            translatedLabel: _('This Quarter')
+        }
+    }
+
+    if (timePeriod === 'This Year') {
+        return {
+            fromDate: daysJSObject.startOf('year').format(format),
+            toDate: daysJSObject.endOf('year').format(format),
+            format: 'MMM YYYY',
+            translatedLabel: _('This Year')
+        }
+    }
+
+    if (timePeriod === 'Last Week') {
+        const lastWeek = daysJSObject.subtract(1, 'week')
+        return {
+            fromDate: lastWeek.startOf('week').format(format),
+            toDate: lastWeek.endOf('week').format(format),
+            format: "Do MMM 'YY",
+            translatedLabel: _('Last Week')
+        }
+    }
+
+    if (timePeriod === 'Last Month') {
+        const lastMonth = daysJSObject.subtract(1, 'month')
+        return {
+            fromDate: lastMonth.startOf('month').format(format),
+            toDate: lastMonth.endOf('month').format(format),
+            format: "Do MMM 'YY",
+            translatedLabel: _('Last Month')
+        }
+    }
+
+    if (timePeriod === 'Last Quarter') {
+        const lastQuarter = daysJSObject.subtract(1, 'quarter')
+        return {
+            fromDate: lastQuarter.startOf('quarter').format(format),
+            toDate: lastQuarter.endOf('quarter').format(format),
+            format: 'MMM YYYY',
+            translatedLabel: _('Last Quarter')
+        }
+    }
+
+    if (timePeriod === 'Last Year') {
+        const lastYear = daysJSObject.subtract(1, 'year')
+        return {
+            fromDate: lastYear.startOf('year').format(format),
+            toDate: lastYear.endOf('year').format(format),
+            format: 'MMM YYYY',
+            translatedLabel: _('Last Year')
+        }
+    }
+
+    return {
+        fromDate: '',
+        toDate: '',
+        format: 'Do MMM YY',
+        translatedLabel: _('Date Range')
+    }
+}
+
+const toUserTimezone = (timestamp: string) => {
+
+    const systemTimezone = window.frappe?.boot?.time_zone?.system
+    const userTimezone = window.frappe?.boot?.time_zone?.user
+
+    if (systemTimezone && userTimezone) {
+        return dayjs.tz(timestamp, systemTimezone).clone().tz(userTimezone)
+    } else {
+        return dayjs(timestamp)
+    }
+
+}
+
+export const getTimeago = (date?: string) => {
+    if (date) {
+        const userDate = toUserTimezone(date)
+        return userDate.fromNow()
+    }
+    return ''
+}
+
+export const formatDate = (date?: string | Date, format?: string) => {
+
+    if (!format) {
+        format = getUserDateFormat()
+    }
+
+    if (date) {
+        return dayjs(date).format(format)
+    }
+    return ''
+}
+
+/**
+ * Utility function to convert a date string to a Date object
+ * @param date 
+ * @returns 
+ */
+export const toDate = (date: string, format: string = "YYYY-MM-DD") => {
+    return dayjs(date, format).toDate()
+}
+
+export const today = () => {
+    return dayjs().format(FRAPPE_DATE_FORMAT)
+}

banking/src/lib/file.ts

@@ -0,0 +1,68 @@
+/**
+ * Function to return extension of a file
+ * @param filename name of the file with extension
+ * @returns extension
+ */
+export const getFileExtension = (filename: string) => {
+
+    const fileNameWithoutQuery = filename?.split('?')[0]
+
+    const extension = fileNameWithoutQuery?.split('.').pop()?.toLocaleLowerCase() ?? ''
+    return extension;
+}
+
+/**
+ * Function to format bytes to human readable format
+ * @param bytes size in bytes
+ * @param decimals number of decimal places
+ * @returns string of human readable size
+ */
+export const formatBytes = (bytes: number, decimals = 2) => {
+
+    if (bytes === 0) return '0 Bytes'
+
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i]
+}
+
+
+export const imageExt = ["jpeg", "jpg", "png"]
+
+export const excelExt = ['csv', 'xls', 'xlsx']
+
+export const pptExt = ['ppt', 'pptx']
+
+export const wordExt = ['doc', 'docx']
+
+export const videoExt = ['mp4', 'mkv', 'webm', 'avi', 'mov']
+
+export const audioExt = ['mp3', 'wav', 'ogg', 'flac']
+
+export const getFileType = (ext: string) => {
+    switch (ext) {
+        case 'pdf': return 'pdf'
+        case 'doc': return 'word'
+        case 'docx': return 'word'
+        case 'xls': return 'excel'
+        case 'xlsx': return 'excel'
+        case 'ppt': return 'powerpoint'
+        case 'pptx': return 'powerpoint'
+        case 'mp3': return 'audio'
+        case 'wav': return 'audio'
+        case 'ogg': return 'audio'
+        case 'flac': return 'audio'
+        case 'mp4': return 'video'
+        case 'mkv': return 'video'
+        case 'webm': return 'video'
+        case 'avi': return 'video'
+        case 'mov': return 'video'
+        case 'jpeg': return 'image'
+        case 'jpg': return 'image'
+        case 'png': return 'image'
+        default: return 'file'
+    }
+}

banking/src/lib/frappe.ts

@@ -0,0 +1,85 @@
+import { FrappeError } from "frappe-react-sdk"
+
+interface ParsedErrorMessage {
+    message: string,
+    title?: string,
+    indicator?: string,
+}
+
+
+export const getErrorMessage = (error?: FrappeError | null): string => {
+    const messages = getErrorMessages(error)
+    return messages.map(m => m.message).join('\n')
+}
+
+/**
+ * Standard function to parse the error messages from the FrappeError object
+ * @param error The FrappeError object to parse
+ * @returns An array of ParsedErrorMessage objects
+ */
+export const getErrorMessages = (error?: FrappeError | null): ParsedErrorMessage[] => {
+    if (!error) return []
+    let eMessages: ParsedErrorMessage[] = error?._server_messages ? JSON.parse(error?._server_messages) : []
+    eMessages = eMessages.map((m) => {
+        try {
+
+            // @ts-expect-error - it can sometimes be a string
+            return JSON.parse(m)
+
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        catch (e) {
+            return m
+        }
+    })
+
+    if (eMessages.length === 0) {
+        // Get the message from the exception by removing the exc_type
+        const indexOfFirstColon = error?.exception?.indexOf(':')
+        if (indexOfFirstColon) {
+            const exception = error?.exception?.slice(indexOfFirstColon + 1)
+            if (exception) {
+                eMessages = [{
+                    message: exception,
+                    title: "Error"
+                }]
+            }
+        }
+
+        if (eMessages.length === 0) {
+            eMessages = [{
+                message: error?.message,
+                title: "Error",
+                indicator: "red"
+            }]
+        }
+    }
+    return eMessages
+
+}
+
+export const slug = (name?: string) => {
+    return name?.toLowerCase().replace(/ /g, "-") ?? "";
+}
+
+export const scrub = (txt?: string) => {
+    return (txt || "").replace(/ /g, "_").toLowerCase(); // use
+}
+
+export const unscrub = (txt?: string) => {
+    return (txt || "").replace(/-|_/g, " ").replace(/\w*/g, function (keywords) {
+        return keywords.charAt(0).toUpperCase() + keywords.substring(1).toLowerCase();
+    });
+}
+
+export const getSystemDefault = (fieldName: string, fallback?: string) => {
+    return window.frappe?.boot?.sysdefaults?.[fieldName] ?? fallback
+}
+
+export const getUserDefault = (fieldName: string, fallback?: string) => {
+    return window.frappe?.boot?.user?.defaults?.[fieldName] ?? fallback
+}
+
+export const getBootFieldData = (fieldName: string, fallback?: string) => {
+    return window.frappe?.boot?.[fieldName] ?? fallback
+}