fix: Swedish translations

refactor(journal_entry): extract reference, asset and document-builder services

.github/helper/merge_po_files.py

@@ -0,0 +1,52 @@
+#!/usr/bin/env python3
+"""Overlay develop's .po translations onto hotfix's .po files.
+
+Called by sync_hotfix_translations.sh before `bench update-po-files`.
+Merge rules:
+  a. msgid absent from develop  → keep hotfix's existing msgstr
+  b. language not yet in hotfix → copy file as-is (bench will filter to main.pot)
+  c. msgid present in both      → use develop's msgstr
+"""
+from datetime import datetime, timezone
+from pathlib import Path
+
+from babel.messages.pofile import read_po, write_po
+
+DEVELOP = Path("/tmp/develop-po/erpnext/locale/")
+LOCALE  = Path("./apps/erpnext/erpnext/locale/")
+
+added = updated = 0
+
+for src in sorted(DEVELOP.glob("*.po")):
+    dst = LOCALE / src.name
+
+    with src.open("rb") as f:
+        dev = read_po(f)
+
+    if not dst.exists():
+        dev.revision_date = datetime.now(timezone.utc)
+        with dst.open("wb") as f:
+            write_po(f, dev)
+        added += 1
+        print(f"  [new]     {src.name}")
+        continue
+
+    with dst.open("rb") as f:
+        hf = read_po(f)
+
+    changes = 0
+    for msg in hf:
+        if msg.id and msg.id in dev and dev[msg.id].string and dev[msg.id].string != msg.string:
+            msg.string = dev[msg.id].string
+            changes += 1
+
+    if changes:
+        hf.revision_date = datetime.now(timezone.utc)
+        with dst.open("wb") as f:
+            write_po(f, hf)
+        updated += 1
+        print(f"  [updated] {src.name} ({changes} msgstr(s) from develop)")
+    else:
+        print(f"  [no-op]   {src.name}")
+
+print(f"\n{added} new language(s), {updated} updated.")

.github/helper/sync_hotfix_translations.sh

@@ -0,0 +1,121 @@
+#!/bin/bash
+# Syncs Crowdin translations from develop to a hotfix branch.
+# Merge logic: see merge_po_files.py.
+# Env: GH_TOKEN, PR_REVIEWER, GITHUB_WORKSPACE, APP_NAME, GITHUB_REPOSITORY
+#      (all set by Actions).
+
+set -e
+
+HOTFIX_BRANCH="${HOTFIX_BRANCH:?HOTFIX_BRANCH env var is required}"
+APP_NAME="${APP_NAME:?APP_NAME env var is required}"
+
+cd ~ || exit
+
+echo "=== Setting up bench ==="
+pip install frappe-bench
+bench -v init frappe-bench --skip-assets --skip-redis-config-generation --python "$(which python)"
+cd ./frappe-bench || exit
+bench get-app --skip-assets "${APP_NAME}" "${GITHUB_WORKSPACE}"
+
+echo "=== Setting up sync_translations_${HOTFIX_BRANCH} branch ==="
+cd "./apps/${APP_NAME}" || exit
+git config user.email "developers@erpnext.com"
+git config user.name "frappe-pr-bot"
+git remote set-url upstream "https://github.com/${GITHUB_REPOSITORY}.git"
+git config remote.upstream.fetch "+refs/heads/*:refs/remotes/upstream/*"
+gh auth setup-git
+git fetch upstream "${HOTFIX_BRANCH}"
+
+if git ls-remote --exit-code --heads upstream "sync_translations_${HOTFIX_BRANCH}" >/dev/null 2>&1; then
+  git fetch upstream "sync_translations_${HOTFIX_BRANCH}"
+  git checkout -b "sync_translations_${HOTFIX_BRANCH}" "upstream/sync_translations_${HOTFIX_BRANCH}"
+  git merge -X theirs "upstream/${HOTFIX_BRANCH}" --no-edit
+else
+  git checkout -b "sync_translations_${HOTFIX_BRANCH}" "upstream/${HOTFIX_BRANCH}"
+fi
+cd ../.. || exit
+
+echo "=== Fetching develop's .po files ==="
+mkdir -p /tmp/develop-po
+git -C "${GITHUB_WORKSPACE}" fetch origin develop
+git -C "${GITHUB_WORKSPACE}" archive origin/develop "${APP_NAME}/locale/" \
+  | tar -xf - -C /tmp/develop-po/
+
+po_count=$(find "/tmp/develop-po/${APP_NAME}/locale" -name "*.po" | wc -l)
+if [ "${po_count}" -eq 0 ]; then
+  echo "ERROR: No .po files found in develop's archive. Aborting." >&2
+  exit 1
+fi
+echo "Extracted ${po_count} .po file(s) from develop."
+
+echo "=== Merging and reconciling ==="
+env/bin/python "${GITHUB_WORKSPACE}/.github/helper/merge_po_files.py"
+bench update-po-files --app "${APP_NAME}"
+
+cd "./apps/${APP_NAME}" || exit
+
+if git diff --quiet "${APP_NAME}/locale/" && [ -z "$(git ls-files --others --exclude-standard "${APP_NAME}/locale/")" ]; then
+  echo "Translations are already up to date. No PR needed."
+  exit 0
+fi
+
+echo "Changed files:"
+git diff --name-only "${APP_NAME}/locale/"
+git ls-files --others --exclude-standard "${APP_NAME}/locale/"
+
+echo "=== Committing ==="
+while IFS= read -r file; do
+  git add "${file}"
+  lang=$(basename "${file}" .po)
+  git commit -m "chore: add ${lang} translation to ${HOTFIX_BRANCH}"
+done < <(git ls-files --others --exclude-standard "${APP_NAME}/locale/" | grep '\.po$' | sort)
+
+while IFS= read -r file; do
+  git add "${file}"
+  if ! git diff --staged --quiet -- "${file}"; then
+    lang=$(basename "${file}" .po)
+    git commit -m "chore: sync ${lang} translation to ${HOTFIX_BRANCH}"
+  else
+    git restore --staged -- "${file}"
+  fi
+done < <(git diff --name-only "${APP_NAME}/locale/" | grep '\.po$' | sort)
+
+if git ls-remote --exit-code --heads upstream "sync_translations_${HOTFIX_BRANCH}" >/dev/null 2>&1; then
+  git fetch upstream "sync_translations_${HOTFIX_BRANCH}"
+  git merge -X ours "upstream/sync_translations_${HOTFIX_BRANCH}" --no-edit
+fi
+git push -u upstream sync_translations_${HOTFIX_BRANCH}
+
+echo "=== Opening PR (if not already open) ==="
+existing_pr=$(gh pr list \
+  --base "${HOTFIX_BRANCH}" \
+  --head "sync_translations_${HOTFIX_BRANCH}" \
+  --state open \
+  --json number \
+  --jq 'length' \
+  -R "${GITHUB_REPOSITORY}")
+
+if [ "${existing_pr}" -gt 0 ]; then
+  echo "PR already open — branch updated in place. No new PR needed."
+  exit 0
+fi
+
+gh pr create \
+  --base "${HOTFIX_BRANCH}" \
+  --head "sync_translations_${HOTFIX_BRANCH}" \
+  --title "chore: sync translations to ${HOTFIX_BRANCH}" \
+  --body "Automated sync of Crowdin translations from \`develop\` to \`${HOTFIX_BRANCH}\`.
+
+A 3-way merge is performed per language, then \`bench update-po-files\` reconciles each \`.po\` against hotfix's \`main.pot\`:
+
+| Case | Condition | Result |
+|------|-----------|--------|
+| **a** | \`msgid\` in hotfix's \`main.pot\`, **not** in develop's \`.po\` | Hotfix's existing \`msgstr\` is **preserved** (string removed from develop but still needed in hotfix) |
+| **b** | \`msgid\` **not** in hotfix's \`main.pot\` | **Dropped** from hotfix's \`.po\` |
+| **c** | \`msgid\` in both hotfix's \`main.pot\` and develop's \`.po\` | Develop's \`msgstr\` is used (Crowdin translation wins) |
+
+Generated by the \`sync-hotfix-translations\` workflow." \
+  --label "translation" \
+  --label "skip-release-notes" \
+  --reviewer "${PR_REVIEWER}" \
+  -R "${GITHUB_REPOSITORY}"

.github/workflows/build-and-commit-assets.yml

@@ -0,0 +1,70 @@
+name: Build and Upload Assets
+
+on:
+  push:
+    branches:
+      - develop
+      - 'version-*'
+
+concurrency:
+  group: build-assets-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: write
+
+jobs:
+  build-assets:
+    name: Build JS/CSS and upload to release
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          repository: frappe/frappe
+          path: apps/frappe
+          ref: ${{ github.ref_name }}
+
+      - uses: actions/checkout@v4
+        with:
+          path: apps/erpnext
+
+      - name: Create bench structure
+        run: |
+          mkdir -p sites
+          printf "frappe\nerpnext\n" > sites/apps.txt
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: yarn
+          cache-dependency-path: apps/frappe/yarn.lock
+
+      - name: Install frappe JS dependencies
+        working-directory: apps/frappe
+        run: yarn install --frozen-lockfile
+
+      - name: Install erpnext JS dependencies
+        working-directory: apps/erpnext
+        run: yarn install --frozen-lockfile --ignore-scripts
+
+      - name: Link node_modules into public/
+        working-directory: apps/frappe
+        run: ln -s "$PWD/node_modules" frappe/public/node_modules
+
+      - name: Build assets (production)
+        working-directory: apps/frappe
+        run: yarn run production
+
+      - name: Package assets
+        working-directory: apps/erpnext
+        run: tar czf erpnext-assets.tar.gz -C ../../sites/assets/erpnext dist
+
+      - name: Upload to rolling release
+        working-directory: apps/erpnext
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          TAG="assets-${GITHUB_REF_NAME//\//-}"
+          gh release create "$TAG" --prerelease --title "Assets: $GITHUB_REF_NAME" --notes "" 2>/dev/null || true
+          gh release upload "$TAG" erpnext-assets.tar.gz --clobber

.github/workflows/docker-release.yml

@@ -15,4 +15,4 @@ jobs:
     - name: curl
       run: |
         apk add curl bash
-        curl -X POST -H "Accept: application/vnd.github.v3+json" -H "Authorization: Bearer ${{ secrets.CI_PAT }}" https://api.github.com/repos/frappe/frappe_docker/actions/workflows/build_stable.yml/dispatches -d '{"ref":"main"}'
+        curl -X POST -H "Accept: application/vnd.github.v3+json" -H "Authorization: Bearer ${{ secrets.CI_PAT }}" https://api.github.com/repos/frappe/frappe_docker/actions/workflows/core-build-stable.yml/dispatches -d '{"ref":"main"}'

.github/workflows/review-translation-changes.yaml

@@ -0,0 +1,25 @@
+name: Review translation PRs
+description: "Posts review comments with relevant translation changes that are hard to inspect in the diff view."
+
+on:
+  pull_request_target:
+    types: [opened, reopened, synchronize, ready_for_review]
+    paths:
+      - "**/*.po"
+      - "**/*.pot"
+
+concurrency:
+  group: po-review-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  review-po-pr:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    permissions:
+      contents: read
+      issues: write
+      pull-requests: write
+
+    steps:
+      - uses: alyf-de/po-review-action@v1.0.0

.github/workflows/run-hotfix-translation-sync.yml

@@ -0,0 +1,52 @@
+# Runner — maintain this file on each hotfix branch, not on develop.
+#
+# Fires when main.pot changes on this branch (i.e. after a POT update PR
+# merges), or when dispatched by the orchestrator on develop (weekly schedule).
+#
+# Uses github.ref_name so the file is identical across all hotfix branches
+# with no branch-specific edits required.
+
+name: Run hotfix translation sync
+
+on:
+  workflow_dispatch:
+
+# One run at a time per branch. cancel-in-progress: false to avoid leaving
+# an orphaned remote branch from a mid-flight git push + gh pr create.
+concurrency:
+  group: sync-hotfix-translations-${{ github.ref_name }}
+  cancel-in-progress: false
+
+jobs:
+  sync-translations:
+    name: Sync translations from develop into ${{ github.ref_name }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    env:
+      HOTFIX_BRANCH: ${{ github.ref_name }}
+      APP_NAME: ${{ github.event.repository.name }}
+
+    steps:
+      - name: Checkout ${{ env.HOTFIX_BRANCH }}
+        uses: actions/checkout@v6
+        with:
+          ref: ${{ env.HOTFIX_BRANCH }}
+          fetch-depth: 0
+
+      - name: Setup Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.14"
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+
+      - name: Run sync script
+        run: |
+          bash "${GITHUB_WORKSPACE}/.github/helper/sync_hotfix_translations.sh"
+        env:
+          GH_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+          PR_REVIEWER: diptanilsaha

.github/workflows/sync-hotfix-translations.yml

@@ -0,0 +1,40 @@
+# Orchestrator — lives on develop only.
+#
+# Triggers on the weekly schedule and dispatches the runner workflow on each
+# hotfix branch listed in the matrix. To add or remove a branch, edit the
+# matrix below.
+#
+# POT-change triggers are handled by the runner on each hotfix branch
+# (run-hotfix-translation-sync.yml), since GitHub only evaluates a workflow
+# from the branch that receives the push.
+
+name: Sync translations to hotfix branches
+
+on:
+  schedule:
+    # 10:00 UTC Monday
+    - cron: "0 10 * * 1"
+  workflow_dispatch:
+
+# The runner dispatch uses RELEASE_TOKEN (a PAT), not the default GITHUB_TOKEN,
+# so no GITHUB_TOKEN permissions are required.
+permissions: {}
+
+jobs:
+  trigger-runners:
+    name: Trigger sync → ${{ matrix.hotfix_branch }}
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        hotfix_branch:
+          - version-16-hotfix
+      fail-fast: false
+
+    steps:
+      - name: Dispatch runner on ${{ matrix.hotfix_branch }}
+        run: |
+          gh workflow run run-hotfix-translation-sync.yml \
+            --repo "${{ github.repository }}" \
+            --ref "${{ matrix.hotfix_branch }}"
+        env:
+          GH_TOKEN: ${{ secrets.RELEASE_TOKEN }}

banking/eslint.config.js

@@ -9,16 +9,18 @@ export default defineConfig([
 	globalIgnores(["dist"]),
 	{
 		files: ["**/*.{ts,tsx}"],
-		extends: [
-			js.configs.recommended,
-			tseslint.configs.recommended,
-			reactHooks.configs.flat.recommended,
-			reactRefresh.configs.vite,
-		],
+		extends: [js.configs.recommended, tseslint.configs.recommended, reactRefresh.configs.vite],
+		plugins: {
+			"react-hooks": reactHooks,
+		},
 		languageOptions: {
 			ecmaVersion: 2020,
 			globals: globals.browser,
 		},
-		onlyExportComponents: false,
+		rules: {
+			"react-hooks/rules-of-hooks": "error",
+			"react-hooks/exhaustive-deps": "warn",
+			"react-refresh/only-export-components": "off",
+		},
 	},
 ]);

banking/package.json

@@ -41,7 +41,6 @@
     "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",

banking/proxyOptions.ts

@@ -1,13 +1,17 @@
-const common_site_config = require('../../../sites/common_site_config.json');
+import { readFileSync } from 'node:fs';
+
+const common_site_config = JSON.parse(
+	readFileSync(new URL('../../../sites/common_site_config.json', import.meta.url), 'utf8')
+) as { webserver_port: string | number };
 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}`;
+		router: function (req) {
+			const site_name = req.headers?.host?.split(':')[0];
+			return `http://${site_name ?? 'localhost'}:${webserver_port}`;
 		}
 	}
 };

banking/src/App.tsx

@@ -1,14 +1,15 @@
-import { useEffect } from 'react'
+import { lazy, 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 BankStatementImporterContainer from '@/pages/BankStatementImporterContainer'
 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'
+
+const BankStatementImporter = lazy(() => import('@/pages/BankStatementImporter'))
+const ViewBankStatementImportLog = lazy(() => import('@/pages/ViewBankStatementImportLog'))
 
 function App() {
 	useEffect(() => {
@@ -43,7 +44,6 @@ function App() {
 					>
 						{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 />}>

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

@@ -1,475 +1,42 @@
 import { Button } from '@/components/ui/button'
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { Dialog, 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 { HistoryIcon } from 'lucide-react'
+import { useState } from 'react'
 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'
+import ActionLogDialog from './ActionLogDialog'
 
 const ActionLog = () => {
+	const [isOpen, setIsOpen] = useState(false)
 
-    const [isOpen, setIsOpen] = useState(false)
+	useHotkeys('meta+z', () => {
+		setIsOpen(true)
+	}, {
+		enabled: true,
+		enableOnFormTags: false,
+		preventDefault: true
+	})
 
-    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>
-    )
+	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>
+			{isOpen && (
+				<ActionLogDialog onClose={() => setIsOpen(false)} />
+			)}
+		</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
+export default ActionLog

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

@@ -0,0 +1,34 @@
+import { Button } from '@/components/ui/button'
+import { DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import _ from '@/lib/translate'
+import { Loader2Icon } from 'lucide-react'
+import { lazy, Suspense } from 'react'
+
+const ActionLogDialogBody = lazy(() => import('./ActionLogDialogBody'))
+
+const ActionLogDialogFallback = () => (
+	<div className="flex flex-1 items-center justify-center min-h-[40vh]">
+		<Loader2Icon className="size-6 animate-spin text-muted-foreground" />
+	</div>
+)
+
+const ActionLogDialog = ({ onClose }: { onClose: () => void }) => {
+	return (
+		<DialogContent className='min-w-[90vw]'>
+			<DialogHeader>
+				<DialogTitle>{_("Reconciliation History")}</DialogTitle>
+				<DialogDescription>{_("View all reconciliation actions taken in this session.")}</DialogDescription>
+			</DialogHeader>
+			<Suspense fallback={<ActionLogDialogFallback />}>
+				<ActionLogDialogBody />
+			</Suspense>
+			<DialogFooter>
+				<DialogClose asChild>
+					<Button variant={'outline'} size='md' onClick={onClose}>{_("Close")}</Button>
+				</DialogClose>
+			</DialogFooter>
+		</DialogContent>
+	)
+}
+
+export default ActionLogDialog

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

@@ -0,0 +1,431 @@
+import { Button } from '@/components/ui/button'
+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 { 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 ActionLogDialogBody = () => {
+
+    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 ActionLogDialogBody

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

@@ -83,7 +83,7 @@ const BankClearanceSummaryView = () => {
                 toast.success(_("Copied to clipboard"))
             })
         },
-        [copyToClipboard, _],
+        [copyToClipboard],
     )
 
     const accountCurrency = useMemo(
@@ -200,7 +200,7 @@ const BankClearanceSummaryView = () => {
                 },
             },
         ],
-        [_, accountCurrency, bankAccount, companyID, mutate, onCopy],
+        [accountCurrency, bankAccount, companyID, mutate, onCopy],
     )
 
     return <div className="space-y-4 py-2">

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

@@ -1,831 +1,32 @@
-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 { useAtom } from "jotai"
+import { bankRecRecordJournalEntryModalAtom } from "./bankRecAtoms"
+import { Dialog, DialogContent, DialogTitle, DialogDescription, DialogHeader } from "@/components/ui/dialog"
+import { ModalContentFallback } from "@/components/ui/modal-content-fallback"
 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"
+import { lazy, Suspense } from "react"
+
+const RecordBankEntryModalContent = lazy(() => import('./BankEntryModalContent'))
 
 const BankEntryModal = () => {
+	const [isOpen, setIsOpen] = useAtom(bankRecRecordJournalEntryModalAtom)
 
-    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>
-    )
+	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>
+				{isOpen && (
+					<Suspense fallback={<ModalContentFallback />}>
+						<RecordBankEntryModalContent />
+					</Suspense>
+				)}
+			</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/BankEntryModalContent.tsx

@@ -0,0 +1,811 @@
+import { useAtomValue, useSetAtom } from "jotai"
+import { bankRecRecordJournalEntryModalAtom, bankRecSelectedTransactionAtom, bankRecUnreconcileModalAtom, selectedBankAccountAtom } from "./bankRecAtoms"
+import { 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 { useMultiFileUploadProgress } from "@/hooks/useMultiFileUploadProgress"
+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 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, startTracking, updateFileProgress, resetProgress } = useMultiFileUploadProgress()
+
+    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)
+                startTracking(files.length)
+
+                const uploadPromises = files.map((f, fileIndex) => {
+                    return frappeFile.uploadFile(f, {
+                        isPrivate: true,
+                        doctype: "Journal Entry",
+                        docname: message.journal_entry.name,
+                    }, (_bytesUploaded, _totalBytes, progress) => {
+                        updateFileProgress(fileIndex, progress?.progress ?? 0)
+                    })
+                })
+
+                return Promise.all(uploadPromises).then(() => {
+                    resetProgress()
+                    setIsUploading(false)
+                }).catch((error) => {
+                    console.error(error)
+                    toast.error(_("Error uploading attachments"), {
+                        duration: 4000,
+                    })
+                    resetProgress()
+                    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(() => {
+        // Do not remove the first row
+        remove(selectedRows.filter(index => index !== 0))
+        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 RecordBankEntryModalContent

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

@@ -76,7 +76,7 @@ const BankReconciliationStatementView = () => {
                 toast.success(_("Copied to clipboard"))
             })
         },
-        [copyToClipboard, _],
+        [copyToClipboard],
     )
 
     const statementColumns = useMemo<ColumnDef<BankClearanceSummaryEntry, unknown>[]>(
@@ -181,7 +181,7 @@ const BankReconciliationStatementView = () => {
                 cell: ({ row }) => formatDate(row.original.clearance_date),
             },
         ],
-        [_, onCopy],
+        [onCopy],
     )
 
     const statementRows = useMemo(() => {

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

@@ -176,7 +176,7 @@ const BankTransactionListView = () => {
                 ),
             },
         ],
-        [_, accountCurrency, onUndo],
+        [accountCurrency, onUndo],
     )
 
     const [search, setSearch] = useDebounceValue('', 250)

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

@@ -1,125 +1,52 @@
-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 {
+	AlertDialog,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { useAtom } from "jotai"
+import { Loader2Icon } from "lucide-react"
+import { lazy, Suspense } from "react"
+import { bankRecUnreconcileModalAtom } from "./bankRecAtoms"
 import _ from "@/lib/translate"
 
+const BankTransactionUnreconcileModalBody = lazy(() => import('./BankTransactionUnreconcileModalBody'))
+
+const BankTransactionUnreconcileModalFallback = () => (
+	<div className="flex items-center justify-center py-16">
+		<Loader2Icon className="size-6 animate-spin text-muted-foreground" />
+	</div>
+)
+
 const BankTransactionUnreconcileModal = () => {
+	const [unreconcileModal, setBankRecUnreconcileModal] = useAtom(bankRecUnreconcileModalAtom)
 
-    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 onOpenChange = (v: boolean) => {
+		if (!v) {
+			setBankRecUnreconcileModal('')
+		}
+	}
 
+	if (!unreconcileModal) {
+		return null
+	}
 
+	return (
+		<AlertDialog open onOpenChange={onOpenChange}>
+			<AlertDialogContent className="min-w-2xl">
+				<AlertDialogHeader>
+					<AlertDialogTitle>{_("Undo Transaction Reconciliation")}</AlertDialogTitle>
+					<AlertDialogDescription>
+						{_("Are you sure you want to unreconcile this transaction?")}
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<Suspense fallback={<BankTransactionUnreconcileModalFallback />}>
+					<BankTransactionUnreconcileModalBody />
+				</Suspense>
+			</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
+export default BankTransactionUnreconcileModal

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

@@ -0,0 +1,109 @@
+import { AlertDialogAction, AlertDialogCancel, AlertDialogFooter } 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 BankTransactionUnreconcileModalBody = () => {
+	const bankAccount = useAtomValue(selectedBankAccountAtom)
+	const dates = useAtomValue(bankRecDateAtom)
+
+	const { mutate } = useSWRConfig()
+
+	const [unreconcileModal, setBankRecUnreconcileModal] = useAtom(bankRecUnreconcileModalAtom)
+
+	const { data: transaction, error, isLoading } = 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(`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 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 || isLoading}>
+					{_("Unreconcile")}
+				</AlertDialogAction>
+			</AlertDialogFooter>
+		</>
+	)
+}
+
+export default BankTransactionUnreconcileModalBody

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

@@ -91,7 +91,7 @@ const IncorrectlyClearedEntriesView = () => {
                     })
                 })
         },
-        [clearClearingDate, mutate, _],
+        [clearClearingDate, mutate],
     )
 
     const accountCurrency = useMemo(
@@ -174,7 +174,7 @@ const IncorrectlyClearedEntriesView = () => {
                 ),
             },
         ],
-        [_, accountCurrency, onClearClick],
+        [accountCurrency, onClearClick],
     )
 
     return <div className="space-y-4 py-2">

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

@@ -14,7 +14,7 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 import { Button } from "@/components/ui/button"
 import CurrencyInput from 'react-currency-input-field'
 import { getCurrencySymbol } from "@/lib/currency"
-import { Virtuoso } from 'react-virtuoso'
+import { useVirtualizer } from '@tanstack/react-virtual'
 import { formatDate } from "@/lib/date"
 import { Badge } from "@/components/ui/badge"
 import { formatCurrency, getCurrencyFormatInfo } from "@/lib/numbers"
@@ -22,10 +22,10 @@ import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/comp
 import { Skeleton } from "@/components/ui/skeleton"
 import { slug } from "@/lib/frappe"
 import _ from "@/lib/translate"
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 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"
@@ -69,6 +69,59 @@ const MatchAndReconcile = ({ contentHeight }: { contentHeight: number }) => {
     </>
 }
 
+/** TanStack requires `estimateSize` for initial scroll range; `measureElement` on each row sets the real height. */
+function VirtualizedListBody<T>({
+    items,
+    height,
+    getItemKey,
+    children,
+    estimateSize = 74,
+}: {
+    items: T[]
+    height: number
+    getItemKey: (item: T, index: number) => string | number
+    children: (item: T, index: number) => React.ReactNode
+    estimateSize?: number
+}) {
+    const scrollRef = useRef<HTMLDivElement>(null)
+
+    const rowVirtualizer = useVirtualizer({
+        count: items.length,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => estimateSize,
+        overscan: 8,
+        getItemKey: (index) => String(getItemKey(items[index], index)),
+    })
+
+    if (items.length === 0) {
+        return null
+    }
+
+    return (
+        <div
+            ref={scrollRef}
+            className="overflow-auto contain-strict"
+            style={{ height }}
+        >
+            <div
+                className="relative w-full"
+                style={{ height: rowVirtualizer.getTotalSize() }}
+            >
+                {rowVirtualizer.getVirtualItems().map((virtualRow) => (
+                    <div
+                        key={virtualRow.key}
+                        data-index={virtualRow.index}
+                        ref={rowVirtualizer.measureElement}
+                        className="absolute top-0 left-0 w-full"
+                        style={{ transform: `translateY(${virtualRow.start}px)` }}
+                    >
+                        {children(items[virtualRow.index], virtualRow.index)}
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
 
 const UnreconciledTransactions = ({ contentHeight }: { contentHeight: number }) => {
     const bankAccount = useAtomValue(selectedBankAccountAtom)
@@ -134,6 +187,7 @@ const UnreconciledTransactions = ({ contentHeight }: { contentHeight: number })
     }
 
     const hasFilters = search !== '' || typeFilter !== 'All' || amountFilter.value !== 0
+    const listHeight = contentHeight - 72
 
     if (isLoading) {
         return <UnreconciledTransactionsLoadingState />
@@ -222,14 +276,14 @@ const UnreconciledTransactions = ({ contentHeight }: { contentHeight: number })
             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}
-        />
+        <VirtualizedListBody
+            items={results}
+            height={listHeight}
+            estimateSize={74}
+            getItemKey={(transaction) => transaction.name}
+        >
+            {(transaction) => <UnreconciledTransactionItem transaction={transaction} />}
+        </VirtualizedListBody>
 
     </div>
 }
@@ -559,11 +613,8 @@ const RuleAction = ({ transaction }: { transaction: UnreconciledTransaction }) =
     const setRecordPaymentModalOpen = useSetAtom(bankRecRecordPaymentModalAtom)
     const setRecordJournalEntryModalOpen = useSetAtom(bankRecRecordJournalEntryModalAtom)
 
-    if (!rule) {
-        return null
-    }
-
     const getActionIcon = () => {
+        if (!rule) return null
         switch (rule.classify_as) {
             case "Bank Entry":
                 return <Landmark />
@@ -577,6 +628,7 @@ const RuleAction = ({ transaction }: { transaction: UnreconciledTransaction }) =
     }
 
     const getActionStyles = () => {
+        if (!rule) return {}
         switch (rule.classify_as) {
             case "Bank Entry":
                 return {
@@ -610,6 +662,7 @@ const RuleAction = ({ transaction }: { transaction: UnreconciledTransaction }) =
     }
 
     const handleActionClick = () => {
+        if (!rule) return
         switch (rule.classify_as) {
             case "Bank Entry":
                 setRecordJournalEntryModalOpen(true)
@@ -624,6 +677,7 @@ const RuleAction = ({ transaction }: { transaction: UnreconciledTransaction }) =
     }
 
     const getActionDescription = () => {
+        if (!rule) return ""
         switch (rule.classify_as) {
             case "Bank Entry":
                 return _("Create a journal entry for expenses, income or split transactions")
@@ -636,8 +690,7 @@ const RuleAction = ({ transaction }: { transaction: UnreconciledTransaction }) =
         }
     }
 
-    useHotkeys('meta+r', () => {
-        // 
+    useHotkeys('alt+r', () => {
         handleActionClick()
     }, {
         enabled: true,
@@ -647,6 +700,10 @@ const RuleAction = ({ transaction }: { transaction: UnreconciledTransaction }) =
 
     const styles = getActionStyles()
 
+    if (!rule) {
+        return null
+    }
+
     return (
         <Card className={`border ${styles.border} ${styles.bg} shadow-sm hover:shadow-md transition-all duration-200`}>
             <CardHeader className="pb-0">
@@ -721,6 +778,9 @@ const VouchersForTransaction = ({ transaction, contentHeight }: { transaction: U
 
     const { data: vouchers, isLoading, error } = useGetVouchersForTransaction(transaction)
 
+    const voucherList = vouchers?.message ?? []
+    const listHeight = contentHeight - 120
+
     if (error) {
         return <ErrorBanner error={error} />
     }
@@ -747,7 +807,7 @@ const VouchersForTransaction = ({ transaction, contentHeight }: { transaction: U
             <span>or</span>
             <Separator className="flex-1" />
         </div>
-        {vouchers?.message.length === 0 && <Empty className="my-4">
+        {voucherList.length === 0 && <Empty className="my-4">
             <EmptyMedia>
                 <ReceiptIcon />
             </EmptyMedia>
@@ -756,14 +816,14 @@ const VouchersForTransaction = ({ transaction, contentHeight }: { transaction: U
                 <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}
-        />
+        <VirtualizedListBody
+            items={voucherList}
+            height={listHeight}
+            estimateSize={121}
+            getItemKey={(voucher) => voucher.name}
+        >
+            {(voucher, index) => <VoucherItem voucher={voucher} index={index} />}
+        </VirtualizedListBody>
     </div >
 }
 

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

@@ -1,555 +1,32 @@
-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 { useAtom } from 'jotai'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { ModalContentFallback } from '@/components/ui/modal-content-fallback'
 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'
+import { lazy, Suspense } from 'react'
+import { bankRecTransferModalAtom } from './bankRecAtoms'
+
+const TransferModalContent = lazy(() => import('./TransferModalContent'))
 
 const TransferModal = () => {
+	const [isOpen, setIsOpen] = useAtom(bankRecTransferModalAtom)
 
-    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>
-    )
+	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>
+				{isOpen && (
+					<Suspense fallback={<ModalContentFallback />}>
+						<TransferModalContent />
+					</Suspense>
+				)}
+			</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
+export default TransferModal

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

@@ -0,0 +1,530 @@
+import { useAtomValue, useSetAtom } from 'jotai'
+import { bankRecSelectedTransactionAtom, bankRecTransferModalAtom, bankRecUnreconcileModalAtom, SelectedBank, selectedBankAccountAtom } from './bankRecAtoms'
+import { DialogFooter, DialogClose } 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 { useMultiFileUploadProgress } from '@/hooks/useMultiFileUploadProgress'
+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 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 ?? '')
+
+    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, startTracking, updateFileProgress, resetProgress } = useMultiFileUploadProgress()
+
+    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)
+                startTracking(files.length)
+
+                const uploadPromises = files.map((f, fileIndex) => {
+                    return frappeFile.uploadFile(f, {
+                        isPrivate: true,
+                        doctype: "Payment Entry",
+                        docname: message.payment_entry.name,
+                    }, (_bytesUploaded, _totalBytes, progress) => {
+                        updateFileProgress(fileIndex, progress?.progress ?? 0)
+                    })
+                })
+
+                return Promise.all(uploadPromises).then(() => {
+                    resetProgress()
+                    setIsUploading(false)
+                })
+            } else {
+                return Promise.resolve()
+            }
+        }).then(() => {
+            resetProgress()
+            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) => (
+            <button
+                className={cn('text-left 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'
+                )}
+                type='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>
+            </button>
+        ))}
+        <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 <button className={cn('text-left 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'
+        )}
+            type='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>
+        </button>
+    }
+
+    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 TransferModalContent

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

@@ -1,11 +1,8 @@
 import CSVRawDataPreview from './CSVRawDataPreview'
 import StatementDetails from './StatementDetails'
-import _ from '@/lib/translate'
 import { GetStatementDetailsResponse } from '../import_utils'
 
-const CSVImport = ({ data }: { data: { message: GetStatementDetailsResponse } }) => {
-
-
+const CSVImport = ({ data, mutate }: { data: { message: GetStatementDetailsResponse }, mutate: () => void }) => {
 
     return (
         <div className="w-full flex">
@@ -13,7 +10,7 @@ const CSVImport = ({ data }: { data: { message: GetStatementDetailsResponse } })
                 <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} />
+                <CSVRawDataPreview data={data.message} mutate={mutate} />
             </div>
         </div>
     )

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

@@ -1,151 +1,104 @@
-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 { useEffect, useRef, useState } from "react"
+import { toast } from "sonner"
 import _ from "@/lib/translate"
-import { GetStatementDetailsResponse } from "../import_utils"
-import { useMemo } from "react"
+import RawTableGrid from "../RawTableGrid"
+import {
+    applyColumnMappingChange,
+    ColumnMapsTo,
+    GetStatementDetailsResponse,
+    useSetHeaderIndex,
+    useUpdateColumnMapping,
+} from "../import_utils"
 import { BankStatementImportLogColumnMap } from "@/types/Accounts/BankStatementImportLogColumnMap"
 
+type Mapping = Pick<BankStatementImportLogColumnMap, "index" | "maps_to" | "header_text" | "variable">
 
-const CSVRawDataPreview = ({ data }: { data: GetStatementDetailsResponse }) => {
+const toMapping = (columns?: BankStatementImportLogColumnMap[]): Mapping[] =>
+    (columns ?? []).map((c) => ({
+        index: c.index,
+        maps_to: c.maps_to,
+        header_text: c.header_text,
+        variable: c.variable,
+    }))
 
-    const column_mapping: Record<StandardColumnTypes, number> = useMemo(() => {
+const headerToState = (index?: number) => (index != null && index >= 0 ? index : null)
 
-        const col_map: Record<string, number> = {}
+const CSVRawDataPreview = ({
+    data,
+    mutate,
+}: {
+    data: GetStatementDetailsResponse
+    mutate: () => void
+}) => {
+    const isCompleted = data.doc.status === "Completed"
 
-        data.doc.column_mapping?.forEach(col => {
-            if (col.maps_to && col.maps_to !== "Do not import") {
-                col_map[col.maps_to] = col.index;
-            }
-        })
+    const [mapping, setMapping] = useState<Mapping[]>(() => toMapping(data.doc.column_mapping))
+    const [headerIndex, setHeaderIndex] = useState<number | null>(() =>
+        headerToState(data.doc.detected_header_index),
+    )
 
-        return col_map
+    const { call: updateMapping, loading: savingMapping } = useUpdateColumnMapping()
+    const { call: setHeader, loading: savingHeader } = useSetHeaderIndex()
 
-    }, [data])
+    const mappingRef = useRef(mapping)
+    const saveTimer = useRef<ReturnType<typeof setTimeout>>(undefined)
 
-    const validColumns = Object.values(column_mapping)
+    useEffect(() => () => clearTimeout(saveTimer.current), [])
 
-    // 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]))
+    const columnMappingRecord: Record<number, ColumnMapsTo> = {}
+    mapping.forEach((c) => {
+        if (c.maps_to) columnMappingRecord[c.index] = c.maps_to as ColumnMapsTo
+    })
+
+    const commitMapping = (next: Mapping[]) => {
+        mappingRef.current = next
+        setMapping(next)
+    }
+
+    // Persist mapping edits (debounced) so the transaction preview updates in realtime.
+    const scheduleSaveMapping = () => {
+        if (isCompleted) return
+        clearTimeout(saveTimer.current)
+        saveTimer.current = setTimeout(() => {
+            updateMapping({ statement_import_id: data.doc.name, column_mapping: mappingRef.current })
+                .then(() => mutate())
+                .catch(() => toast.error(_("Could not save the column mapping.")))
+        }, 500)
+    }
+
+    const onChangeMapping = (columnIndex: number, mapsTo: ColumnMapsTo) => {
+        if (isCompleted) return
+        commitMapping(applyColumnMappingChange(mappingRef.current, columnIndex, mapsTo))
+        scheduleSaveMapping()
+    }
+
+    const onSetHeader = (rowIndex: number | null) => {
+        if (isCompleted) return
+        setHeaderIndex(rowIndex)
+        setHeader({ statement_import_id: data.doc.name, header_index: rowIndex ?? -1 })
+            .then((res) => {
+                // The backend re-derives the mapping for the new header; sync local state.
+                const doc = res?.message?.doc
+                if (doc) {
+                    commitMapping(toMapping(doc.column_mapping))
+                    setHeaderIndex(headerToState(doc.detected_header_index))
+                }
+                mutate()
+            })
+            .catch(() => toast.error(_("Could not update the header row.")))
+    }
 
-    // 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 >
+        <RawTableGrid
+            rows={data.raw_data}
+            columnMapping={columnMappingRecord}
+            headerIndex={headerIndex}
+            editable={!isCompleted}
+            disabled={isCompleted || savingMapping || savingHeader}
+            onChangeMapping={onChangeMapping}
+            onSetHeader={onSetHeader}
+        />
     )
 }
 
-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
+export default CSVRawDataPreview

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

@@ -142,11 +142,16 @@ const StatementDetails = ({ data }: Props) => {
                             <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>
+                                    <span className="text-sm">{bank?.account_name}</span>
                                 </div>
                             </TableCell>
                         </TableRow>
+                        <TableRow>
+                            <TableHead>{_("Account")}</TableHead>
+                            <TableCell>
+                                <span title="GL Account" className="text-sm">{bank?.account}</span>
+                            </TableCell>
+                        </TableRow>
                         <TableRow>
                             <TableHead>{_("Statement File")}</TableHead>
                             <TableCell>
@@ -158,7 +163,11 @@ const StatementDetails = ({ data }: Props) => {
                         </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>
+                            {data.doc.start_date && data.doc.end_date ? (
+                                <TableCell>{_("{0} to {1}", [formatDate(data.doc.start_date, "Do MMMM YYYY"), formatDate(data.doc.end_date, "Do MMMM YYYY")])}</TableCell>
+                            ) : (
+                                <TableCell>-</TableCell>
+                            )}
                         </TableRow>
                         <TableRow>
                             <TableHead>{_("Number of Transactions")}</TableHead>

banking/src/components/features/BankStatementImporter/PDF/BBoxOverlay.tsx

@@ -0,0 +1,129 @@
+import { RefObject, useEffect, useRef, useState } from 'react'
+import { cn } from '@/lib/utils'
+
+type Bbox = [number, number, number, number]
+
+const MIN_SIZE = 8 // PDF points
+
+// Keep the box valid: normalise flipped edges, enforce a min size, clamp to the page.
+const clampBbox = (bbox: Bbox, pageWidth: number, pageHeight: number): Bbox => {
+    let [x0, top, x1, bottom] = bbox
+    if (x1 < x0) [x0, x1] = [x1, x0]
+    if (bottom < top) [top, bottom] = [bottom, top]
+    x0 = Math.max(0, Math.min(x0, pageWidth - MIN_SIZE))
+    top = Math.max(0, Math.min(top, pageHeight - MIN_SIZE))
+    x1 = Math.min(pageWidth, Math.max(x1, x0 + MIN_SIZE))
+    bottom = Math.min(pageHeight, Math.max(bottom, top + MIN_SIZE))
+    return [x0, top, x1, bottom]
+}
+
+const HANDLES = [
+    { id: 'nw', className: 'left-0 top-0 -translate-x-1/2 -translate-y-1/2 cursor-nwse-resize' },
+    { id: 'ne', className: 'right-0 top-0 translate-x-1/2 -translate-y-1/2 cursor-nesw-resize' },
+    { id: 'sw', className: 'left-0 bottom-0 -translate-x-1/2 translate-y-1/2 cursor-nesw-resize' },
+    { id: 'se', className: 'right-0 bottom-0 translate-x-1/2 translate-y-1/2 cursor-nwse-resize' },
+]
+
+type Props = {
+    bbox: Bbox
+    pageWidth: number
+    pageHeight: number
+    color: { border: string; bg: string; swatch: string }
+    label: string
+    included: boolean
+    disabled?: boolean
+    containerRef: RefObject<HTMLDivElement | null>
+    onCommit: (bbox: Bbox) => void
+}
+
+/** A draggable + corner-resizable rectangle over a rendered PDF page. Coordinates are in PDF
+ *  points (top-left origin); pixel deltas are converted using the container's rendered size. */
+const BBoxOverlay = ({ bbox, pageWidth, pageHeight, color, label, included, disabled, containerRef, onCommit }: Props) => {
+    const [draft, setDraft] = useState<Bbox>(bbox)
+    const draftRef = useRef<Bbox>(bbox)
+    const drag = useRef<{ mode: string; startX: number; startY: number; start: Bbox } | null>(null)
+
+    // Reset to the authoritative bbox whenever it changes (e.g. after a server re-extract).
+    useEffect(() => {
+        setDraft(bbox)
+        draftRef.current = bbox
+    }, [bbox])
+
+    const apply = (next: Bbox) => {
+        draftRef.current = next
+        setDraft(next)
+    }
+
+    const onPointerDown = (e: React.PointerEvent) => {
+        if (disabled) return
+        e.preventDefault()
+        e.stopPropagation()
+        const mode = (e.target as HTMLElement).dataset.handle ?? 'move'
+        ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+        drag.current = { mode, startX: e.clientX, startY: e.clientY, start: draftRef.current }
+    }
+
+    const onPointerMove = (e: React.PointerEvent) => {
+        if (!drag.current || !containerRef.current) return
+        const rect = containerRef.current.getBoundingClientRect()
+        const dx = ((e.clientX - drag.current.startX) / rect.width) * pageWidth
+        const dy = ((e.clientY - drag.current.startY) / rect.height) * pageHeight
+        let [x0, top, x1, bottom] = drag.current.start
+        const m = drag.current.mode
+        if (m === 'move') {
+            x0 += dx
+            x1 += dx
+            top += dy
+            bottom += dy
+        } else {
+            if (m.includes('w')) x0 += dx
+            if (m.includes('e')) x1 += dx
+            if (m.includes('n')) top += dy
+            if (m.includes('s')) bottom += dy
+        }
+        apply(clampBbox([x0, top, x1, bottom], pageWidth, pageHeight))
+    }
+
+    const onPointerUp = (e: React.PointerEvent) => {
+        if (!drag.current) return
+        ;(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId)
+        drag.current = null
+        onCommit(draftRef.current)
+    }
+
+    const [x0, top, x1, bottom] = draft
+
+    return (
+        <div
+            className={cn(
+                'absolute touch-none border-2',
+                color.border,
+                included ? color.bg : 'opacity-40',
+                disabled ? 'pointer-events-none' : 'cursor-move',
+            )}
+            style={{
+                left: `${(x0 / pageWidth) * 100}%`,
+                top: `${(top / pageHeight) * 100}%`,
+                width: `${((x1 - x0) / pageWidth) * 100}%`,
+                height: `${((bottom - top) / pageHeight) * 100}%`,
+            }}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
+        >
+            <span className={cn('pointer-events-none absolute -top-5 left-0 rounded px-1 text-[10px] font-medium text-white', color.swatch)}>
+                {label}
+            </span>
+            {!disabled &&
+                HANDLES.map((handle) => (
+                    <span
+                        key={handle.id}
+                        data-handle={handle.id}
+                        className={cn('absolute size-2.5 rounded-sm border border-white', color.swatch, handle.className)}
+                    />
+                ))}
+        </div>
+    )
+}
+
+export default BBoxOverlay

banking/src/components/features/BankStatementImporter/PDF/PDFImport.tsx

@@ -0,0 +1,23 @@
+import StatementDetails from '../CSV/StatementDetails'
+import PDFTableEditor from './PDFTableEditor'
+import { GetStatementDetailsResponse } from '../import_utils'
+
+type Props = {
+    data: { message: GetStatementDetailsResponse }
+    mutate: () => void
+}
+
+const PDFImport = ({ data, mutate }: Props) => {
+    return (
+        <div className="w-full flex">
+            <div className="w-[45%] p-4 h-[calc(100vh-72px)] overflow-scroll">
+                <StatementDetails data={data.message} />
+            </div>
+            <div className="w-[55%] border-s pe-1 ps-0 border-outline-gray-2 h-[calc(100vh-72px)] overflow-scroll">
+                <PDFTableEditor data={data.message} mutate={mutate} />
+            </div>
+        </div>
+    )
+}
+
+export default PDFImport

banking/src/components/features/BankStatementImporter/PDF/PDFTableEditor.tsx

@@ -0,0 +1,362 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { toast } from 'sonner'
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, FileTextIcon, Loader2Icon, TableIcon } from 'lucide-react'
+import _ from '@/lib/translate'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import { H3, Paragraph } from '@/components/ui/typography'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import ErrorBanner from '@/components/ui/error-banner'
+import RawTableGrid from '../RawTableGrid'
+import BBoxOverlay from './BBoxOverlay'
+import {
+    applyColumnMappingChange,
+    ColumnMapsTo,
+    GetStatementDetailsResponse,
+    PDFTable,
+    useReextractPDFTable,
+    useSetPDFTableHeader,
+    useUpdatePDFTables,
+} from '../import_utils'
+
+type Props = {
+    data: GetStatementDetailsResponse
+    mutate: () => void
+}
+
+// Distinct overlay colours per table on a page.
+const OVERLAY_COLORS = [
+    { border: 'border-blue-500', bg: 'bg-blue-500/10', swatch: 'bg-blue-500' },
+    { border: 'border-purple-500', bg: 'bg-purple-500/10', swatch: 'bg-purple-500' },
+    { border: 'border-amber-500', bg: 'bg-amber-500/10', swatch: 'bg-amber-500' },
+    { border: 'border-teal-500', bg: 'bg-teal-500/10', swatch: 'bg-teal-500' },
+]
+
+const columnMappingRecord = (table: PDFTable): Record<number, ColumnMapsTo> => {
+    const map: Record<number, ColumnMapsTo> = {}
+    table.column_mapping?.forEach((col) => {
+        map[col.index] = col.maps_to
+    })
+    return map
+}
+
+const PDFTableEditor = ({ data, mutate }: Props) => {
+    const isCompleted = data.doc.status === 'Completed'
+
+    const [tables, setTables] = useState<PDFTable[]>(() => data.pdf_tables ?? [])
+    const [viewMode, setViewMode] = useState<'pdf' | 'table'>('pdf')
+    const [pageIndex, setPageIndex] = useState(0)
+    const [collapsed, setCollapsed] = useState<Set<number>>(new Set())
+
+    const toggleCollapsed = (tableIndex: number) =>
+        setCollapsed((prev) => {
+            const next = new Set(prev)
+            if (next.has(tableIndex)) {
+                next.delete(tableIndex)
+            } else {
+                next.add(tableIndex)
+            }
+            return next
+        })
+
+    const { call, loading, error } = useUpdatePDFTables()
+    const { call: reextract, loading: reextracting } = useReextractPDFTable()
+    const { call: setHeaderCall, loading: settingHeader } = useSetPDFTableHeader()
+    const busy = loading || reextracting || settingHeader
+
+    // Persist edits automatically (debounced) so the transaction preview updates in realtime.
+    const tablesRef = useRef(tables)
+    const saveTimer = useRef<ReturnType<typeof setTimeout>>(undefined)
+    const reextractTimer = useRef<ReturnType<typeof setTimeout>>(undefined)
+
+    const scheduleSave = () => {
+        if (isCompleted) return
+        clearTimeout(saveTimer.current)
+        saveTimer.current = setTimeout(() => {
+            call({ statement_import_id: data.doc.name, tables: tablesRef.current })
+                .then(() => mutate())
+                .catch(() => toast.error(_('Could not save the table settings.')))
+        }, 500)
+    }
+
+    // After a bbox change, re-extract that table's rows from the new region (debounced).
+    // The target is read inside the timeout so it always reflects the committed bbox.
+    const scheduleReextract = (tableIndex: number) => {
+        if (isCompleted) return
+        clearTimeout(reextractTimer.current)
+        reextractTimer.current = setTimeout(() => {
+            const target = tablesRef.current[tableIndex]
+            reextract({
+                statement_import_id: data.doc.name,
+                page: target.page,
+                table_index: target.table_index,
+                bbox: target.bbox,
+            })
+                .then((res) => {
+                    commitTables(res?.message?.pdf_tables ?? [])
+                    mutate()
+                })
+                .catch(() => toast.error(_('Could not re-extract the table.')))
+        }, 500)
+    }
+
+    useEffect(() => () => {
+        clearTimeout(saveTimer.current)
+        clearTimeout(reextractTimer.current)
+    }, [])
+
+    const pages = useMemo(() => Array.from(new Set(tables.map((t) => t.page))).sort((a, b) => a - b), [tables])
+    const currentPage = pages[pageIndex]
+    // Keep the table's position in the flat array so edits target the right one.
+    const pageTables = useMemo(
+        () => tables.map((table, index) => ({ table, index })).filter((t) => t.table.page === currentPage),
+        [tables, currentPage],
+    )
+
+    // Keep tablesRef in sync synchronously so the debounced save/re-extract never read stale state.
+    const commitTables = (next: PDFTable[]) => {
+        tablesRef.current = next
+        setTables(next)
+    }
+
+    const updateTable = (tableIndex: number, updater: (table: PDFTable) => PDFTable) => {
+        commitTables(tablesRef.current.map((t, i) => (i === tableIndex ? updater(t) : t)))
+        scheduleSave()
+    }
+
+    const onChangeMapping = (tableIndex: number, columnIndex: number, mapsTo: ColumnMapsTo) => {
+        updateTable(tableIndex, (table) => ({
+            ...table,
+            column_mapping: applyColumnMappingChange(table.column_mapping, columnIndex, mapsTo),
+        }))
+    }
+
+    const onToggleIncluded = (tableIndex: number, included: boolean) =>
+        updateTable(tableIndex, (table) => ({ ...table, included }))
+
+    const onBboxCommit = (tableIndex: number, bbox: [number, number, number, number]) => {
+        commitTables(tablesRef.current.map((t, i) => (i === tableIndex ? { ...t, bbox } : t)))
+        scheduleReextract(tableIndex)
+    }
+
+    // Set/clear the header row of a table; the backend re-derives the column mapping.
+    const onSetHeader = (tableIndex: number, headerIndex: number | null) => {
+        commitTables(tablesRef.current.map((t, i) => (i === tableIndex ? { ...t, header_index: headerIndex } : t)))
+        const target = tablesRef.current[tableIndex]
+        setHeaderCall({
+            statement_import_id: data.doc.name,
+            page: target.page,
+            table_index: target.table_index,
+            header_index: headerIndex ?? -1,
+        })
+            .then((res) => {
+                commitTables(res?.message?.pdf_tables ?? [])
+                mutate()
+            })
+            .catch(() => toast.error(_('Could not update the header row.')))
+    }
+
+    if (tables.length === 0) {
+        return (
+            <div className="p-4">
+                <Paragraph className="text-p-sm text-ink-gray-5">
+                    {_('No tables were extracted from this PDF.')}
+                </Paragraph>
+            </div>
+        )
+    }
+
+    return (
+        <div className="flex flex-col gap-3 p-4">
+            <div className="flex flex-col gap-1">
+                <H3 className="text-base border-0 p-0">{_('Detected Tables')}</H3>
+                <Paragraph className="text-p-sm">
+                    {_('Review each page. In the Table view, map each column, click a row number to set/clear the header row, and exclude anything that is not transactions (ads, summaries).')}
+                </Paragraph>
+            </div>
+
+            {error && <ErrorBanner error={error} />}
+
+            <div className="flex items-center justify-between gap-2">
+                <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'pdf' | 'table')}>
+                    <TabsList variant="subtle">
+                        <TabsTrigger value="pdf"><FileTextIcon />{_('PDF')}</TabsTrigger>
+                        <TabsTrigger value="table"><TableIcon />{_('Table')}</TabsTrigger>
+                    </TabsList>
+                </Tabs>
+
+                <div className="flex items-center gap-1">
+                    {busy && (
+                        <span className="flex items-center gap-1 pe-1 text-xs text-ink-gray-5">
+                            <Loader2Icon className="size-3 animate-spin" />
+                            {reextracting ? _('Re-extracting') : _('Saving')}
+                        </span>
+                    )}
+                    <Button
+                        variant="ghost"
+                        isIconButton
+                        disabled={pageIndex === 0}
+                        onClick={() => setPageIndex((i) => Math.max(0, i - 1))}
+                    >
+                        <ChevronLeftIcon />
+                    </Button>
+                    <span className="min-w-24 text-center text-sm text-ink-gray-7">
+                        {_('Page {0} of {1}', [currentPage.toString(), pages.length.toString()])}
+                    </span>
+                    <Button
+                        variant="ghost"
+                        isIconButton
+                        disabled={pageIndex >= pages.length - 1}
+                        onClick={() => setPageIndex((i) => Math.min(pages.length - 1, i + 1))}
+                    >
+                        <ChevronRightIcon />
+                    </Button>
+                </div>
+            </div>
+
+            {viewMode === 'pdf' ? (
+                <PageView
+                    pageTables={pageTables}
+                    disabled={isCompleted}
+                    onToggleIncluded={onToggleIncluded}
+                    onBboxCommit={onBboxCommit}
+                />
+            ) : (
+                <div className="flex flex-col gap-4">
+                    {pageTables.map(({ table, index }, position) => {
+                        const isCollapsed = collapsed.has(index)
+                        return (
+                            <div
+                                key={index}
+                                className={cn('flex flex-col rounded border border-outline-gray-2', !table.included && 'opacity-60')}
+                            >
+                                <div className="flex items-center justify-between p-2">
+                                    <span className="ps-1 text-sm font-medium text-ink-gray-8">
+                                        {_('Table {0}', [(position + 1).toString()])}
+                                    </span>
+                                    <div className="flex items-center gap-2">
+                                        <IncludeToggle
+                                            id={`tbl-${index}`}
+                                            checked={table.included}
+                                            disabled={isCompleted}
+                                            onCheckedChange={(c) => onToggleIncluded(index, c)}
+                                        />
+                                        <Button variant="ghost" size="sm" isIconButton onClick={() => toggleCollapsed(index)}>
+                                            <ChevronDownIcon className={cn('transition-transform', isCollapsed && '-rotate-90')} />
+                                        </Button>
+                                    </div>
+                                </div>
+                                {!isCollapsed && (
+                                    <div className="overflow-auto border-t border-outline-gray-2">
+                                        <RawTableGrid
+                                            rows={table.rows}
+                                            columnMapping={columnMappingRecord(table)}
+                                            headerIndex={table.header_index}
+                                            editable
+                                            disabled={isCompleted}
+                                            onChangeMapping={(columnIndex, mapsTo) => onChangeMapping(index, columnIndex, mapsTo)}
+                                            onSetHeader={(rowIndex) => onSetHeader(index, rowIndex)}
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        )
+                    })}
+                </div>
+            )}
+        </div>
+    )
+}
+
+type PageViewProps = {
+    pageTables: { table: PDFTable; index: number }[]
+    disabled: boolean
+    onToggleIncluded: (tableIndex: number, included: boolean) => void
+    onBboxCommit: (tableIndex: number, bbox: [number, number, number, number]) => void
+}
+
+const PageView = ({ pageTables, disabled, onToggleIncluded, onBboxCommit }: PageViewProps) => {
+    const containerRef = useRef<HTMLDivElement>(null)
+    const pageImage = pageTables[0]?.table.page_image
+    const pageWidth = pageTables[0]?.table.page_width ?? 1
+    const pageHeight = pageTables[0]?.table.page_height ?? 1
+
+    if (!pageImage) {
+        return (
+            <Paragraph className="text-p-sm text-ink-gray-5">
+                {_('No page image is available for this page.')}
+            </Paragraph>
+        )
+    }
+
+    return (
+        <div className="flex flex-col gap-3">
+            {!disabled && (
+                <Paragraph className="text-xs text-ink-gray-5">
+                    {_('Drag a box to move it, or drag a corner to resize. The table is re-read from the new region automatically.')}
+                </Paragraph>
+            )}
+            <div ref={containerRef} className="relative w-full overflow-auto rounded border border-outline-gray-2 bg-surface-gray-1">
+                <img src={pageImage} alt={_('Page preview')} className="w-full" />
+                {pageTables.map(({ table, index }, position) => {
+                    const color = OVERLAY_COLORS[position % OVERLAY_COLORS.length]
+                    return (
+                        <BBoxOverlay
+                            key={index}
+                            bbox={table.bbox}
+                            pageWidth={pageWidth}
+                            pageHeight={pageHeight}
+                            color={color}
+                            label={_('Table {0}', [(position + 1).toString()])}
+                            included={table.included}
+                            disabled={disabled}
+                            containerRef={containerRef}
+                            onCommit={(bbox) => onBboxCommit(index, bbox)}
+                        />
+                    )
+                })}
+            </div>
+
+            <div className="flex flex-col gap-1.5">
+                {pageTables.map(({ table, index }, position) => {
+                    const color = OVERLAY_COLORS[position % OVERLAY_COLORS.length]
+                    return (
+                        <div key={index} className="flex items-center justify-between rounded border border-outline-gray-2 px-2 py-1.5">
+                            <div className="flex items-center gap-2">
+                                <span className={cn('size-3 rounded-sm', color.swatch)} />
+                                <span className="text-xs">{_('Table {0}', [(position + 1).toString()])}</span>
+                            </div>
+                            <IncludeToggle
+                                id={`pdf-tbl-${index}`}
+                                checked={table.included}
+                                disabled={disabled}
+                                onCheckedChange={(c) => onToggleIncluded(index, c)}
+                            />
+                        </div>
+                    )
+                })}
+            </div>
+        </div>
+    )
+}
+
+const IncludeToggle = ({
+    id,
+    checked,
+    disabled,
+    onCheckedChange,
+}: {
+    id: string
+    checked: boolean
+    disabled: boolean
+    onCheckedChange: (checked: boolean) => void
+}) => (
+    <div className="flex items-center gap-2">
+        <Label htmlFor={id} className="text-xs text-ink-gray-6">{_('Include')}</Label>
+        <Switch id={id} checked={checked} disabled={disabled} onCheckedChange={onCheckedChange} />
+    </div>
+)
+
+export default PDFTableEditor

banking/src/components/features/BankStatementImporter/RawTableGrid.tsx

@@ -0,0 +1,222 @@
+import { useMemo } from 'react'
+import {
+    ArrowDownRightIcon,
+    ArrowUpDownIcon,
+    ArrowUpRightIcon,
+    BanknoteIcon,
+    CalendarIcon,
+    DollarSignIcon,
+    FileTextIcon,
+    ListIcon,
+    ReceiptIcon,
+} from 'lucide-react'
+import _ from '@/lib/translate'
+import { cn } from '@/lib/utils'
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@/components/ui/table'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { COLUMN_MAPS_TO_OPTIONS, ColumnMapsTo } from './import_utils'
+
+const AMOUNT_COLUMNS: ColumnMapsTo[] = ['Amount', 'Withdrawal', 'Deposit', 'Balance']
+const DATE_LIKE = /\d{1,4}[/\-.\s]\d{1,2}[/\-.\s]\d{1,4}|\d{1,2}[\s-][a-z]{3}/i
+
+type Props = {
+    rows: string[][]
+    /** Column index -> mapped field */
+    columnMapping: Record<number, ColumnMapsTo>
+    headerIndex: number | null
+    editable?: boolean
+    disabled?: boolean
+    onChangeMapping?: (columnIndex: number, mapsTo: ColumnMapsTo) => void
+    /** Set the header row (or null to mark the table as having no header). */
+    onSetHeader?: (rowIndex: number | null) => void
+}
+
+/**
+ * A preview of extracted rows with CSV-style colour coding: the header row is highlighted,
+ * detected transaction rows are green, and mapped columns are emphasised. When `editable`, a
+ * compact row of column -> field dropdowns sits at the top, and row numbers can be clicked to
+ * set/clear the header row.
+ */
+const RawTableGrid = ({ rows, columnMapping, headerIndex, editable, disabled, onChangeMapping, onSetHeader }: Props) => {
+    // Tabular (XLSX) cells can be numbers/dates, not strings - coerce so .trim()/render are safe.
+    const stringRows = useMemo(
+        () => rows.map((row) => row.map((cell) => (cell == null ? '' : String(cell)))),
+        [rows],
+    )
+    const numColumns = useMemo(() => stringRows.reduce((max, row) => Math.max(max, row.length), 0), [stringRows])
+
+    const validColumns = useMemo(
+        () => Object.entries(columnMapping).filter(([, m]) => m && m !== 'Do not import').map(([i]) => Number(i)),
+        [columnMapping],
+    )
+    const dateColumn = useMemo(() => Object.entries(columnMapping).find(([, m]) => m === 'Date')?.[0], [columnMapping])
+    const amountColumns = useMemo(
+        () => Object.entries(columnMapping).filter(([, m]) => ['Amount', 'Withdrawal', 'Deposit'].includes(m)).map(([i]) => Number(i)),
+        [columnMapping],
+    )
+
+    // Approximate the backend's transaction-row detection so the highlighting tracks edits live.
+    const transactionRows = useMemo(() => {
+        const set = new Set<number>()
+        if (dateColumn === undefined) return set
+        const dateIdx = Number(dateColumn)
+        stringRows.forEach((row, index) => {
+            if (index === headerIndex) return
+            const dateCell = (row[dateIdx] ?? '').trim()
+            if (!dateCell || !DATE_LIKE.test(dateCell)) return
+            if (amountColumns.some((c) => (row[c] ?? '').trim() !== '')) set.add(index)
+        })
+        return set
+    }, [stringRows, headerIndex, dateColumn, amountColumns])
+
+    return (
+        <Table containerClassName="rounded-none">
+            <TableBody>
+                {editable && (
+                    <TableRow className="border-b border-outline-gray-2 bg-surface-white hover:bg-surface-white">
+                        <TableHead className="w-8 p-1" />
+                        {Array.from({ length: numColumns }).map((_unused, columnIndex) => (
+                            <TableHead key={columnIndex} className="p-1 align-top">
+                                <Select
+                                    disabled={disabled}
+                                    value={columnMapping[columnIndex] ?? 'Do not import'}
+                                    onValueChange={(value) => onChangeMapping?.(columnIndex, value as ColumnMapsTo)}
+                                >
+                                    <SelectTrigger variant="outline" inputSize="sm" className="h-7 w-full">
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {COLUMN_MAPS_TO_OPTIONS.map((option) => (
+                                            <SelectItem key={option} value={option}>
+                                                <span className="flex items-center gap-1.5">
+                                                    <ColumnHeaderIcon columnType={option} />
+                                                    {_(option)}
+                                                </span>
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </TableHead>
+                        ))}
+                    </TableRow>
+                )}
+
+                {stringRows.map((row, index) => {
+                    const isHeaderRow = index === headerIndex
+                    const isTransactionRow = transactionRows.has(index)
+
+                    return (
+                        <TableRow
+                            key={index}
+                            className={cn({
+                                'bg-green-50 hover:bg-green-50 dark:bg-green-700 dark:hover:bg-green-700': isTransactionRow,
+                                'bg-yellow-100 hover:bg-yellow-100 dark:bg-yellow-400': isHeaderRow,
+                                'text-ink-gray-5/70': !isTransactionRow && !isHeaderRow,
+                            })}
+                        >
+                            {editable && onSetHeader ? (
+                                <TableCell className="h-px w-8 p-0 text-center">
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <button
+                                                type="button"
+                                                disabled={disabled}
+                                                onClick={() => onSetHeader(isHeaderRow ? null : index)}
+                                                className={cn(
+                                                    'flex h-full w-full items-center justify-center px-1 text-ink-gray-6 hover:bg-surface-gray-3',
+                                                    isHeaderRow && 'font-semibold text-ink-gray-8',
+                                                )}
+                                            >
+                                                {index + 1}
+                                            </button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                            {isHeaderRow
+                                                ? _('This is the header row. Click to mark the table as having no header.')
+                                                : _('Click to set this as the header row.')}
+                                        </TooltipContent>
+                                    </Tooltip>
+                                </TableCell>
+                            ) : (
+                                <TableCell className="w-8 px-1 py-0.5 text-center text-ink-gray-6">{index + 1}</TableCell>
+                            )}
+
+                            {Array.from({ length: numColumns }).map((_unused, cellIndex) => {
+                                const columnType = columnMapping[cellIndex]
+                                const isValidColumn = validColumns.includes(cellIndex)
+                                const isAmountColumn = AMOUNT_COLUMNS.includes(columnType)
+                                const cellText = row[cellIndex] ?? ''
+
+                                // Read-only header row: icon + label.
+                                if (isHeaderRow) {
+                                    return (
+                                        <TableCell key={cellIndex} className="max-w-[200px] overflow-hidden text-ellipsis py-1">
+                                            <div className="flex items-center gap-1 px-1 text-xs font-medium text-ink-gray-8">
+                                                {columnType && (
+                                                    <Tooltip>
+                                                        <TooltipTrigger>
+                                                            <ColumnHeaderIcon columnType={columnType} />
+                                                        </TooltipTrigger>
+                                                        <TooltipContent>{_(columnType)}</TooltipContent>
+                                                    </Tooltip>
+                                                )}
+                                                {cellText}
+                                            </div>
+                                        </TableCell>
+                                    )
+                                }
+
+                                return (
+                                    <TableCell
+                                        key={cellIndex}
+                                        className={cn('max-w-[200px] 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 px-1 text-xs', {
+                                                'justify-end': isAmountColumn && isValidColumn && isTransactionRow,
+                                            })}
+                                            title={cellText}
+                                        >
+                                            {cellText}
+                                        </div>
+                                    </TableCell>
+                                )
+                            })}
+                        </TableRow>
+                    )
+                })}
+            </TableBody>
+        </Table>
+    )
+}
+
+const ColumnHeaderIcon = ({ columnType }: { columnType?: ColumnMapsTo }) => {
+    switch (columnType) {
+        case 'Amount':
+            return <DollarSignIcon className="size-4" />
+        case 'Withdrawal':
+            return <ArrowUpRightIcon className="size-4 text-ink-red-3" />
+        case 'Deposit':
+            return <ArrowDownRightIcon className="size-4 text-ink-green-3" />
+        case 'Balance':
+            return <BanknoteIcon className="size-4" />
+        case 'Date':
+            return <CalendarIcon className="size-4" />
+        case 'Description':
+            return <FileTextIcon className="size-4" />
+        case 'Reference':
+            return <ReceiptIcon className="size-4" />
+        case 'Transaction Type':
+            return <ListIcon className="size-4" />
+        case 'Debit/Credit':
+            return <ArrowUpDownIcon className="size-4" />
+        default:
+            return null
+    }
+}
+
+export default RawTableGrid

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

@@ -1,6 +1,97 @@
 import { BankStatementImportLog } from "@/types/Accounts/BankStatementImportLog"
-import { useFrappeGetCall } from "frappe-react-sdk"
+import { useFrappeGetCall, useFrappePostCall } from "frappe-react-sdk"
 
+export type ColumnMapsTo =
+    | "Do not import"
+    | "Date"
+    | "Withdrawal"
+    | "Deposit"
+    | "Amount"
+    | "Description"
+    | "Reference"
+    | "Transaction Type"
+    | "Debit/Credit"
+    | "Balance"
+    | "Included Fee"
+    | "Excluded Fee"
+    | "Party Name/Account Holder"
+    | "Party Account No."
+    | "Party IBAN"
+
+export type ColumnMappingEntry = {
+    index: number
+    maps_to: ColumnMapsTo | string
+    header_text?: string
+    variable?: string
+}
+
+/** Apply a column mapping change, clearing the same mapping from any other column. */
+export function applyColumnMappingChange<T extends ColumnMappingEntry>(
+    columns: T[],
+    columnIndex: number,
+    mapsTo: ColumnMapsTo,
+): T[] {
+    const previous = columns.find((c) => c.index === columnIndex)
+    const cleared =
+        mapsTo === "Do not import"
+            ? columns
+            : columns.map((c) =>
+                  c.index !== columnIndex && c.maps_to === mapsTo
+                      ? { ...c, maps_to: "Do not import" as ColumnMapsTo }
+                      : c,
+              )
+
+    return [
+        ...cleared.filter((c) => c.index !== columnIndex),
+        {
+            index: columnIndex,
+            maps_to: mapsTo,
+            header_text: previous?.header_text ?? "",
+            variable: previous?.variable ?? `column_${columnIndex}`,
+        } as T,
+    ].sort((a, b) => a.index - b.index)
+}
+
+export const COLUMN_MAPS_TO_OPTIONS: ColumnMapsTo[] = [
+    "Do not import",
+    "Date",
+    "Description",
+    "Reference",
+    "Withdrawal",
+    "Deposit",
+    "Amount",
+    "Balance",
+    "Debit/Credit",
+    "Transaction Type",
+    "Included Fee",
+    "Excluded Fee",
+    "Party Name/Account Holder",
+    "Party Account No.",
+    "Party IBAN",
+]
+
+export interface PDFTableColumn {
+    index: number
+    header_text: string
+    variable?: string
+    maps_to: ColumnMapsTo
+}
+
+export interface PDFTable {
+    page: number
+    table_index: number
+    bbox: [number, number, number, number]
+    page_width: number
+    page_height: number
+    page_image: string | null
+    render_scale: number | null
+    rows: string[][]
+    header_index: number | null
+    column_mapping: PDFTableColumn[]
+    date_format?: string
+    amount_format?: string
+    included: boolean
+}
 
 export interface GetStatementDetailsResponse {
     doc: BankStatementImportLog,
@@ -30,6 +121,7 @@ export interface GetStatementDetailsResponse {
     date_format: string,
     raw_data: Array<Array<string>>,
     currency: string,
+    pdf_tables?: PDFTable[],
 }
 
 export const useGetStatementDetails = (id: string) => {
@@ -39,4 +131,24 @@ export const useGetStatementDetails = (id: string) => {
         revalidateOnFocus: false
     })
 
+}
+
+export const useUpdatePDFTables = () => {
+    return useFrappePostCall<{ message: GetStatementDetailsResponse }>("erpnext.accounts.doctype.bank_statement_import_log.bank_statement_import_log.update_pdf_tables")
+}
+
+export const useReextractPDFTable = () => {
+    return useFrappePostCall<{ message: GetStatementDetailsResponse }>("erpnext.accounts.doctype.bank_statement_import_log.bank_statement_import_log.reextract_pdf_table")
+}
+
+export const useSetPDFTableHeader = () => {
+    return useFrappePostCall<{ message: GetStatementDetailsResponse }>("erpnext.accounts.doctype.bank_statement_import_log.bank_statement_import_log.set_pdf_table_header")
+}
+
+export const useUpdateColumnMapping = () => {
+    return useFrappePostCall<{ message: GetStatementDetailsResponse }>("erpnext.accounts.doctype.bank_statement_import_log.bank_statement_import_log.update_column_mapping")
+}
+
+export const useSetHeaderIndex = () => {
+    return useFrappePostCall<{ message: GetStatementDetailsResponse }>("erpnext.accounts.doctype.bank_statement_import_log.bank_statement_import_log.set_header_index")
 }

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

@@ -4,7 +4,7 @@ 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'
+import { ArrowRightLeftIcon, HistoryIcon, LandmarkIcon, OptionIcon, ReceiptIcon, SaveIcon, SettingsIcon, ZapIcon } from 'lucide-react'
 
 const Shortcuts = [
     {
@@ -32,7 +32,7 @@ const Shortcuts = [
         }
     },
     {
-        shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>R</Kbd></KbdGroup>,
+        shortcut: <KbdGroup><Kbd><OptionIcon /></Kbd><Kbd>R</Kbd></KbdGroup>,
         action: {
             icon: <ZapIcon />,
             label: _("Accept Matching Rule"),

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

@@ -20,7 +20,7 @@ export const Preferences = () => {
 
     const { updateDoc, error } = useFrappeUpdateDoc<AccountsSettings>()
 
-    const onUpdate = (field: keyof AccountsSettings, value: any) => {
+    const onUpdate = <K extends keyof AccountsSettings>(field: K, value: AccountsSettings[K]) => {
         mutate(updateDoc("Accounts Settings", "Accounts Settings", {
             [field]: value
         }), {

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

@@ -1,95 +1,42 @@
 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 { SettingsIcon } 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'
+import SettingsDialogContent from './SettingsDialogContent'
 
 const Settings = () => {
+	const [isOpen, setIsOpen] = useState(false)
 
-    const [isOpen, setIsOpen] = useState(false)
+	useHotkeys('shift+meta+g', () => {
+		setIsOpen(x => !x)
+	}, {
+		enabled: true,
+		preventDefault: true,
+		enableOnFormTags: 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 >
-    )
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<DialogTrigger asChild>
+						<Button variant={'outline'} isIconButton size='md' aria-label={_("Settings")}>
+							<SettingsIcon />
+						</Button>
+					</DialogTrigger>
+				</TooltipTrigger>
+				<TooltipContent>
+					{_("Settings")}
+				</TooltipContent>
+			</Tooltip>
+			{isOpen && (
+				<SettingsDialogContent onClose={() => setIsOpen(false)} />
+			)}
+		</Dialog>
+	)
 }
 
 export default Settings

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

@@ -0,0 +1,52 @@
+import {
+	SettingsDialog,
+	SettingsPanels,
+	SettingsTabGroup,
+	SettingsTabItem,
+	SettingsTabs,
+} from '@/components/ui/settings-dialog'
+import _ from '@/lib/translate'
+import { KeyboardIcon, Loader2Icon, SlidersVerticalIcon, ZapIcon } from 'lucide-react'
+import { lazy, Suspense } from 'react'
+
+const SettingsPanelsContent = lazy(() => import('./SettingsPanelsContent'))
+
+const SettingsPanelsFallback = () => (
+	<div className="flex flex-1 items-center justify-center min-h-full">
+		<Loader2Icon className="size-6 animate-spin text-muted-foreground" />
+	</div>
+)
+
+const SettingsDialogContent = ({ onClose }: { onClose: () => void }) => {
+	return (
+		<SettingsDialog defaultValue="preferences" onClose={onClose}>
+			<SettingsTabs>
+				<SettingsTabGroup header={_("Settings")}>
+					<SettingsTabItem
+						icon={<SlidersVerticalIcon />}
+						label={_("Preferences")}
+						value="preferences"
+					/>
+					<SettingsTabItem
+						icon={<ZapIcon />}
+						label={_("Matching Rules")}
+						value="rules"
+					/>
+					<SettingsTabItem
+						icon={<KeyboardIcon />}
+						label={_("Keyboard Shortcuts")}
+						value="keyboard-shortcuts"
+					/>
+				</SettingsTabGroup>
+			</SettingsTabs>
+
+			<SettingsPanels>
+				<Suspense fallback={<SettingsPanelsFallback />}>
+					<SettingsPanelsContent />
+				</Suspense>
+			</SettingsPanels>
+		</SettingsDialog>
+	)
+}
+
+export default SettingsDialogContent

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

@@ -0,0 +1,24 @@
+import { SettingsPanel } from '@/components/ui/settings-dialog'
+import { Preferences } from './Preferences'
+import MatchingRules from './MatchingRules'
+import KeyboardShortcuts from './KeyboardShortcuts'
+
+const SettingsPanelsContent = () => {
+	return (
+		<>
+			<SettingsPanel value="preferences">
+				<Preferences />
+			</SettingsPanel>
+			<SettingsPanel value="rules">
+				<MatchingRules />
+			</SettingsPanel>
+			<SettingsPanel value="bank-accounts" />
+			<SettingsPanel value="masters" />
+			<SettingsPanel value="keyboard-shortcuts">
+				<KeyboardShortcuts />
+			</SettingsPanel>
+		</>
+	)
+}
+
+export default SettingsPanelsContent

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

@@ -170,7 +170,7 @@ function AlertDialogCancel({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
   Pick<React.ComponentProps<typeof Button>, "variant" | "size" | "theme">) {
   return (
-    <Button variant={variant} size={size} asChild>
+    <Button variant={variant} size={size} theme={theme} asChild>
       <AlertDialogPrimitive.Cancel
         data-slot="alert-dialog-cancel"
         className={cn(className)}

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

@@ -18,22 +18,10 @@ interface ParsedErrorMessage {
 }
 
 const parseHeading = (message?: ParsedErrorMessage) => {
-    if (message?.title === 'Message' || message?.title === 'Error') return "There was an error."
+    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) => {
 
 
@@ -53,8 +41,7 @@ const ErrorBanner = ({ error, overrideHeading, ...props }: ErrorBannerProps) =>
             <AlertTitle>{overrideHeading ?? parseHeading(messages[0])}</AlertTitle>
             <AlertDescription>
                 {messages.map((m, i) => {
-                    const safeMessage = wrapLooseListItemsWithUl(m.message)
-                    return <MarkdownRenderer content={safeMessage} key={i} />
+                    return <MarkdownRenderer content={m.message} key={i} />
                 })}
             </AlertDescription>
         </Alert>

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

@@ -231,7 +231,7 @@ export const FileTypeIcon = ({
     const getTextColor = () => {
         switch (fileType.toLowerCase()) {
             case 'pdf':
-                return 'text-red-700'
+                return 'text-ink-red-3'
             case 'doc':
             case 'docx':
                 return 'text-[#1A5CBD]'

banking/src/components/ui/modal-content-fallback.tsx

@@ -0,0 +1,7 @@
+import { Loader2Icon } from 'lucide-react'
+
+export const ModalContentFallback = () => (
+	<div className="flex items-center justify-center py-16">
+		<Loader2Icon className="size-6 animate-spin text-muted-foreground" />
+	</div>
+)

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

@@ -151,7 +151,7 @@ function SettingsTabItem({
                     )}
                     <span
                         className={cn(
-                            "flex-1 shrink-0 truncate text-sm duration-300 ease-in-out w-auto opacity-100 text-ink-gray-6",
+                            "flex-1 shrink-0 truncate text-sm leading-4 duration-300 ease-in-out w-auto opacity-100 text-ink-gray-6",
                             icon && "ms-2"
                         )}
                     >

banking/src/hooks/useMultiFileUploadProgress.ts

@@ -0,0 +1,37 @@
+import { useCallback, useRef, useState } from "react"
+
+/** Tracks per-file upload progress (0–1) and exposes their average. */
+export function useMultiFileUploadProgress() {
+    const [uploadProgress, setUploadProgress] = useState(0)
+    const fileProgressesRef = useRef<number[]>([])
+
+    const startTracking = useCallback((fileCount: number) => {
+        if (fileCount <= 0) {
+            return
+        }
+        fileProgressesRef.current = new Array(fileCount).fill(0)
+        setUploadProgress(0)
+    }, [])
+
+    const updateFileProgress = useCallback((fileIndex: number, progress: number) => {
+        if (fileIndex < 0 || fileIndex >= fileProgressesRef.current.length) {
+            return
+        }
+
+        if (fileProgressesRef.current.length === 0) {
+            return
+        }
+        fileProgressesRef.current[fileIndex] = progress
+        const total =
+            fileProgressesRef.current.reduce((sum, p) => sum + p, 0) /
+            fileProgressesRef.current.length
+        setUploadProgress(total)
+    }, [])
+
+    const resetProgress = useCallback(() => {
+        fileProgressesRef.current = []
+        setUploadProgress(0)
+    }, [])
+
+    return { uploadProgress, startTracking, updateFileProgress, resetProgress }
+}

banking/src/lib/numbers.ts

@@ -1,4 +1,3 @@
-import { in_list } from "./checks";
 import { getCurrencyNumberFormat, getCurrencyProperty, getCurrencySymbol } from "./currency";
 import { getSystemDefault } from "./frappe";
 import _ from "@/lib/translate";

banking/src/pages/BankReconciliation.tsx

@@ -1,20 +1,16 @@
 import BankBalance from "@/components/features/BankReconciliation/BankBalance"
-import BankClearanceSummary from "@/components/features/BankReconciliation/BankClearanceSummary"
 import BankPicker from "@/components/features/BankReconciliation/BankPicker"
 import BankRecDateFilter from "@/components/features/BankReconciliation/BankRecDateFilter"
-import BankReconciliationStatement from "@/components/features/BankReconciliation/BankReconciliationStatement"
-import BankTransactions from "@/components/features/BankReconciliation/BankTransactionList"
 import BankTransactionUnreconcileModal from "@/components/features/BankReconciliation/BankTransactionUnreconcileModal"
 import CompanySelector from "@/components/features/BankReconciliation/CompanySelector"
-import IncorrectlyClearedEntries from "@/components/features/BankReconciliation/IncorrectlyClearedEntries"
 import MatchAndReconcile from "@/components/features/BankReconciliation/MatchAndReconcile"
 import Settings from "@/components/features/Settings/Settings"
 import ActionLog from "@/components/features/ActionLog/ActionLog"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { TooltipProvider } from "@/components/ui/tooltip"
 import _ from "@/lib/translate"
-import { useLayoutEffect, useRef, useState } from "react"
-import { AlertTriangleIcon, CheckCircleIcon, HomeIcon, LandmarkIcon, ListIcon, ScrollTextIcon, ShuffleIcon } from "lucide-react"
+import { lazy, Suspense, useLayoutEffect, useRef, useState } from "react"
+import { AlertTriangleIcon, CheckCircleIcon, HomeIcon, LandmarkIcon, ListIcon, Loader2Icon, ScrollTextIcon, ShuffleIcon } from "lucide-react"
 import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
 import { Badge } from "@/components/ui/badge"
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
@@ -22,6 +18,10 @@ import { Button } from "@/components/ui/button"
 import { useAtomValue } from "jotai"
 import { selectedBankAccountAtom } from "@/components/features/BankReconciliation/bankRecAtoms"
 
+const BankReconciliationStatement = lazy(() => import('@/components/features/BankReconciliation/BankReconciliationStatement'))
+const BankTransactions = lazy(() => import('@/components/features/BankReconciliation/BankTransactionList'))
+const BankClearanceSummary = lazy(() => import('@/components/features/BankReconciliation/BankClearanceSummary'))
+const IncorrectlyClearedEntries = lazy(() => import('@/components/features/BankReconciliation/IncorrectlyClearedEntries'))
 
 const BankReconciliation = () => {
 
@@ -35,7 +35,7 @@ const BankReconciliation = () => {
         }
     }, [])
 
-    const remainingHeightAfterTabs = window.innerHeight - headerHeight - 270
+    const remainingHeightAfterTabs = window.innerHeight - headerHeight - 220
 
     return (
         <div>
@@ -122,18 +122,24 @@ const BankRecTabs = ({ remainingHeightAfterTabs }: { remainingHeightAfterTabs: n
         <TabsContent value="Match and Reconcile">
             <MatchAndReconcile contentHeight={remainingHeightAfterTabs} />
         </TabsContent>
-        <TabsContent value="Bank Reconciliation Statement">
-            <BankReconciliationStatement />
-        </TabsContent>
-        <TabsContent value="Bank Transactions">
-            <BankTransactions />
-        </TabsContent>
-        <TabsContent value="Bank Clearance Summary">
-            <BankClearanceSummary />
-        </TabsContent>
-        <TabsContent value="Incorrectly Cleared Entries">
-            <IncorrectlyClearedEntries />
-        </TabsContent>
+        <Suspense fallback={
+            <div className="flex items-center justify-center p-16">
+                <Loader2Icon className="size-6 animate-spin text-muted-foreground" />
+            </div>
+        }>
+            <TabsContent value="Bank Reconciliation Statement">
+                <BankReconciliationStatement />
+            </TabsContent>
+            <TabsContent value="Bank Transactions">
+                <BankTransactions />
+            </TabsContent>
+            <TabsContent value="Bank Clearance Summary">
+                <BankClearanceSummary />
+            </TabsContent>
+            <TabsContent value="Incorrectly Cleared Entries">
+                <IncorrectlyClearedEntries />
+            </TabsContent>
+        </Suspense>
     </Tabs>
 }
 

banking/src/pages/BankStatementImporter.tsx

@@ -7,6 +7,7 @@ import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, Di
 import { Empty, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
 import ErrorBanner from "@/components/ui/error-banner"
 import { FileDropzone } from "@/components/ui/file-dropzone"
+import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { H3, Paragraph } from "@/components/ui/typography"
@@ -16,7 +17,7 @@ import { flt, formatCurrency } from "@/lib/numbers"
 import _ from "@/lib/translate"
 import { cn } from "@/lib/utils"
 import { BankStatementImportLog } from "@/types/Accounts/BankStatementImportLog"
-import { useFrappeCreateDoc, useFrappeFileUpload, useFrappeGetDocList } from "frappe-react-sdk"
+import { useFrappeCreateDoc, useFrappeFileUpload, useFrappeGetDocList, useFrappeUpdateDoc } from "frappe-react-sdk"
 import { useAtom, useAtomValue } from "jotai"
 import { ListIcon, Loader2Icon } from "lucide-react"
 import { useState } from "react"
@@ -30,11 +31,15 @@ const BankStatementImporter = () => {
     const [selectedBankAccount] = useAtom(selectedBankAccountAtom)
 
     const [files, setFiles] = useState<File[]>([])
+    const [password, setPassword] = useState("")
 
     const { upload, error, loading } = useFrappeFileUpload()
 
     const navigate = useNavigate()
     const { createDoc, loading: createLoading, error: createError } = useFrappeCreateDoc<BankStatementImportLog>()
+    const { updateDoc, error: updateError } = useFrappeUpdateDoc()
+
+    const isPdf = files[0]?.name?.toLowerCase().endsWith(".pdf") ?? false
 
     const onUpload = () => {
 
@@ -44,12 +49,18 @@ const BankStatementImporter = () => {
 
         const id = `new-bank-statement-import-log-${Date.now()}`
 
-        upload(files[0], {
+        // For protected PDFs, persist the password on the Bank Account so it is reused for
+        // every statement of this account (and is available before the import doc is created).
+        const ensurePassword = isPdf && password
+            ? updateDoc("Bank Account", selectedBankAccount.name, { statement_password: password })
+            : Promise.resolve()
+
+        ensurePassword.then(() => upload(files[0], {
             isPrivate: true,
             doctype: "Bank Statement Import Log",
             docname: id,
             fieldname: 'file'
-        }).then((file) => {
+        })).then((file) => {
             return createDoc("Bank Statement Import Log",
                 // @ts-expect-error - not filling everything else
                 {
@@ -67,6 +78,7 @@ const BankStatementImporter = () => {
             <div className="w-[52%]">
                 {error && <ErrorBanner error={error} />}
                 {createError && <ErrorBanner error={createError} />}
+                {updateError && <ErrorBanner error={updateError} />}
                 <div className="py-2 flex flex-col gap-6">
                     <div className="flex flex-col gap-2">
                         <Label>{_("Company")}<span className="text-ink-red-3">*</span></Label>
@@ -89,7 +101,7 @@ const BankStatementImporter = () => {
                                     data-slot="form-description"
                                     className={cn("text-ink-gray-5 text-xs")}
                                 >
-                                    {_("Upload your bank statement file to start the import process. We support CSV, and XLSX files.")}
+                                    {_("Upload your bank statement file to start the import process. We support CSV, XLSX and PDF files.")}
                                 </p>
                             </div>
                             <div>
@@ -105,10 +117,27 @@ const BankStatementImporter = () => {
                                 'text/csv': ['.csv'],
                                 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
                                 'application/vnd.ms-excel': ['.xls'],
+                                'application/pdf': ['.pdf'],
                                 // 'application/xml': ['.xml'],
                             }}
                             multiple={false}
                         />
+
+                        {isPdf && <div className="flex flex-col gap-2">
+                            <Label htmlFor="pdf-password">{_("PDF Password")}</Label>
+                            <Input
+                                id="pdf-password"
+                                type="password"
+                                autoComplete="off"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                placeholder={_("Only if the PDF is password protected")}
+                                className="max-w-sm"
+                            />
+                            <p data-slot="form-description" className={cn("text-ink-gray-5 text-p-sm")}>
+                                {_("Leave blank to use the password already saved for this bank account (if any). It is stored encrypted and reused for future statements.")}
+                            </p>
+                        </div>}
                     </div>}
                     <div className="flex justify-end px-4">
                         <Button
@@ -137,9 +166,10 @@ const StatementInstructions = () => {
         <DialogContent className="min-w-7xl">
             <DialogHeader>
                 <DialogTitle>{_("Statement Import Instructions")}</DialogTitle>
-                <DialogDescription>{_("We support uploading CSV, XLSX and XLS files. Please make sure the file contains the correct columns.")}</DialogDescription>
+                <DialogDescription>{_("We support uploading CSV, XLSX, XLS and PDF files. Please make sure the file contains the correct columns.")}</DialogDescription>
             </DialogHeader>
             <Paragraph className="text-sm">{_("The file should contain the following columns with a distinct header row. You can upload most bank statements as is without changing the columns.")}</Paragraph>
+            <Paragraph className="text-sm text-ink-gray-6">{_("For PDF statements, we auto-detect the tables on each page. You can then confirm each detected table, map its columns, and exclude anything that is not transactions (e.g. ads or summaries). Password-protected PDFs are supported - the password is saved on the bank account and reused.")}</Paragraph>
             <Table>
                 <TableHeader>
                     <TableRow>
@@ -231,7 +261,13 @@ const StatementImportLog = () => {
                             <TableRow key={item.name} onClick={() => onViewDetails(item.name)} className="cursor-pointer hover:bg-surface-gray-2">
                                 <TableCell>{formatDate(item.creation, 'Do MMM YYYY')}</TableCell>
                                 <TableCell><Badge theme={item.status === "Completed" ? "green" : "gray"}>{item.status}</Badge></TableCell>
-                                <TableCell>{formatDate(item.start_date, 'Do MMM YYYY')} to {formatDate(item.end_date, 'Do MMM YYYY')}</TableCell>
+                                <TableCell>
+                                    {item.start_date && item.end_date ? (
+                                        <span>{formatDate(item.start_date, 'Do MMM YYYY')} to {formatDate(item.end_date, 'Do MMM YYYY')}</span>
+                                    ) : (
+                                        <span>-</span>
+                                    )}
+                                </TableCell>
                                 <TableCell className="text-end">{item.number_of_transactions}</TableCell>
                                 <TableCell className="text-end font-numeric">{formatCurrency(flt(item.closing_balance, 2))}</TableCell>
                                 <TableCell><a

banking/src/pages/BankStatementImporterContainer.tsx

@@ -1,6 +1,7 @@
+import { Suspense } from 'react'
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbList } from '@/components/ui/breadcrumb'
 import _ from '@/lib/translate'
-import { HomeIcon } from 'lucide-react'
+import { HomeIcon, Loader2Icon } from 'lucide-react'
 import { Link, Outlet } from 'react-router'
 
 const BankStatementImporterContainer = () => {
@@ -29,7 +30,13 @@ const BankStatementImporterContainer = () => {
                     </BreadcrumbList>
                 </Breadcrumb>
             </div>
-            <Outlet />
+            <Suspense fallback={
+                <div className="flex flex-1 items-center justify-center p-16">
+                    <Loader2Icon className="size-6 animate-spin text-muted-foreground" />
+                </div>
+            }>
+                <Outlet />
+            </Suspense>
         </div>
     )
 }

banking/src/pages/ViewBankStatementImportLog.tsx

@@ -1,4 +1,4 @@
-import CSVImport from '@/components/features/BankStatementImporter/CSV/CSVImport'
+import { lazy } from 'react'
 import { useGetStatementDetails } from '@/components/features/BankStatementImporter/import_utils'
 import { Button } from '@/components/ui/button'
 import { useDirection } from '@/components/ui/direction'
@@ -8,11 +8,14 @@ import { useFrappeDocumentEventListener } from 'frappe-react-sdk'
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
 import { Link, useParams } from 'react-router'
 
+const CSVImport = lazy(() => import('@/components/features/BankStatementImporter/CSV/CSVImport'))
+const PDFImport = lazy(() => import('@/components/features/BankStatementImporter/PDF/PDFImport'))
+
 const ViewBankStatementImportLog = () => {
 
     const { id } = useParams<{ id: string }>()
 
-    const { data, isLoading, error } = useGetStatementDetails(id ?? "")
+    const { data, isLoading, error, mutate } = useGetStatementDetails(id ?? "")
 
     useFrappeDocumentEventListener("Bank Statement Import Log", id ?? "", () => {
     })
@@ -40,7 +43,13 @@ const ViewBankStatementImportLog = () => {
             <ErrorBanner error={error} />
         </div>
     }
-    return <CSVImport data={data} />
+    const isPdf = data.message.doc.file?.toLowerCase().endsWith('.pdf')
+
+    if (isPdf) {
+        return <PDFImport data={data} mutate={mutate} />
+    }
+
+    return <CSVImport data={data} mutate={mutate} />
 }
 
 export default ViewBankStatementImportLog

banking/src/types/Accounts/BankAccount.ts

@@ -38,6 +38,8 @@ export interface BankAccount{
 	branch_code?: string
 	/**	Bank Account No : Data	*/
 	bank_account_no?: string
+	/**	Statement PDF Password : Password - Password used to open password-protected PDF statements for this account. Stored encrypted.	*/
+	statement_password?: string
 	/**	Is Credit Card : Check	*/
 	is_credit_card?: 0 | 1
 	/**	Integration ID : Data	*/

banking/src/types/Accounts/BankStatementImportLog.ts

@@ -1,6 +1,6 @@
 import { BankStatementImportLogColumnMap } from './BankStatementImportLogColumnMap'
 
-export interface BankStatementImportLog{
+export interface BankStatementImportLog {
 	name: string
 	creation: string
 	modified: string
@@ -38,7 +38,7 @@ export interface BankStatementImportLog{
 	/**	Detected Date Format : Data	*/
 	detected_date_format?: string
 	/**	Detected Amount Format : Select	*/
-	detected_amount_format?: "Separate columns for withdrawal and deposit" | "Amount column has "CR"/"DR" values" | "Amount column has positive/negative values" | "Transaction type column has "CR"/"DR" values" | "Transaction type column has "Deposit"/"Withdrawal" values" | "Transaction type column has "C"/"D" values"
+	detected_amount_format?: "Separate columns for withdrawal and deposit" | "Amount column has \"CR\"/\"DR\" values" | "Amount column has positive/negative values" | "Transaction type column has \"CR\"/\"DR\" values" | "Transaction type column has \"Deposit\"/\"Withdrawal\" values" | "Transaction type column has \"C\"/\"D\" values"
 	/**	Detected Header Index : Int	*/
 	detected_header_index?: number
 	/**	Detected Transaction Starting Index : Int	*/
@@ -47,4 +47,6 @@ export interface BankStatementImportLog{
 	detected_transaction_ending_index?: number
 	/**	Column Mapping : Table - Bank Statement Import Log Column Map	*/
 	column_mapping?: BankStatementImportLogColumnMap[]
+	/**	PDF Tables : JSON - Per-table extraction data for PDF statements	*/
+	pdf_tables?: string
 }

banking/vite.config.ts

@@ -21,5 +21,35 @@ export default defineConfig({
 		outDir: '../erpnext/public/banking',
 		emptyOutDir: true,
 		target: 'es2015',
+		rollupOptions: {
+			output: {
+				manualChunks(id) {
+					if (!id.includes('node_modules')) {
+						return
+					}
+					if (id.includes('react-dom') || id.includes('/react/')) {
+						return 'vendor-react'
+					}
+					if (id.includes('frappe-react-sdk')) {
+						return 'vendor-frappe'
+					}
+					if (id.includes('@tanstack')) {
+						return 'vendor-tanstack'
+					}
+					if (id.includes('fuse.js')) {
+						return 'vendor-fuse'
+					}
+					if (id.includes('radix-ui') || id.includes('@radix-ui')) {
+						return 'vendor-radix'
+					}
+					if (id.includes('jotai')) {
+						return 'vendor-jotai'
+					}
+					if (id.includes('lucide-react')) {
+						return 'vendor-lucide'
+					}
+				},
+			},
+		},
 	},
 });

banking/yarn.lock

@@ -3333,11 +3333,6 @@ react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
     get-nonce "^1.0.0"
     tslib "^2.0.0"
 
-react-virtuoso@^4.18.6:
-  version "4.18.6"
-  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.18.6.tgz#953637adf805d562892270aafdeeedb0bda1881b"
-  integrity sha512-CrT3P6HyjJMHZVWSste2bG2q5aWGlHfW2QuySZjiFwB2Qok/xsvgy+k8Z2jeDP8PP5KsBip7zNrl/F0QoxeyKw==
-
 react@^19.2.6:
   version "19.2.6"
   resolved "https://registry.yarnpkg.com/react/-/react-19.2.6.tgz#3dadb8e12b2a7934c1d5317973e5dce1301f9a4d"

erpnext/accounts/custom/address.json

@@ -1,126 +0,0 @@
-{
- "custom_fields": [
-  {
-   "_assign": null,
-   "_comments": null,
-   "_liked_by": null,
-   "_user_tags": null,
-   "allow_in_quick_entry": 0,
-   "allow_on_submit": 0,
-   "bold": 0,
-   "collapsible": 0,
-   "collapsible_depends_on": null,
-   "columns": 0,
-   "creation": "2018-12-28 22:29:21.828090",
-   "default": null,
-   "depends_on": null,
-   "description": null,
-   "docstatus": 0,
-   "dt": "Address",
-   "fetch_from": null,
-   "fetch_if_empty": 0,
-   "fieldname": "tax_category",
-   "fieldtype": "Link",
-   "hidden": 0,
-   "hide_border": 0,
-   "hide_days": 0,
-   "hide_seconds": 0,
-   "idx": 15,
-   "ignore_user_permissions": 0,
-   "ignore_xss_filter": 0,
-   "in_global_search": 0,
-   "in_list_view": 0,
-   "in_preview": 0,
-   "in_standard_filter": 0,
-   "insert_after": "fax",
-   "label": "Tax Category",
-   "length": 0,
-   "mandatory_depends_on": null,
-   "modified": "2018-12-28 22:29:21.828090",
-   "modified_by": "Administrator",
-   "name": "Address-tax_category",
-   "no_copy": 0,
-   "options": "Tax Category",
-   "owner": "Administrator",
-   "parent": null,
-   "parentfield": null,
-   "parenttype": null,
-   "permlevel": 0,
-   "precision": "",
-   "print_hide": 0,
-   "print_hide_if_no_value": 0,
-   "print_width": null,
-   "read_only": 0,
-   "read_only_depends_on": null,
-   "report_hide": 0,
-   "reqd": 0,
-   "search_index": 0,
-   "translatable": 0,
-   "unique": 0,
-   "width": null
-  },
-  {
-   "_assign": null,
-   "_comments": null,
-   "_liked_by": null,
-   "_user_tags": null,
-   "allow_in_quick_entry": 0,
-   "allow_on_submit": 0,
-   "bold": 0,
-   "collapsible": 0,
-   "collapsible_depends_on": null,
-   "columns": 0,
-   "creation": "2020-10-14 17:41:40.878179",
-   "default": "0",
-   "depends_on": null,
-   "description": null,
-   "docstatus": 0,
-   "dt": "Address",
-   "fetch_from": null,
-   "fetch_if_empty": 0,
-   "fieldname": "is_your_company_address",
-   "fieldtype": "Check",
-   "hidden": 0,
-   "hide_border": 0,
-   "hide_days": 0,
-   "hide_seconds": 0,
-   "idx": 20,
-   "ignore_user_permissions": 0,
-   "ignore_xss_filter": 0,
-   "in_global_search": 0,
-   "in_list_view": 0,
-   "in_preview": 0,
-   "in_standard_filter": 0,
-   "insert_after": "linked_with",
-   "label": "Is Your Company Address",
-   "length": 0,
-   "mandatory_depends_on": null,
-   "modified": "2020-10-14 17:41:40.878179",
-   "modified_by": "Administrator",
-   "name": "Address-is_your_company_address",
-   "no_copy": 0,
-   "options": null,
-   "owner": "Administrator",
-   "parent": null,
-   "parentfield": null,
-   "parenttype": null,
-   "permlevel": 0,
-   "precision": "",
-   "print_hide": 0,
-   "print_hide_if_no_value": 0,
-   "print_width": null,
-   "read_only": 0,
-   "read_only_depends_on": null,
-   "report_hide": 0,
-   "reqd": 0,
-   "search_index": 0,
-   "translatable": 0,
-   "unique": 0,
-   "width": null
-  }
- ],
- "custom_perms": [],
- "doctype": "Address",
- "property_setters": [],
- "sync_on_migrate": 1
-}

erpnext/accounts/doctype/account/account.json

@@ -126,7 +126,7 @@
    "label": "Account Type",
    "oldfieldname": "account_type",
    "oldfieldtype": "Select",
-   "options": "\nAccumulated Depreciation\nAsset Received But Not Billed\nBank\nCash\nChargeable\nCapital Work in Progress\nCost of Goods Sold\nCurrent Asset\nCurrent Liability\nDepreciation\nDirect Expense\nDirect Income\nEquity\nExpense Account\nExpenses Included In Asset Valuation\nExpenses Included In Valuation\nFixed Asset\nIncome Account\nIndirect Expense\nIndirect Income\nLiability\nPayable\nReceivable\nRound Off\nRound Off for Opening\nStock\nStock Adjustment\nStock Received But Not Billed\nService Received But Not Billed\nTax\nTemporary",
+   "options": "\nAccumulated Depreciation\nAsset Received But Not Billed\nBank\nCash\nChargeable\nCapital Work in Progress\nCost of Goods Sold\nCurrent Asset\nCurrent Liability\nDepreciation\nDirect Expense\nDirect Income\nEquity\nExpense Account\nExpenses Included In Asset Valuation\nExpenses Included In Valuation\nFixed Asset\nIncome Account\nIndirect Expense\nIndirect Income\nLiability\nPayable\nReceivable\nRound Off\nRound Off for Opening\nStock\nStock Adjustment\nStock Received But Not Billed\nStock Delivered But Not Billed\nService Received But Not Billed\nTax\nTemporary",
    "search_index": 1
   },
   {

erpnext/accounts/doctype/account/account.py

@@ -65,6 +65,7 @@ class Account(NestedSet):
 			"Stock",
 			"Stock Adjustment",
 			"Stock Received But Not Billed",
+			"Stock Delivered But Not Billed",
 			"Service Received But Not Billed",
 			"Tax",
 			"Temporary",
@@ -174,16 +175,19 @@ class Account(NestedSet):
 		if cint(self.is_group):
 			db_value = self.get_doc_before_save()
 			if db_value:
+				Account = frappe.qb.DocType("Account")
+				query = frappe.qb.update(Account).where((Account.lft > self.lft) & (Account.rgt < self.rgt))
+
+				updated = False
 				if self.report_type != db_value.report_type:
-					frappe.db.sql(
-						"update `tabAccount` set report_type=%s where lft > %s and rgt < %s",
-						(self.report_type, self.lft, self.rgt),
-					)
+					query = query.set(Account.report_type, self.report_type)
+					updated = True
 				if self.root_type != db_value.root_type:
-					frappe.db.sql(
-						"update `tabAccount` set root_type=%s where lft > %s and rgt < %s",
-						(self.root_type, self.lft, self.rgt),
-					)
+					query = query.set(Account.root_type, self.root_type)
+					updated = True
+
+				if updated:
+					query.run()
 
 		if self.root_type and not self.report_type:
 			self.report_type = (
@@ -448,11 +452,7 @@ class Account(NestedSet):
 		return frappe.db.get_value("GL Entry", {"account": self.name})
 
 	def check_if_child_exists(self):
-		return frappe.db.sql(
-			"""select name from `tabAccount` where parent_account = %s
-			and docstatus != 2""",
-			self.name,
-		)
+		return frappe.db.exists("Account", {"parent_account": self.name, "docstatus": ["!=", 2]})
 
 	def validate_mandatory(self):
 		if not self.root_type:
@@ -472,14 +472,24 @@ class Account(NestedSet):
 @frappe.whitelist()
 @frappe.validate_and_sanitize_search_inputs
 def get_parent_account(doctype: str, txt: str, searchfield: str, start: int, page_len: int, filters: dict):
-	return frappe.db.sql(
-		"""select name from tabAccount
-		where is_group = 1 and docstatus != 2 and company = {}
-		and {} like {} order by name limit {} offset {}""".format("%s", searchfield, "%s", "%s", "%s"),
-		(filters["company"], "%%%s%%" % txt, page_len, start),
-		as_list=1,
+	Account = frappe.qb.DocType("Account")
+
+	search_field_obj = getattr(Account, searchfield)
+
+	query = (
+		frappe.qb.from_(Account)
+		.select(Account.name)
+		.where(Account.is_group == 1)
+		.where(Account.docstatus != 2)
+		.where(Account.company == filters["company"])
+		.where(search_field_obj.like(f"%{txt}%"))
+		.order_by(Account.name)
+		.limit(page_len)
+		.offset(start)
 	)
 
+	return query.run(as_list=1)
+
 
 def get_account_currency(account):
 	"""Helper function to get account currency"""
@@ -520,6 +530,7 @@ def update_account_number(
 ):
 	_ensure_idle_system()
 	account = frappe.get_cached_doc("Account", name)
+	account.check_permission("write")
 	if not account:
 		return
 
@@ -581,10 +592,12 @@ def update_account_number(
 @frappe.whitelist()
 def merge_account(old: str, new: str):
 	_ensure_idle_system()
-	# Validate properties before merging
 	new_account = frappe.get_cached_doc("Account", new)
 	old_account = frappe.get_cached_doc("Account", old)
 
+	new_account.check_permission("write")
+	old_account.check_permission("write")
+
 	if not new_account:
 		throw(_("Account {0} does not exist").format(new))
 
@@ -673,6 +686,7 @@ def get_company_default_account_fields():
 		"default_expense_account": "Default Expense Account",
 		"default_income_account": "Default Income Account",
 		"stock_received_but_not_billed": "Stock Received But Not Billed Account",
+		"stock_delivered_but_not_billed": "Stock Delivered But Not Billed Account",
 		"stock_adjustment_account": "Stock Adjustment Account",
 		"write_off_account": "Write Off Account",
 		"default_discount_account": "Default Payment Discount Account",

erpnext/accounts/doctype/account/chart_of_accounts/verified/ca_plan_comptable_pour_les_provinces_francophones.json

@@ -378,6 +378,9 @@
                 "Passifs de stock": {
                     "Stock re\u00e7u non factur\u00e9": {
                         "account_type": "Stock Received But Not Billed"
+                    },
+                    "Stock livr\u00e9 non factur\u00e9": {
+                        "account_type": "Stock Delivered But Not Billed"
                     }
                 }, 
                 "Provision pour vacances et cong\u00e9s": {}, 

erpnext/accounts/doctype/account/chart_of_accounts/verified/de_kontenplan_SKR03.json

@@ -221,6 +221,10 @@
 						"account_number": "1702",
 						"account_type": "Stock Received But Not Billed"
 					},
+					"Warenausgangs-Verrechnungskonto": {
+						"account_number": "1703",
+						"account_type": "Stock Delivered But Not Billed"
+					},
 					"Verbindlichkeiten aus Lohn und Gehalt": {
 						"account_number": "1740",
 						"account_type": "Payable"

erpnext/accounts/doctype/account/chart_of_accounts/verified/de_kontenplan_SKR04.json

@@ -1144,6 +1144,10 @@
                         "Wareneingangs-­Verrechnungskonto" : {
                             "account_number": "70001",
                             "account_type": "Stock Received But Not Billed"
+                        },
+                        "Warenausgangs-Verrechnungskonto" : {
+                            "account_number": "70002",
+                            "account_type": "Stock Delivered But Not Billed"
                         }
                     },
                     "Verb. aus Lieferungen und Leistungen": {

erpnext/accounts/doctype/account/chart_of_accounts/verified/fr_plan2025_comptable_general_avec_code.json

@@ -1076,6 +1076,9 @@
                    		"account_type": "Stock Received But Not Billed",
 						"account_number": "4088"
 					}
+				},
+				"Stock livr\u00e9 non factur\u00e9": {
+					"account_type": "Stock Delivered But Not Billed"
 				}
 			},
 			"41-Clients et comptes rattach\u00e9s (PASSIF)": {

erpnext/accounts/doctype/account/chart_of_accounts/verified/fr_plan2025_comptable_general_ex_agricole.json

@@ -1589,6 +1589,9 @@
                    		"account_type": "Stock Received But Not Billed",
 						"account_number": "4088"
 					}
+				},
+				"Stock livr\u00e9 non factur\u00e9": {
+					"account_type": "Stock Delivered But Not Billed"
 				}
 			},
 			"41-Clients et comptes rattach\u00e9s (PASSIF)": {

erpnext/accounts/doctype/account/chart_of_accounts/verified/fr_plan_comptable_associatif_avec_code.json

@@ -1592,6 +1592,9 @@
             "account_number": "4088"
           },
           "account_number": "408"
+        },
+        "Stock livr\u00e9 non factur\u00e9": {
+          "account_type": "Stock Delivered But Not Billed"
         }
       },
       "41-Clients et comptes rattach\u00e9s (PASSIF)": {

erpnext/accounts/doctype/account/chart_of_accounts/verified/fr_plan_comptable_general.json

@@ -805,6 +805,9 @@
                     },
                     "account_type": "Stock Received But Not Billed"
                 },
+                "Stock livr\u00e9 non factur\u00e9": {
+                    "account_type": "Stock Delivered But Not Billed"
+                },
                 "account_type": "Payable"
             },
             "41-Clients et comptes rattach\u00e9s (PASSIF)": {

erpnext/accounts/doctype/account/chart_of_accounts/verified/fr_plan_comptable_general_avec_code.json

@@ -1520,6 +1520,9 @@
                         "account_number": "4088"
                     },
                     "account_number": "408"
+                },
+                "Stock livr\u00e9 non factur\u00e9": {
+                    "account_type": "Stock Delivered But Not Billed"
                 }
             },
             "41-Clients et comptes rattach\u00e9s (PASSIF)": {

erpnext/accounts/doctype/account/chart_of_accounts/verified/in_standard_chart_of_accounts.json

@@ -223,6 +223,10 @@
                     "Stock Received But Not Billed": {
                         "account_type": "Stock Received But Not Billed",
                         "account_category": "Trade Payables"
+                    },
+                    "Stock Delivered But Not Billed": {
+                        "account_type": "Stock Delivered But Not Billed",
+                        "account_category": "Trade Payables"
                     }
                 },
                 "Duties and Taxes": {

erpnext/accounts/doctype/account/chart_of_accounts/verified/nz_standard_chart_of_accounts.json

@@ -0,0 +1,449 @@
+{
+	"country_code": "nz",
+	"name": "New Zealand - Chart of Accounts with Account Numbers",
+	"disabled": "No",
+	"tree": {
+		"Application of Funds (Assets)": {
+			"Current Assets": {
+				"Bank Accounts": {
+					"Business Transaction Account": {
+						"account_number": "11011",
+						"account_type": "Bank"
+					},
+					"Business Savings Account": {
+						"account_number": "11012",
+						"account_type": "Bank"
+					},
+					"account_number": "11010",
+					"is_group": 1
+				},
+				"Cash on Hand": {
+					"account_number": "11020",
+					"account_type": "Cash"
+				},
+				"Accounts Receivable": {
+					"Debtors": {
+						"account_number": "11210",
+						"account_type": "Receivable"
+					},
+					"Provision for Doubtful Debts": {
+						"account_number": "11220"
+					},
+					"account_number": "11200",
+					"is_group": 1
+				},
+				"Inventory": {
+					"Stock on Hand": {
+						"account_number": "11311",
+						"account_type": "Stock"
+					},
+					"Work In Progress": {
+						"account_number": "11312",
+						"account_type": "Stock"
+					},
+					"account_number": "11310",
+					"account_type": "Stock",
+					"is_group": 1
+				},
+				"Prepayments": {
+					"Prepayments": {
+						"account_number": "11411"
+					},
+					"Supplier Advances": {
+						"account_number": "11412"
+					},
+					"Deferred Expense": {
+						"account_number": "11413"
+					},
+					"account_number": "11410",
+					"is_group": 1
+				},
+				"GST Receivable": {
+					"account_number": "11510",
+					"account_type": "Tax"
+				},
+				"Income Tax Receivable": {
+					"account_number": "11520",
+					"account_type": "Tax"
+				},
+				"account_number": "11000",
+				"is_group": 1
+			},
+			"Fixed Assets": {
+				"Plant & Equipment": {
+					"Plant & Equipment": {
+						"account_number": "16011",
+						"account_type": "Fixed Asset"
+					},
+					"Accumulated Depreciation - Plant & Equipment": {
+						"account_number": "16012",
+						"account_type": "Accumulated Depreciation"
+					},
+					"account_number": "16010",
+					"is_group": 1
+				},
+				"Motor Vehicles": {
+					"Motor Vehicles": {
+						"account_number": "16021",
+						"account_type": "Fixed Asset"
+					},
+					"Accumulated Depreciation - Motor Vehicles": {
+						"account_number": "16022",
+						"account_type": "Accumulated Depreciation"
+					},
+					"account_number": "16020",
+					"is_group": 1
+				},
+				"Office Equipment": {
+					"Office Equipment": {
+						"account_number": "16031",
+						"account_type": "Fixed Asset"
+					},
+					"Accumulated Depreciation - Office Equipment": {
+						"account_number": "16032",
+						"account_type": "Accumulated Depreciation"
+					},
+					"account_number": "16030",
+					"is_group": 1
+				},
+				"Buildings": {
+					"Buildings": {
+						"account_number": "16041",
+						"account_type": "Fixed Asset"
+					},
+					"Accumulated Depreciation - Buildings": {
+						"account_number": "16042",
+						"account_type": "Accumulated Depreciation"
+					},
+					"account_number": "16040",
+					"is_group": 1
+				},
+				"Computer Equipment": {
+					"Computer Equipment": {
+						"account_number": "16051",
+						"account_type": "Fixed Asset"
+					},
+					"Accumulated Depreciation - Computer Equipment": {
+						"account_number": "16052",
+						"account_type": "Accumulated Depreciation"
+					},
+					"account_number": "16050",
+					"is_group": 1
+				},
+				"Capital Work in Progress": {
+					"account_number": "16090",
+					"account_type": "Capital Work in Progress"
+				},
+				"account_number": "16000",
+				"is_group": 1
+			},
+			"account_number": "10000",
+			"root_type": "Asset"
+		},
+		"Source of Funds (Liabilities)": {
+			"Current Liabilities": {
+				"Accounts Payable": {
+					"Creditors": {
+						"account_number": "21010",
+						"account_type": "Payable"
+					},
+					"account_number": "21000",
+					"is_group": 1
+				},
+				"Goods Received Not Invoiced": {
+					"account_number": "21100",
+					"account_type": "Stock Received But Not Billed"
+				},
+				"Asset Received Not Invoiced": {
+					"account_number": "21110",
+					"account_type": "Asset Received But Not Billed"
+				},
+				"Service Received Not Invoiced": {
+					"account_number": "21120",
+					"account_type": "Service Received But Not Billed"
+				},
+				"Accrued Expenses": {
+					"account_number": "21200"
+				},
+				"Wages Payable": {
+					"account_number": "21300"
+				},
+				"PAYE Payable": {
+					"account_number": "22010"
+				},
+				"KiwiSaver Payable": {
+					"account_number": "22020"
+				},
+				"ACC Payable": {
+					"account_number": "22030"
+				},
+				"Credit Cards": {
+					"Business Credit Card": {
+						"account_number": "22110"
+					},
+					"account_number": "22100",
+					"is_group": 1
+				},
+				"Customer Advances": {
+					"account_number": "22200"
+				},
+				"Deferred Revenue": {
+					"account_number": "22210"
+				},
+				"Provisional Account": {
+					"account_number": "22220"
+				},
+				"Tax Liabilities": {
+					"GST Payable": {
+						"account_number": "22310",
+						"account_type": "Tax"
+					},
+					"GST Suspense": {
+						"account_number": "22320",
+						"account_type": "Tax"
+					},
+					"FBT Payable": {
+						"account_number": "22330",
+						"account_type": "Tax"
+					},
+					"Income Tax Payable": {
+						"account_number": "22340",
+						"account_type": "Tax"
+					},
+					"account_number": "22300",
+					"is_group": 1
+				},
+				"account_number": "21500",
+				"is_group": 1
+			},
+			"Non-Current Liabilities": {
+				"Bank Loans": {
+					"Bank Loan": {
+						"account_number": "25011"
+					},
+					"account_number": "25010",
+					"is_group": 1
+				},
+				"Lease Liabilities": {
+					"Lease Liability": {
+						"account_number": "25021"
+					},
+					"account_number": "25020",
+					"is_group": 1
+				},
+				"Shareholder Loans": {
+					"Shareholder Loan": {
+						"account_number": "25031"
+					},
+					"account_number": "25030",
+					"is_group": 1
+				},
+				"account_number": "25000",
+				"is_group": 1
+			},
+			"account_number": "20000",
+			"root_type": "Liability"
+		},
+		"Equity": {
+			"Share Capital": {
+				"account_number": "31010",
+				"account_type": "Equity"
+			},
+			"Drawings": {
+				"account_number": "31020",
+				"account_type": "Equity"
+			},
+			"Current Year Earnings": {
+				"account_number": "35010",
+				"account_type": "Equity"
+			},
+			"Retained Earnings": {
+				"account_number": "35020",
+				"account_type": "Equity"
+			},
+			"account_number": "30000",
+			"root_type": "Equity"
+		},
+		"Income": {
+			"Sales": {
+				"account_number": "41010",
+				"account_type": "Income Account"
+			},
+			"Other Income": {
+				"Interest Income": {
+					"account_number": "47010",
+					"account_type": "Income Account"
+				},
+				"Rounding Gain/Loss": {
+					"account_number": "47020",
+					"account_type": "Income Account"
+				},
+				"Foreign Exchange Gain": {
+					"account_number": "47030",
+					"account_type": "Income Account"
+				},
+				"account_number": "47000",
+				"is_group": 1
+			},
+			"account_number": "40000",
+			"root_type": "Income"
+		},
+		"Expenses": {
+			"Cost of Goods Sold": {
+				"Purchases": {
+					"account_number": "51010",
+					"account_type": "Cost of Goods Sold"
+				},
+				"Freight Inwards": {
+					"account_number": "51020",
+					"account_type": "Expenses Included In Valuation"
+				},
+				"Duty and Landing Costs": {
+					"account_number": "51030",
+					"account_type": "Expenses Included In Valuation"
+				},
+				"Stock Adjustment": {
+					"account_number": "51040",
+					"account_type": "Stock Adjustment"
+				},
+				"Stock Write Off": {
+					"account_number": "51050",
+					"account_type": "Stock Adjustment"
+				},
+				"account_number": "51000",
+				"account_type": "Cost of Goods Sold",
+				"is_group": 1
+			},
+			"Operating Expenses": {
+				"Wages & Salaries": {
+					"account_number": "61010",
+					"account_type": "Expense Account"
+				},
+				"KiwiSaver Employer Contribution": {
+					"account_number": "61020",
+					"account_type": "Expense Account"
+				},
+				"ACC Levies": {
+					"account_number": "61030",
+					"account_type": "Expense Account"
+				},
+				"Rent": {
+					"account_number": "65010",
+					"account_type": "Expense Account"
+				},
+				"Power": {
+					"account_number": "65020",
+					"account_type": "Expense Account"
+				},
+				"Telephone": {
+					"account_number": "66010",
+					"account_type": "Expense Account"
+				},
+				"Insurance": {
+					"account_number": "64010",
+					"account_type": "Expense Account"
+				},
+				"Accounting Fees": {
+					"account_number": "64020",
+					"account_type": "Expense Account"
+				},
+				"Legal Fees": {
+					"account_number": "64030",
+					"account_type": "Expense Account"
+				},
+				"Advertising and Marketing": {
+					"account_number": "65030",
+					"account_type": "Expense Account"
+				},
+				"Repairs and Maintenance": {
+					"account_number": "65040",
+					"account_type": "Expense Account"
+				},
+				"Freight and Courier": {
+					"account_number": "65050",
+					"account_type": "Expense Account"
+				},
+				"Operating Costs": {
+					"account_number": "65060",
+					"account_type": "Expense Account"
+				},
+				"account_number": "60000",
+				"is_group": 1
+			},
+			"Depreciation and Amortisation": {
+				"Depreciation - Plant & Equipment": {
+					"account_number": "62010",
+					"account_type": "Depreciation"
+				},
+				"Depreciation - Motor Vehicles": {
+					"account_number": "62020",
+					"account_type": "Depreciation"
+				},
+				"Depreciation - Office Equipment": {
+					"account_number": "62030",
+					"account_type": "Depreciation"
+				},
+				"Depreciation - Computer Equipment": {
+					"account_number": "62040",
+					"account_type": "Depreciation"
+				},
+				"account_number": "62000",
+				"is_group": 1
+			},
+			"Finance Costs": {
+				"Bank Charges": {
+					"account_number": "67010",
+					"account_type": "Expense Account"
+				},
+				"Interest Expense": {
+					"account_number": "67020",
+					"account_type": "Expense Account"
+				},
+				"Rounding Off": {
+					"account_number": "67030",
+					"account_type": "Round Off"
+				},
+				"Payment Discounts": {
+					"account_number": "67040",
+					"account_type": "Expense Account"
+				},
+				"account_number": "67000",
+				"is_group": 1
+			},
+			"Income Tax Expense": {
+				"account_number": "81010",
+				"account_type": "Expense Account"
+			},
+			"Foreign Exchange": {
+				"Exchange Gain/Loss": {
+					"account_number": "82010",
+					"account_type": "Expense Account"
+				},
+				"Unrealized Exchange Gain/Loss": {
+					"account_number": "82020",
+					"account_type": "Expense Account"
+				},
+				"account_number": "82000",
+				"is_group": 1
+			},
+			"Bad Debts": {
+				"account_number": "83010",
+				"account_type": "Expense Account"
+			},
+			"Write Off": {
+				"account_number": "83020",
+				"account_type": "Expense Account"
+			},
+			"Gain/Loss on Asset Disposal": {
+				"account_number": "83030",
+				"account_type": "Expense Account"
+			},
+			"Expenses Included In Asset Valuation": {
+				"account_number": "84010",
+				"account_type": "Expenses Included In Asset Valuation"
+			},
+			"account_number": "50000",
+			"root_type": "Expense"
+		}
+	}
+}

erpnext/accounts/doctype/account/chart_of_accounts/verified/philippines.json

@@ -0,0 +1,851 @@
+{
+	"name": "Philippines",
+	"country": "Philippines",
+	"tree": {
+		"Asset": {
+			"account_number": "1000",
+			"is_group": 1,
+			"root_type": "Asset",
+			"Current Assets": {
+				"account_number": "1001",
+				"is_group": 1,
+				"root_type": "Asset",
+				"Cash": {
+					"account_number": "1100",
+					"is_group": 1,
+					"root_type": "Asset",
+					"account_type": "Cash",
+					"Cash on Hand": {
+						"account_number": "1101",
+						"is_group": 0,
+						"root_type": "Asset",
+						"account_type": "Cash"
+					},
+					"Petty Cash Fund": {
+						"account_number": "1200",
+						"is_group": 1,
+						"root_type": "Asset",
+						"account_type": "Cash",
+						"Petty Cash Fund": {
+							"account_number": "1201",
+							"is_group": 0,
+							"root_type": "Asset",
+							"account_type": "Cash"
+						}
+					}
+				},
+				"Bank Accounts": {
+					"account_number": "1102",
+					"is_group": 1,
+					"root_type": "Asset",
+					"account_type": "Bank"
+				},
+				"Advances to Officers & Employees": {
+					"account_number": "1290",
+					"is_group": 1,
+					"root_type": "Asset",
+					"Advances to Officers & Employees": {
+						"account_number": "1291",
+						"is_group": 0,
+						"root_type": "Asset"
+					}
+				},
+				"Accounts Receivable Trade": {
+					"account_number": "1300",
+					"is_group": 1,
+					"root_type": "Asset",
+					"Accounts Receivable - Trade": {
+						"account_number": "1301",
+						"is_group": 0,
+						"root_type": "Asset",
+						"account_type": "Receivable"
+					}
+				},
+				"Accounts Receivable - Affiliates": {
+					"account_number": "1310",
+					"is_group": 1,
+					"root_type": "Asset",
+					"Due from Company": {
+						"account_number": "1311",
+						"is_group": 0,
+						"root_type": "Asset"
+					}
+				},
+				"Accounts Receivable - Others": {
+					"account_number": "1400",
+					"is_group": 1,
+					"root_type": "Asset",
+					"Accounts Receivable - Others": {
+						"account_number": "1401",
+						"is_group": 0,
+						"root_type": "Asset"
+					}
+				},
+				"Parts, Materials and Supplies": {
+					"account_number": "1500",
+					"is_group": 1,
+					"root_type": "Asset",
+					"Parts, Materials and Supplies": {
+						"account_number": "1501",
+						"is_group": 0,
+						"root_type": "Asset"
+					},
+					"Raw Materials - Demo": {
+						"account_number": "1502",
+						"is_group": 0,
+						"root_type": "Asset"
+					}
+				},
+				"Project in Progress": {
+					"account_number": "1510",
+					"is_group": 1,
+					"root_type": "Asset",
+					"Project in Progress": {
+						"account_number": "1511",
+						"is_group": 0,
+						"root_type": "Asset"
+					},
+					"Factory Overhead Variance": {
+						"account_number": "1512",
+						"is_group": 0,
+						"root_type": "Asset"
+					}
+				},
+				"Finished Goods": {
+					"account_number": "1520",
+					"is_group": 1,
+					"root_type": "Asset",
+					"Finished Goods Inventory": {
+						"account_number": "1531",
+						"is_group": 0,
+						"root_type": "Asset",
+						"account_type": "Stock"
+					},
+					"Inventory in Transit": {
+						"account_number": "1532",
+						"is_group": 0,
+						"root_type": "Asset",
+						"account_type": "Stock Adjustment"
+					}
+				},
+				"Prepayments": {
+					"account_number": "1600",
+					"is_group": 1,
+					"root_type": "Asset",
+					"Prepaid Insurance & Bonds": {
+						"account_number": "1601",
+						"is_group": 0,
+						"root_type": "Asset"
+					},
+					"Prepaid Rent": {
+						"account_number": "1602",
+						"is_group": 0,
+						"root_type": "Asset"
+					}
+				},
+				"VAT Input Tax": {
+					"account_number": "1610",
+					"is_group": 1,
+					"root_type": "Asset",
+					"VAT Input Tax - Goods": {
+						"account_number": "1611",
+						"is_group": 0,
+						"root_type": "Asset",
+						"account_type": "Tax"
+					}
+				}
+			},
+			"Non - Current Assets": {
+				"account_number": "1002",
+				"is_group": 1,
+				"root_type": "Asset",
+				"Property, Plants And Equipments": {
+					"account_number": "1700",
+					"is_group": 1,
+					"root_type": "Asset",
+					"Land": {
+						"account_number": "1701",
+						"is_group": 0,
+						"root_type": "Asset",
+						"account_type": "Fixed Asset"
+					},
+					"Buildings & Improvements": {
+						"account_number": "1702",
+						"is_group": 0,
+						"root_type": "Asset",
+						"account_type": "Fixed Asset"
+					},
+					"Delivery & Trans Equipment": {
+						"account_number": "1703",
+						"is_group": 0,
+						"root_type": "Asset",
+						"account_type": "Fixed Asset"
+					},
+					"Furniture & Fixtures": {
+						"account_number": "1704",
+						"is_group": 0,
+						"root_type": "Asset",
+						"account_type": "Fixed Asset"
+					},
+					"Machinery & Equipment": {
+						"account_number": "1705",
+						"is_group": 0,
+						"root_type": "Asset",
+						"account_type": "Fixed Asset"
+					}
+				},
+				"Accum Depr. - Property, Plants and Equipment": {
+					"account_number": "1800",
+					"is_group": 1,
+					"root_type": "Asset",
+					"Accumulated Dep Bdgs & Improv": {
+						"account_number": "1801",
+						"is_group": 0,
+						"root_type": "Asset",
+						"account_type": "Accumulated Depreciation"
+					},
+					"Accumulated Dep Delivery & Trans": {
+						"account_number": "1802",
+						"is_group": 0,
+						"root_type": "Asset",
+						"account_type": "Accumulated Depreciation"
+					},
+					"Accumulated Dep Furniture & Fixture": {
+						"account_number": "1803",
+						"is_group": 0,
+						"root_type": "Asset",
+						"account_type": "Accumulated Depreciation"
+					},
+					"Accumulated Depreciation - Machinery & Equipment": {
+						"account_number": "1804",
+						"is_group": 0,
+						"root_type": "Asset",
+						"account_type": "Accumulated Depreciation"
+					}
+				}
+			},
+			"Other Assets": {
+				"account_number": "1003",
+				"is_group": 1,
+				"root_type": "Asset",
+				"Advances To Supplier": {
+					"account_number": "1900",
+					"is_group": 1,
+					"root_type": "Asset",
+					"Advances To Supplier": {
+						"account_number": "1901",
+						"is_group": 0,
+						"root_type": "Asset"
+					}
+				},
+				"Miscellaneous Deposits": {
+					"account_number": "1910",
+					"is_group": 1,
+					"root_type": "Asset",
+					"Miscellaneous Deposits": {
+						"account_number": "1911",
+						"is_group": 0,
+						"root_type": "Asset"
+					}
+				},
+				"Retirement Fund": {
+					"account_number": "1920",
+					"is_group": 1,
+					"root_type": "Asset",
+					"Retirement Fund": {
+						"account_number": "1921",
+						"is_group": 0,
+						"root_type": "Asset"
+					}
+				},
+				"Investment": {
+					"account_number": "1930",
+					"is_group": 1,
+					"root_type": "Asset",
+					"Investment": {
+						"account_number": "1931",
+						"is_group": 0,
+						"root_type": "Asset"
+					}
+				},
+				"System Development": {
+					"account_number": "1940",
+					"is_group": 1,
+					"root_type": "Asset",
+					"System Development": {
+						"account_number": "1941",
+						"is_group": 0,
+						"root_type": "Asset"
+					}
+				}
+			}
+		},
+		"Liability": {
+			"account_number": "2000",
+			"is_group": 1,
+			"root_type": "Liability",
+			"Current Liabilities": {
+				"account_number": "2001",
+				"is_group": 1,
+				"root_type": "Liability",
+				"Accounts Payable Trade": {
+					"account_number": "2100",
+					"is_group": 1,
+					"root_type": "Liability",
+					"Accounts Payable - Trade": {
+						"account_number": "2101",
+						"is_group": 0,
+						"root_type": "Liability",
+						"account_type": "Payable"
+					}
+				},
+				"Accounts Payable Others": {
+					"account_number": "2110",
+					"is_group": 1,
+					"root_type": "Liability",
+					"Accounts Payable - Payroll": {
+						"account_number": "2111",
+						"is_group": 0,
+						"root_type": "Liability"
+					}
+				},
+				"VAT Output Tax": {
+					"account_number": "2200",
+					"is_group": 1,
+					"root_type": "Liability",
+					"VAT Output Tax": {
+						"account_number": "2201",
+						"is_group": 0,
+						"root_type": "Liability",
+						"account_type": "Tax"
+					}
+				},
+				"Withholding Taxes Payable Wages": {
+					"account_number": "2210",
+					"is_group": 1,
+					"root_type": "Liability",
+					"Withholding Taxes Payable Wages": {
+						"account_number": "2211",
+						"is_group": 0,
+						"root_type": "Liability",
+						"account_type": "Tax"
+					}
+				},
+				"Withholding Taxes Payable Expanded": {
+					"account_number": "2220",
+					"is_group": 1,
+					"root_type": "Liability",
+					"Withholding Taxes Payable Expanded": {
+						"account_number": "2221",
+						"is_group": 0,
+						"root_type": "Liability",
+						"account_type": "Tax"
+					}
+				},
+				"Accruals And Other Current Payables": {
+					"account_number": "2300",
+					"is_group": 1,
+					"root_type": "Liability",
+					"Stock Received But Not Billed": {
+						"account_number": "2301",
+						"is_group": 0,
+						"root_type": "Liability",
+						"account_type": "Stock Received But Not Billed"
+					}
+				},
+				"Payable to Government and Other Institutions": {
+					"account_number": "2400",
+					"is_group": 1,
+					"root_type": "Liability",
+					"SSS Premium Payable": {
+						"account_number": "2401",
+						"is_group": 0,
+						"root_type": "Liability"
+					},
+					"SSS Salary Loan Payable": {
+						"account_number": "2402",
+						"is_group": 0,
+						"root_type": "Liability"
+					},
+					"PhilHealth Premium": {
+						"account_number": "2403",
+						"is_group": 0,
+						"root_type": "Liability"
+					},
+					"Pag-ibig Loan Payable": {
+						"account_number": "2404",
+						"is_group": 0,
+						"root_type": "Liability"
+					},
+					"Coop Loans": {
+						"account_number": "2405",
+						"is_group": 0,
+						"root_type": "Liability"
+					},
+					"Coop Contributions": {
+						"account_number": "2406",
+						"is_group": 0,
+						"root_type": "Liability"
+					},
+					"Canteen": {
+						"account_number": "2407",
+						"is_group": 0,
+						"root_type": "Liability"
+					},
+					"AUB Loan Payable": {
+						"account_number": "2408",
+						"is_group": 0,
+						"root_type": "Liability"
+					},
+					"HSBC Loan Payable": {
+						"account_number": "2409",
+						"is_group": 0,
+						"root_type": "Liability"
+					}
+				},
+				"Customer Deposits": {
+					"account_number": "2500",
+					"is_group": 0,
+					"root_type": "Liability",
+					"account_type": "Payable"
+				}
+			},
+			"Non Current Liabilities": {
+				"account_number": "2002",
+				"is_group": 1,
+				"root_type": "Liability",
+				"Due To Associated Company": {
+					"account_number": "2600",
+					"is_group": 1,
+					"root_type": "Liability",
+					"Due To Associated Company": {
+						"account_number": "2601",
+						"is_group": 0,
+						"root_type": "Liability"
+					}
+				},
+				"Deferred Income": {
+					"account_number": "2700",
+					"is_group": 1,
+					"root_type": "Liability",
+					"Deferred Income": {
+						"account_number": "2701",
+						"is_group": 0,
+						"root_type": "Liability"
+					}
+				},
+				"Notes Payable": {
+					"account_number": "2800",
+					"is_group": 1,
+					"root_type": "Liability",
+					"Notes Payable": {
+						"account_number": "2801",
+						"is_group": 0,
+						"root_type": "Liability"
+					}
+				},
+				"Dividends Payable": {
+					"account_number": "2900",
+					"is_group": 0,
+					"root_type": "Liability"
+				}
+			}
+		},
+		"Equity": {
+			"account_number": "3000",
+			"is_group": 1,
+			"root_type": "Equity",
+			"STOCKHOLDER'S EQUITY": {
+				"account_number": "3001",
+				"is_group": 1,
+				"root_type": "Equity",
+				"Capital Stocks": {
+					"account_number": "3100",
+					"is_group": 1,
+					"root_type": "Equity",
+					"Capital Stocks": {
+						"account_number": "3101",
+						"is_group": 0,
+						"root_type": "Equity"
+					}
+				},
+				"Subscription Receivable": {
+					"account_number": "3200",
+					"is_group": 1,
+					"root_type": "Equity",
+					"Subscription Receivable": {
+						"account_number": "3201",
+						"is_group": 0,
+						"root_type": "Equity"
+					}
+				},
+				"Retained Earnings": {
+					"account_number": "3300",
+					"is_group": 1,
+					"root_type": "Equity",
+					"Retained Earnings": {
+						"account_number": "3301",
+						"is_group": 0,
+						"root_type": "Equity"
+					}
+				},
+				"Current Year (Profit/Loss)": {
+					"account_number": "3400",
+					"is_group": 0,
+					"root_type": "Equity"
+				},
+				"Drawings": {
+					"account_number": "3500",
+					"is_group": 1,
+					"root_type": "Equity",
+					"Drawings": {
+						"account_number": "3501",
+						"is_group": 0,
+						"root_type": "Equity"
+					}
+				}
+			}
+		},
+		"Income": {
+			"account_number": "4000",
+			"is_group": 1,
+			"root_type": "Income",
+			"Gross Sales": {
+				"account_number": "4100",
+				"is_group": 1,
+				"root_type": "Income",
+				"Sales": {
+					"account_number": "4101",
+					"is_group": 0,
+					"root_type": "Income"
+				}
+			},
+			"Sales Adjustment": {
+				"account_number": "4200",
+				"is_group": 1,
+				"root_type": "Income",
+				"Sales Return And Allowance": {
+					"account_number": "4201",
+					"is_group": 0,
+					"root_type": "Income"
+				}
+			},
+			"Sales Discount": {
+				"account_number": "4300",
+				"is_group": 1,
+				"root_type": "Income",
+				"Sales Discount": {
+					"account_number": "4301",
+					"is_group": 0,
+					"root_type": "Income"
+				}
+			},
+			"Other Income": {
+				"account_number": "6000",
+				"is_group": 1,
+				"root_type": "Income",
+				"Interest Income Bank": {
+					"account_number": "6010",
+					"is_group": 1,
+					"root_type": "Income",
+					"Interest Income Bank": {
+						"account_number": "6011",
+						"is_group": 0,
+						"root_type": "Income"
+					}
+				},
+				"Dividend Income": {
+					"account_number": "6020",
+					"is_group": 1,
+					"root_type": "Income",
+					"Dividend Income": {
+						"account_number": "6021",
+						"is_group": 0,
+						"root_type": "Income"
+					}
+				}
+			}
+		},
+		"Expense": {
+			"account_number": "5000",
+			"is_group": 1,
+			"root_type": "Expense",
+			"Cost of Goods Sold": {
+				"account_number": "5001",
+				"is_group": 1,
+				"root_type": "Expense",
+				"Cost of Goods Sold": {
+					"account_number": "5010",
+					"is_group": 0,
+					"root_type": "Expense",
+					"account_type": "Cost of Goods Sold"
+				}
+			},
+			"Operating Expenses": {
+				"account_number": "5100",
+				"is_group": 1,
+				"root_type": "Expense",
+				"Salaries, Wages": {
+					"account_number": "5101",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"13th Month Pay & Bonus": {
+					"account_number": "5102",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Overtime & Night Diff": {
+					"account_number": "5103",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Incentive/Performance Bonus": {
+					"account_number": "5104",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Employees Benefits": {
+					"account_number": "5105",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Advertising & Promotions": {
+					"account_number": "5106",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Amortization of Leasehold Improvement": {
+					"account_number": "5107",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Amortization of Pre-Operating": {
+					"account_number": "5108",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Amortization of System Development": {
+					"account_number": "5109",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Audit & Legal Fee": {
+					"account_number": "5110",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Bad Debts Expenses": {
+					"account_number": "5111",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Client Service & Maintenance": {
+					"account_number": "5112",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Commission Expenses": {
+					"account_number": "5113",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Communications": {
+					"account_number": "5114",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Contractual Services": {
+					"account_number": "5115",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Depreciation Expenses": {
+					"account_number": "5116",
+					"is_group": 0,
+					"root_type": "Expense",
+					"account_type": "Depreciation"
+				},
+				"Donation & Contribution": {
+					"account_number": "5117",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Dues & Subscription": {
+					"account_number": "5118",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Employee Med/Dental/Hosp Expenses": {
+					"account_number": "5119",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Employee Uniforms": {
+					"account_number": "5120",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Equipage": {
+					"account_number": "5121",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Expenses for Reclassification": {
+					"account_number": "5122",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Gas & Oil": {
+					"account_number": "5123",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Insurance Expenses": {
+					"account_number": "5124",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Light & Water": {
+					"account_number": "5125",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Local/Overseas Travel": {
+					"account_number": "5126",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Meals & Transportation Expenses": {
+					"account_number": "5127",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Meeting & Conferences": {
+					"account_number": "5128",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Miscellaneous Expenses": {
+					"account_number": "5129",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Mockup Expenses": {
+					"account_number": "5130",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Obsolescence Expenses": {
+					"account_number": "5131",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Other Support Cost": {
+					"account_number": "5132",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Pag-ibig Contribution": {
+					"account_number": "5133",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Performance Bonds": {
+					"account_number": "5134",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Pre Employment Expenses": {
+					"account_number": "5135",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Professional Fees": {
+					"account_number": "5136",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Recruitment & Employment": {
+					"account_number": "5137",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Rent Expenses": {
+					"account_number": "5138",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Rent Expenses Others": {
+					"account_number": "5139",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Repairs & Maintenance": {
+					"account_number": "5140",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Representation Expenses": {
+					"account_number": "5141",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Research & Development": {
+					"account_number": "5142",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Security Expenses": {
+					"account_number": "5143",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Shared Services Fee": {
+					"account_number": "5144",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"SSS/Medicare/EC Contributions": {
+					"account_number": "5145",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Stationery & Supplies": {
+					"account_number": "5146",
+					"is_group": 0,
+					"root_type": "Expense"
+				},
+				"Taxes & Licenses": {
+					"account_number": "5147",
+					"is_group": 0,
+					"root_type": "Expense",
+					"account_type": "Tax"
+				},
+				"Training & Seminar": {
+					"account_number": "5148",
+					"is_group": 0,
+					"root_type": "Expense"
+				}
+			},
+			"Stock Adjustment": {
+				"account_number": "5200",
+				"is_group": 0,
+				"root_type": "Expense",
+				"account_type": "Stock Adjustment"
+			},
+			"Round Off": {
+				"account_number": "5300",
+				"is_group": 0,
+				"root_type": "Expense",
+				"account_type": "Round Off"
+			},
+			"Expenses Included In Valuation": {
+				"account_number": "5400",
+				"is_group": 0,
+				"root_type": "Expense",
+				"account_type": "Expenses Included In Valuation"
+			}
+		}
+	}
+}

erpnext/accounts/doctype/account/chart_of_accounts/verified/standard_chart_of_accounts.py

@@ -35,6 +35,10 @@ def get():
 				_("Short-term Investments"): {"account_category": "Short-term Investments"},
 				_("Stock Assets"): {
 					_("Stock In Hand"): {"account_type": "Stock", "account_category": "Stock Assets"},
+					_("Stock Delivered But Not Billed"): {
+						"account_type": "Stock Delivered But Not Billed",
+						"account_category": "Stock Assets",
+					},
 					"account_type": "Stock",
 					"account_category": "Stock Assets",
 				},

erpnext/accounts/doctype/account/chart_of_accounts/verified/standard_chart_of_accounts_with_account_number.py

@@ -62,6 +62,11 @@ def get():
 						"account_number": "1410",
 						"account_category": "Stock Assets",
 					},
+					_("Stock Delivered But Not Billed"): {
+						"account_type": "Stock Delivered But Not Billed",
+						"account_number": "1420",
+						"account_category": "Stock Assets",
+					},
 					"account_type": "Stock",
 					"account_number": "1400",
 					"account_category": "Stock Assets",

erpnext/accounts/doctype/accounting_dimension/accounting_dimension.py

@@ -43,6 +43,7 @@ class AccountingDimension(Document):
 	def validate(self):
 		self.validate_doctype()
 		validate_column_name(self.fieldname)
+		self.validate_fieldname_conflict()
 		self.validate_dimension_defaults()
 
 	def validate_doctype(self):
@@ -74,6 +75,27 @@ class AccountingDimension(Document):
 			message += _("Please create a new Accounting Dimension if required.")
 			frappe.throw(message)
 
+	def validate_fieldname_conflict(self):
+		conflicting_doctypes = []
+		for doctype in get_doctypes_with_dimensions():
+			meta = frappe.get_meta(doctype, cached=False)
+			if any(f.fieldname == self.fieldname for f in meta.get("fields")):
+				conflicting_doctypes.append(doctype)
+
+		if conflicting_doctypes:
+			frappe.msgprint(
+				_(
+					"Fieldname {0} already exists in the following doctypes: {1}. "
+					"A separate dimension field will not be added to these doctypes. "
+					"GL Entries will use the value of the existing field as the dimension value."
+				).format(
+					frappe.bold(self.fieldname),
+					", ".join(frappe.bold(d) for d in conflicting_doctypes),
+				),
+				title=_("Fieldname Conflict"),
+				indicator="orange",
+			)
+
 	def validate_dimension_defaults(self):
 		companies = []
 		for default in self.get("dimension_defaults"):
@@ -176,21 +198,9 @@ def add_dimension_to_budget_doctype(df, doc):
 def delete_accounting_dimension(doc):
 	doclist = get_doctypes_with_dimensions()
 
-	frappe.db.sql(
-		"""
-		DELETE FROM `tabCustom Field`
-		WHERE fieldname = {}
-		AND dt IN ({})""".format("%s", ", ".join(["%s"] * len(doclist))),  # nosec
-		tuple([doc.fieldname, *doclist]),
-	)
+	frappe.db.delete("Custom Field", filters={"fieldname": doc.fieldname, "dt": ["in", doclist]})
 
-	frappe.db.sql(
-		"""
-		DELETE FROM `tabProperty Setter`
-		WHERE field_name = {}
-		AND doc_type IN ({})""".format("%s", ", ".join(["%s"] * len(doclist))),  # nosec
-		tuple([doc.fieldname, *doclist]),
-	)
+	frappe.db.delete("Property Setter", filters={"field_name": doc.fieldname, "doc_type": ["in", doclist]})
 
 	budget_against_property = frappe.get_doc("Property Setter", "Budget-budget_against-options")
 	value_list = budget_against_property.value.split("\n")[3:]
@@ -251,13 +261,27 @@ def get_accounting_dimensions(as_list=True):
 
 
 def get_checks_for_pl_and_bs_accounts():
-	return frappe.db.sql(
-		"""SELECT p.label, p.disabled, p.fieldname, c.default_dimension, c.company, c.mandatory_for_pl, c.mandatory_for_bs
-			FROM `tabAccounting Dimension`p ,`tabAccounting Dimension Detail` c
-			WHERE p.name = c.parent AND p.disabled = 0""",
-		as_dict=1,
+	AccountingDimension = frappe.qb.DocType("Accounting Dimension")
+	AccountingDimensionDetail = frappe.qb.DocType("Accounting Dimension Detail")
+
+	query = (
+		frappe.qb.from_(AccountingDimension)
+		.join(AccountingDimensionDetail)
+		.on(AccountingDimension.name == AccountingDimensionDetail.parent)
+		.select(
+			AccountingDimension.label,
+			AccountingDimension.disabled,
+			AccountingDimension.fieldname,
+			AccountingDimensionDetail.default_dimension,
+			AccountingDimensionDetail.company,
+			AccountingDimensionDetail.mandatory_for_pl,
+			AccountingDimensionDetail.mandatory_for_bs,
+		)
+		.where(AccountingDimension.disabled == 0)
 	)
 
+	return query.run(as_dict=1)
+
 
 def get_dimension_with_children(doctype, dimensions):
 	if isinstance(dimensions, str):

erpnext/accounts/doctype/accounting_dimension_filter/accounting_dimension_filter.py

@@ -43,18 +43,19 @@ class AccountingDimensionFilter(Document):
 		self.validate_applicable_accounts()
 
 	def validate_applicable_accounts(self):
-		accounts = frappe.db.sql(
-			"""
-				SELECT a.applicable_on_account as account
-				FROM `tabApplicable On Account` a, `tabAccounting Dimension Filter` d
-				WHERE d.name = a.parent
-				and d.name != %s
-				and d.accounting_dimension = %s
-			""",
-			(self.name, self.accounting_dimension),
-			as_dict=1,
+		ApplicableOnAccount = frappe.qb.DocType("Applicable On Account")
+		AccountingDimensionFilter = frappe.qb.DocType("Accounting Dimension Filter")
+
+		query = (
+			frappe.qb.from_(ApplicableOnAccount)
+			.join(AccountingDimensionFilter)
+			.on(AccountingDimensionFilter.name == ApplicableOnAccount.parent)
+			.select(ApplicableOnAccount.applicable_on_account.as_("account"))
+			.where(AccountingDimensionFilter.name != self.name)
+			.where(AccountingDimensionFilter.accounting_dimension == self.accounting_dimension)
 		)
 
+		accounts = query.run(as_dict=1)
 		account_list = [d.account for d in accounts]
 
 		for account in self.get("accounts"):
@@ -69,22 +70,28 @@ class AccountingDimensionFilter(Document):
 
 
 def get_dimension_filter_map():
-	filters = frappe.db.sql(
-		"""
-		SELECT
-			a.applicable_on_account, d.dimension_value, p.accounting_dimension,
-			p.allow_or_restrict, p.fieldname, a.is_mandatory
-		FROM
-			`tabApplicable On Account` a,
-			`tabAccounting Dimension Filter` p
-		LEFT JOIN `tabAllowed Dimension` d ON d.parent = p.name
-		WHERE
-			p.name = a.parent
-			AND p.disabled = 0
-	""",
-		as_dict=1,
+	ApplicableOnAccount = frappe.qb.DocType("Applicable On Account")
+	AccountingDimensionFilter = frappe.qb.DocType("Accounting Dimension Filter")
+	AllowedDimension = frappe.qb.DocType("Allowed Dimension")
+
+	query = (
+		frappe.qb.from_(AccountingDimensionFilter)
+		.join(ApplicableOnAccount)
+		.on(AccountingDimensionFilter.name == ApplicableOnAccount.parent)
+		.left_join(AllowedDimension)
+		.on(AllowedDimension.parent == AccountingDimensionFilter.name)
+		.select(
+			ApplicableOnAccount.applicable_on_account,
+			AllowedDimension.dimension_value,
+			AccountingDimensionFilter.accounting_dimension,
+			AccountingDimensionFilter.allow_or_restrict,
+			AccountingDimensionFilter.fieldname,
+			ApplicableOnAccount.is_mandatory,
+		)
+		.where(AccountingDimensionFilter.disabled == 0)
 	)
 
+	filters = query.run(as_dict=1)
 	dimension_filter_map = {}
 
 	for f in filters:

erpnext/accounts/doctype/accounting_period/accounting_period.py

@@ -46,23 +46,19 @@ class AccountingPeriod(Document):
 		self.name = " - ".join([self.period_name, company_abbr])
 
 	def validate_overlap(self):
-		existing_accounting_period = frappe.db.sql(
-			"""select name from `tabAccounting Period`
-			where (
-				(%(start_date)s between start_date and end_date)
-				or (%(end_date)s between start_date and end_date)
-				or (start_date between %(start_date)s and %(end_date)s)
-				or (end_date between %(start_date)s and %(end_date)s)
-			) and name!=%(name)s and company=%(company)s""",
-			{
-				"start_date": self.start_date,
-				"end_date": self.end_date,
-				"name": self.name,
-				"company": self.company,
-			},
-			as_dict=True,
+		AccountingPeriod = frappe.qb.DocType("Accounting Period")
+
+		query = (
+			frappe.qb.from_(AccountingPeriod)
+			.select(AccountingPeriod.name)
+			.where(AccountingPeriod.start_date <= self.end_date)
+			.where(AccountingPeriod.end_date >= self.start_date)
+			.where(AccountingPeriod.name != self.name)
+			.where(AccountingPeriod.company == self.company)
 		)
 
+		existing_accounting_period = query.run(as_dict=True)
+
 		if len(existing_accounting_period) > 0:
 			frappe.throw(
 				_("Accounting Period overlaps with {0}").format(existing_accounting_period[0].get("name")),

erpnext/accounts/doctype/accounts_settings/accounts_settings.js

@@ -10,6 +10,9 @@ frappe.ui.form.on("Accounts Settings", {
 				},
 			};
 		});
+		if (!frm.naming_controller) frm.naming_controller = new erpnext.NamingSeriesController(frm);
+
+		frm.naming_controller.render_table("transaction_naming_html", get_transactions(frm));
 	},
 	enable_immutable_ledger: function (frm) {
 		if (!frm.doc.enable_immutable_ledger) {
@@ -38,16 +41,6 @@ frappe.ui.form.on("Accounts Settings", {
 	add_taxes_from_item_tax_template(frm) {
 		toggle_tax_settings(frm, "add_taxes_from_item_tax_template");
 	},
-
-	drop_ar_procedures: function (frm) {
-		frm.call({
-			doc: frm.doc,
-			method: "drop_ar_sql_procedures",
-			callback: function (r) {
-				frappe.show_alert(__("Procedures dropped"), 5);
-			},
-		});
-	},
 });
 
 function toggle_tax_settings(frm, field_name) {
@@ -59,3 +52,16 @@ function toggle_tax_settings(frm, field_name) {
 		frm.set_value(other_field, 0);
 	}
 }
+
+function get_transactions(frm) {
+	const transactions = [
+		{ label: __("Journal Entry"), doctype: "Journal Entry" },
+		{ label: __("Payment Entry"), doctype: "Payment Entry" },
+		{ label: __("Purchase Invoice"), doctype: "Purchase Invoice" },
+		{ label: __("Purchase Order"), doctype: "Purchase Order" },
+		{ label: __("Purchase Receipt"), doctype: "Purchase Receipt" },
+		{ label: __("Sales Invoice"), doctype: "Sales Invoice" },
+	];
+
+	return transactions;
+}

erpnext/accounts/doctype/accounts_settings/accounts_settings.json

@@ -23,9 +23,9 @@
   "confirm_before_resetting_posting_date",
   "preview_mode",
   "analytics_section",
+  "enable_discounts_and_margin",
   "enable_accounting_dimensions",
   "column_break_vtnr",
-  "enable_discounts_and_margin",
   "journals_section",
   "merge_similar_account_heads",
   "deferred_accounting_settings_section",
@@ -44,7 +44,6 @@
   "print_settings",
   "show_inclusive_tax_in_print",
   "show_taxes_as_table_in_print",
-  "column_break_12",
   "show_payment_schedule_in_print",
   "item_price_settings_section",
   "maintain_same_internal_transaction_rate",
@@ -60,29 +59,30 @@
   "payments_tab",
   "section_break_jpd0",
   "auto_reconcile_payments",
+  "exchange_gain_loss_posting_date",
   "auto_reconciliation_job_trigger",
   "reconciliation_queue_size",
   "column_break_resa",
-  "exchange_gain_loss_posting_date",
   "repost_section",
+  "column_break_mfor",
   "repost_allowed_types",
   "payment_options_section",
+  "fetch_payment_schedule_in_payment_request",
   "enable_loyalty_point_program",
   "column_break_ctam",
-  "fetch_payment_schedule_in_payment_request",
   "invoicing_settings_tab",
   "accounts_transactions_settings_section",
-  "over_billing_allowance",
-  "column_break_11",
-  "role_allowed_to_over_bill",
-  "credit_controller",
   "make_payment_via_journal_entry",
+  "over_billing_allowance",
+  "credit_controller",
+  "role_allowed_to_over_bill",
+  "column_break_11",
   "assets_tab",
   "asset_settings_section",
-  "calculate_depr_using_total_days",
-  "column_break_gjcc",
   "book_asset_depreciation_entry_automatically",
+  "calculate_depr_using_total_days",
   "role_to_notify_on_depreciation_failure",
+  "column_break_gjcc",
   "closing_settings_tab",
   "period_closing_settings_section",
   "ignore_account_closing_balance",
@@ -91,13 +91,12 @@
   "reports_tab",
   "remarks_section",
   "general_ledger_remarks_length",
-  "column_break_lvjk",
   "receivable_payable_remarks_length",
+  "column_break_lvjk",
   "accounts_receivable_payable_tuning_section",
   "receivable_payable_fetch_method",
   "default_ageing_range",
   "column_break_ntmi",
-  "drop_ar_procedures",
   "legacy_section",
   "ignore_is_opening_check_for_reporting",
   "tab_break_dpet",
@@ -105,13 +104,15 @@
   "show_balance_in_coa",
   "banking_section",
   "enable_party_matching",
+  "automatically_run_rules_on_unreconciled_transactions",
   "enable_fuzzy_matching",
   "transfer_match_days",
-  "automatically_run_rules_on_unreconciled_transactions",
   "payment_request_section",
   "create_pr_in_draft_status",
   "budget_section",
-  "use_legacy_budget_controller"
+  "use_legacy_budget_controller",
+  "document_naming_tab",
+  "transaction_naming_html"
  ],
  "fields": [
   {
@@ -119,14 +120,14 @@
    "description": "Address used to determine Tax Category in transactions",
    "fieldname": "determine_address_tax_category_from",
    "fieldtype": "Select",
-   "label": "Determine Address Tax Category From",
+   "label": "Determine Address Tax Category from",
    "options": "Billing Address\nShipping Address"
   },
   {
    "fieldname": "credit_controller",
    "fieldtype": "Link",
    "in_list_view": 1,
-   "label": "Role allowed to bypass Credit Limit",
+   "label": "Role allowed to bypass credit limit",
    "options": "Role"
   },
   {
@@ -134,7 +135,7 @@
    "description": "Enabling this ensures each Purchase Invoice has a unique value in Supplier Invoice No. field within a particular fiscal year",
    "fieldname": "check_supplier_invoice_uniqueness",
    "fieldtype": "Check",
-   "label": "Check Supplier Invoice Number Uniqueness"
+   "label": "Check Supplier invoice number uniqueness"
   },
   {
    "default": "0",
@@ -145,27 +146,29 @@
   },
   {
    "default": "1",
+   "documentation_url": "https://docs.frappe.io/erpnext/accounts-settings#4-unlink-payment-on-cancellation-of-invoice",
    "fieldname": "unlink_payment_on_cancellation_of_invoice",
    "fieldtype": "Check",
-   "label": "Unlink Payment on Cancellation of Invoice"
+   "label": "Unlink Payment on cancellation of invoice"
   },
   {
    "default": "1",
+   "documentation_url": "https://docs.frappe.io/erpnext/accounts-settings#8-unlink-advance-payment-on-cancellation-of-order",
    "fieldname": "unlink_advance_payment_on_cancelation_of_order",
    "fieldtype": "Check",
-   "label": "Unlink Advance Payment on Cancellation of Order"
+   "label": "Unlink Advance Payment on cancellation of order"
   },
   {
    "default": "1",
    "fieldname": "book_asset_depreciation_entry_automatically",
    "fieldtype": "Check",
-   "label": "Book Asset Depreciation Entry Automatically"
+   "label": "Book Asset Depreciation entry automatically"
   },
   {
    "default": "1",
    "fieldname": "add_taxes_from_item_tax_template",
    "fieldtype": "Check",
-   "label": "Automatically Add Taxes and Charges from Item Tax Template"
+   "label": "Automatically add Taxes and Charges from Item Tax Template"
   },
   {
    "fieldname": "print_settings",
@@ -176,17 +179,13 @@
    "default": "0",
    "fieldname": "show_inclusive_tax_in_print",
    "fieldtype": "Check",
-   "label": "Show Inclusive Tax in Print"
-  },
-  {
-   "fieldname": "column_break_12",
-   "fieldtype": "Column Break"
+   "label": "Show inclusive tax in print"
   },
   {
    "default": "0",
    "fieldname": "show_payment_schedule_in_print",
    "fieldtype": "Check",
-   "label": "Show Payment Schedule in Print"
+   "label": "Show Payment Schedule in print"
   },
   {
    "fieldname": "currency_exchange_section",
@@ -212,7 +211,7 @@
    "description": "Payment Terms from orders will be fetched into the invoices as is",
    "fieldname": "automatically_fetch_payment_terms",
    "fieldtype": "Check",
-   "label": "Automatically Fetch Payment Terms from Order/Quotation"
+   "label": "Automatically fetch Payment Terms from Order/Quotation"
   },
   {
    "description": "The percentage you are allowed to bill more against the amount ordered. For example, if the order value is $100 for an item and tolerance is set as 10%, then you are allowed to bill up to $110 ",
@@ -224,7 +223,7 @@
    "default": "1",
    "fieldname": "automatically_process_deferred_accounting_entry",
    "fieldtype": "Check",
-   "label": "Automatically Process Deferred Accounting Entry"
+   "label": "Automatically process deferred Accounting entry"
   },
   {
    "fieldname": "deferred_accounting_settings_section",
@@ -240,7 +239,7 @@
    "description": "If this is unchecked, direct GL entries will be created to book deferred revenue or expense",
    "fieldname": "book_deferred_entries_via_journal_entry",
    "fieldtype": "Check",
-   "label": "Book Deferred Entries Via Journal Entry"
+   "label": "Book deferred entries via Journal Entry"
   },
   {
    "default": "0",
@@ -248,38 +247,37 @@
    "description": "If this is unchecked Journal Entries will be saved in a Draft state and will have to be submitted manually",
    "fieldname": "submit_journal_entries",
    "fieldtype": "Check",
-   "label": "Submit Journal Entries"
+   "label": "Submit Journal entries"
   },
   {
    "default": "Days",
    "description": "If \"Months\" is selected, a fixed amount will be booked as deferred revenue or expense for each month irrespective of the number of days in a month. It will be prorated if deferred revenue or expense is not booked for an entire month",
    "fieldname": "book_deferred_entries_based_on",
    "fieldtype": "Select",
-   "label": "Book Deferred Entries Based On",
+   "label": "Book Deferred entries based on",
    "options": "Days\nMonths"
   },
   {
    "default": "0",
    "fieldname": "delete_linked_ledger_entries",
    "fieldtype": "Check",
-   "label": "Delete Accounting and Stock Ledger Entries on deletion of Transaction"
+   "label": "Delete Accounting and Stock Ledger entries on deletion of transaction"
   },
   {
+   "depends_on": "eval: doc.over_billing_allowance > 0",
    "description": "Users with this role are allowed to over bill above the allowance percentage",
    "fieldname": "role_allowed_to_over_bill",
    "fieldtype": "Link",
-   "label": "Role Allowed to Over Bill ",
+   "label": "Role Allowed to over bill ",
    "options": "Role"
   },
   {
    "fieldname": "period_closing_settings_section",
-   "fieldtype": "Section Break",
-   "label": "Period Closing Settings"
+   "fieldtype": "Section Break"
   },
   {
    "fieldname": "accounts_transactions_settings_section",
-   "fieldtype": "Section Break",
-   "label": "Credit Limit Settings"
+   "fieldtype": "Section Break"
   },
   {
    "fieldname": "column_break_11",
@@ -364,14 +362,14 @@
    "default": "1",
    "fieldname": "show_balance_in_coa",
    "fieldtype": "Check",
-   "label": "Show Balances in Chart Of Accounts"
+   "label": "Show balances in Chart of Accounts"
   },
   {
    "default": "0",
    "description": "Split Early Payment Discount Loss into Income and Tax Loss",
    "fieldname": "book_tax_discount_loss",
    "fieldtype": "Check",
-   "label": "Book Tax Loss on Early Payment Discount"
+   "label": "Book tax loss on early payment discount"
   },
   {
    "fieldname": "journals_section",
@@ -383,7 +381,7 @@
    "description": "Rows with Same Account heads will be merged on Ledger",
    "fieldname": "merge_similar_account_heads",
    "fieldtype": "Check",
-   "label": "Merge Similar Account Heads"
+   "label": "Merge similar Account Heads"
   },
   {
    "fieldname": "section_break_jpd0",
@@ -394,13 +392,13 @@
    "default": "0",
    "fieldname": "auto_reconcile_payments",
    "fieldtype": "Check",
-   "label": "Auto Reconcile Payments"
+   "label": "Auto reconcile Payments"
   },
   {
    "default": "0",
    "fieldname": "show_taxes_as_table_in_print",
    "fieldtype": "Check",
-   "label": "Show Taxes as Table in Print"
+   "label": "Show taxes as table in print"
   },
   {
    "default": "0",
@@ -422,14 +420,14 @@
    "description": "Financial reports will be generated using GL Entry doctypes (should be enabled if Period Closing Voucher is not posted for all years sequentially or missing) ",
    "fieldname": "ignore_account_closing_balance",
    "fieldtype": "Check",
-   "label": "Ignore Account Closing Balance"
+   "label": "Ignore Account closing balance"
   },
   {
    "default": "0",
    "description": "Tax Amount will be rounded on a row(items) level",
    "fieldname": "round_row_wise_tax",
    "fieldtype": "Check",
-   "label": "Round Tax Amount Row-wise"
+   "label": "Round tax amount row-wise"
   },
   {
    "fieldname": "reports_tab",
@@ -441,14 +439,14 @@
    "description": "Truncates 'Remarks' column to set character length",
    "fieldname": "general_ledger_remarks_length",
    "fieldtype": "Int",
-   "label": "General Ledger"
+   "label": "General Ledger remarks length"
   },
   {
    "default": "0",
    "description": "Truncates 'Remarks' column to set character length",
    "fieldname": "receivable_payable_remarks_length",
    "fieldtype": "Int",
-   "label": "Accounts Receivable/Payable"
+   "label": "Accounts Receivable / Payable remarks length"
   },
   {
    "fieldname": "column_break_lvjk",
@@ -482,7 +480,7 @@
    "description": "Payment Requests made from Sales / Purchase Invoice will be put in Draft explicitly",
    "fieldname": "create_pr_in_draft_status",
    "fieldtype": "Check",
-   "label": "Create in Draft Status"
+   "label": "Create payment requests in Draft status"
   },
   {
    "fieldname": "column_break_yuug",
@@ -497,14 +495,14 @@
    "description": "Interval should be between 1 to 59 MInutes",
    "fieldname": "auto_reconciliation_job_trigger",
    "fieldtype": "Int",
-   "label": "Auto Reconciliation Job Trigger"
+   "label": "Auto Reconciliation job trigger"
   },
   {
    "default": "5",
    "description": "Documents Processed on each trigger. Queue Size should be between 5 and 100",
    "fieldname": "reconciliation_queue_size",
    "fieldtype": "Int",
-   "label": "Reconciliation Queue Size"
+   "label": "Reconciliation queue size"
   },
   {
    "default": "0",
@@ -518,15 +516,15 @@
    "description": "Only applies for Normal Payments",
    "fieldname": "exchange_gain_loss_posting_date",
    "fieldtype": "Select",
-   "label": "Posting Date Inheritance for Exchange Gain / Loss",
+   "label": "Posting Date inheritance for exchange gain / loss",
    "options": "Invoice\nPayment\nReconciliation Date"
   },
   {
    "default": "Buffered Cursor",
    "fieldname": "receivable_payable_fetch_method",
    "fieldtype": "Select",
-   "label": "Data Fetch Method",
-   "options": "Buffered Cursor\nUnBuffered Cursor\nRaw SQL"
+   "label": "Data fetch method",
+   "options": "Buffered Cursor\nUnBuffered Cursor"
   },
   {
    "fieldname": "accounts_receivable_payable_tuning_section",
@@ -542,14 +540,14 @@
    "default": "0",
    "fieldname": "maintain_same_internal_transaction_rate",
    "fieldtype": "Check",
-   "label": "Maintain Same Rate Throughout Internal Transaction"
+   "label": "Maintain same rate throughout internal Transaction"
   },
   {
    "default": "Stop",
    "depends_on": "maintain_same_internal_transaction_rate",
    "fieldname": "maintain_same_rate_action",
    "fieldtype": "Select",
-   "label": "Action if Same Rate is Not Maintained Throughout  Internal Transaction",
+   "label": "Action if same rate is not maintained throughout internal transaction",
    "mandatory_depends_on": "maintain_same_internal_transaction_rate",
    "options": "Stop\nWarn"
   },
@@ -557,7 +555,7 @@
    "depends_on": "eval: doc.maintain_same_internal_transaction_rate && doc.maintain_same_rate_action == 'Stop'",
    "fieldname": "role_to_override_stop_action",
    "fieldtype": "Link",
-   "label": "Role Allowed to Override Stop Action",
+   "label": "Role allowed to override stop action",
    "options": "Role"
   },
   {
@@ -589,36 +587,30 @@
    "description": "If no taxes are set, and Taxes and Charges Template is selected, the system will automatically apply the taxes from the chosen template.",
    "fieldname": "add_taxes_from_taxes_and_charges_template",
    "fieldtype": "Check",
-   "label": "Automatically Add Taxes from Taxes and Charges Template"
+   "label": "Automatically add taxes from Taxes and Charges Template"
   },
   {
    "fieldname": "column_break_ntmi",
    "fieldtype": "Column Break"
   },
-  {
-   "depends_on": "eval:doc.receivable_payable_fetch_method == \"Raw SQL\"",
-   "description": "Drops existing SQL Procedures and Function setup by Accounts Receivable report",
-   "fieldname": "drop_ar_procedures",
-   "fieldtype": "Button",
-   "label": "Drop Procedures"
-  },
   {
    "default": "0",
    "fieldname": "fetch_valuation_rate_for_internal_transaction",
    "fieldtype": "Check",
-   "label": "Fetch Valuation Rate for Internal Transaction"
+   "label": "Fetch valuation rate for internal Transaction"
   },
   {
    "default": "0",
+   "description": "Enable this if you are experiencing issues with the new budget controller. Uses the older budget validation logic",
    "fieldname": "use_legacy_budget_controller",
    "fieldtype": "Check",
-   "label": "Use Legacy Budget Controller"
+   "label": "Use legacy Budget Controller"
   },
   {
    "default": "1",
    "fieldname": "use_legacy_controller_for_pcv",
    "fieldtype": "Check",
-   "label": "Use Legacy Controller For Period Closing Voucher"
+   "label": "Use legacy controller for Period Closing Voucher"
   },
   {
    "description": "Users with this role will be notified if the asset depreciation gets failed",
@@ -636,7 +628,7 @@
   {
    "fieldname": "chart_of_accounts_section",
    "fieldtype": "Section Break",
-   "label": "Chart Of Accounts"
+   "label": "Chart of Accounts"
   },
   {
    "fieldname": "banking_section",
@@ -681,6 +673,7 @@
   },
   {
    "default": "0",
+   "documentation_url": "https://docs.frappe.io/erpnext/loyalty-program",
    "fieldname": "enable_loyalty_point_program",
    "fieldtype": "Check",
    "label": "Enable Loyalty Point Program"
@@ -707,7 +700,7 @@
    "default": "1",
    "fieldname": "fetch_payment_schedule_in_payment_request",
    "fieldtype": "Check",
-   "label": "Fetch Payment Schedule In Payment Request"
+   "label": "Fetch Payment Schedule in Payment Request"
   },
   {
    "default": "3",
@@ -732,7 +725,7 @@
   {
    "fieldname": "repost_allowed_types",
    "fieldtype": "Table",
-   "label": "Allowed Doctypes",
+   "label": "Allowed DocTypes",
    "options": "Repost Allowed Types"
   },
   {
@@ -740,7 +733,21 @@
    "description": "Runs a preview check on save before submission without making any actual changes.",
    "fieldname": "preview_mode",
    "fieldtype": "Check",
-   "label": "Preview Mode"
+   "label": "Preview mode"
+  },
+  {
+   "fieldname": "document_naming_tab",
+   "fieldtype": "Tab Break",
+   "label": "Document Naming"
+  },
+  {
+   "fieldname": "transaction_naming_html",
+   "fieldtype": "HTML"
+  },
+  {
+   "description": "Changing the account in any transaction of the DocTypes listed below will trigger a repost. To prevent reposting, remove the relevant DocType from the list.",
+   "fieldname": "column_break_mfor",
+   "fieldtype": "Column Break"
   }
  ],
  "grid_page_length": 50,
@@ -749,7 +756,7 @@
  "index_web_pages_for_search": 1,
  "issingle": 1,
  "links": [],
- "modified": "2026-04-22 01:38:42.418238",
+ "modified": "2026-06-03 13:11:54.721495",
  "modified_by": "Administrator",
  "module": "Accounts",
  "name": "Accounts Settings",

erpnext/accounts/doctype/accounts_settings/accounts_settings.py

@@ -91,7 +91,7 @@ class AccountsSettings(Document):
 		merge_similar_account_heads: DF.Check
 		over_billing_allowance: DF.Currency
 		preview_mode: DF.Check
-		receivable_payable_fetch_method: DF.Literal["Buffered Cursor", "UnBuffered Cursor", "Raw SQL"]
+		receivable_payable_fetch_method: DF.Literal["Buffered Cursor", "UnBuffered Cursor"]
 		receivable_payable_remarks_length: DF.Int
 		reconciliation_queue_size: DF.Int
 		repost_allowed_types: DF.Table[RepostAllowedTypes]
@@ -212,13 +212,6 @@ class AccountsSettings(Document):
 
 		set_allow_on_submit_for_dimension_fields(doctypes)
 
-	@frappe.whitelist()
-	def drop_ar_sql_procedures(self):
-		from erpnext.accounts.report.accounts_receivable.accounts_receivable import InitSQLProceduresForAR
-
-		frappe.db.sql(f"drop procedure if exists {InitSQLProceduresForAR.init_procedure_name}")
-		frappe.db.sql(f"drop procedure if exists {InitSQLProceduresForAR.allocate_procedure_name}")
-
 
 def toggle_accounting_dimension_sections(hide):
 	accounting_dimension_doctypes = frappe.get_hooks("accounting_dimension_doctypes")

erpnext/accounts/doctype/bank_account/bank_account.json

@@ -27,6 +27,7 @@
   "column_break_12",
   "branch_code",
   "bank_account_no",
+  "statement_password",
   "address_and_contact",
   "address_html",
   "column_break_13",
@@ -149,6 +150,12 @@
    "label": "Bank Account No",
    "length": 30
   },
+  {
+   "description": "Password used to open password-protected PDF statements for this account. Stored encrypted.",
+   "fieldname": "statement_password",
+   "fieldtype": "Password",
+   "label": "Statement PDF Password"
+  },
   {
    "fieldname": "address_and_contact",
    "fieldtype": "Section Break",

erpnext/accounts/doctype/bank_account/bank_account.py

@@ -41,6 +41,7 @@ class BankAccount(Document):
 		mask: DF.Data | None
 		party: DF.DynamicLink | None
 		party_type: DF.Link | None
+		statement_password: DF.Password | None
 	# end: auto-generated types
 
 	def onload(self):

erpnext/accounts/doctype/bank_statement_import/bank_statement_import.json

@@ -1,7 +1,7 @@
 {
  "actions": [],
+ "allow_bulk_edit": 1,
  "autoname": "format:Bank Statement Import on {creation}",
- "beta": 1,
  "creation": "2019-08-04 14:16:08.318714",
  "doctype": "DocType",
  "editable_grid": 1,
@@ -226,11 +226,11 @@
  ],
  "hide_toolbar": 1,
  "links": [],
- "modified": "2025-06-11 02:23:22.159961",
+ "modified": "2026-05-31 00:41:11.251215",
  "modified_by": "Administrator",
  "module": "Accounts",
  "name": "Bank Statement Import",
- "naming_rule": "Expression",
+ "naming_rule": "Expression (old style)",
  "owner": "Administrator",
  "permissions": [
   {

erpnext/accounts/doctype/bank_statement_import_log/bank_statement_import_log.json

@@ -28,7 +28,8 @@
   "detected_transaction_starting_index",
   "detected_transaction_ending_index",
   "section_break_yulq",
-  "column_mapping"
+  "column_mapping",
+  "pdf_tables"
  ],
  "fields": [
   {
@@ -128,6 +129,13 @@
    "label": "Column Mapping",
    "options": "Bank Statement Import Log Column Map"
   },
+  {
+   "description": "Per-table extraction data for PDF statements (rows, bbox, page image, column mapping). Edited via the banking app.",
+   "fieldname": "pdf_tables",
+   "fieldtype": "JSON",
+   "label": "PDF Tables",
+   "read_only": 1
+  },
   {
    "default": "Not Started",
    "fieldname": "status",

erpnext/accounts/doctype/bank_statement_import_log/test_bank_statement_import_log.py

@@ -7,7 +7,18 @@ from frappe.utils import getdate
 
 from erpnext.accounts.doctype.bank_statement_import_log.bank_statement_import_log import (
 	BankStatementImportLog,
+	build_table_transactions,
+	detect_column_mapping,
+	detect_header_row,
+	extract_pdf_tables,
 	get_float_amount,
+	get_statement_details,
+	guess_column_mapping_by_content,
+	reextract_pdf_table,
+	set_header_index,
+	set_pdf_table_header,
+	update_column_mapping,
+	update_pdf_tables,
 )
 from erpnext.accounts.test.accounts_mixin import AccountsTestMixin
 from erpnext.tests.utils import ERPNextTestSuite
@@ -113,6 +124,346 @@ class TestBankStatementImportLog(ERPNextTestSuite, AccountsTestMixin):
 		self.assertIsNone(get_float_amount("ABCD"))
 		self.assertIsNone(get_float_amount("****"))
 
+	# ------------------------------------------------------------------ #
+	# PDF statement import
+	# ------------------------------------------------------------------ #
+
+	@staticmethod
+	def _make_pdf(html: str) -> bytes:
+		import pdfkit
+
+		return pdfkit.from_string(html, False)
+
+	@staticmethod
+	def _encrypt(pdf_bytes: bytes, password: str) -> bytes:
+		import io
+
+		from pypdf import PdfReader, PdfWriter
+
+		reader = PdfReader(io.BytesIO(pdf_bytes))
+		writer = PdfWriter()
+		for page in reader.pages:
+			writer.add_page(page)
+		writer.encrypt(password)
+		buffer = io.BytesIO()
+		writer.write(buffer)
+		return buffer.getvalue()
+
+	@staticmethod
+	def _auto_map(table: dict) -> dict:
+		"""Mimic prepare_pdf_tables' best-effort mapping for a single extracted table."""
+		header_index, score = detect_header_row(table["rows"])
+		if score >= 2:
+			table["header_index"] = header_index
+			table["column_mapping"] = detect_column_mapping(table["rows"][header_index])
+		else:
+			table["header_index"] = None
+			table["column_mapping"] = guess_column_mapping_by_content(table["rows"])
+		table["included"] = True
+		return table
+
+	def test_pdf_multi_page_kept_separate_and_unioned(self):
+		"""Tables on separate pages must NOT be merged; transactions are the union."""
+		html = """
+		<html><body>
+		<table border="1"><tr><th>Date</th><th>Narration</th><th>Withdrawal</th><th>Deposit</th><th>Balance</th></tr>
+		<tr><td>01/04/2024</td><td>UPI PAYMENT</td><td>500.00</td><td></td><td>9500.00</td></tr>
+		<tr><td>03/04/2024</td><td>SALARY</td><td></td><td>20000.00</td><td>29500.00</td></tr></table>
+		<div style="page-break-before: always"></div>
+		<table border="1"><tr><th>Date</th><th>Narration</th><th>Withdrawal</th><th>Deposit</th><th>Balance</th></tr>
+		<tr><td>05/04/2024</td><td>ATM WDL</td><td>2000.00</td><td></td><td>27500.00</td></tr></table>
+		</body></html>
+		"""
+		tables = extract_pdf_tables(self._make_pdf(html))
+
+		# Two separate tables, one per page
+		self.assertEqual(len(tables), 2)
+		self.assertEqual(sorted(t["page"] for t in tables), [1, 2])
+		for table in tables:
+			self.assertIn("bbox", table)
+			self.assertEqual(len(table["bbox"]), 4)
+
+		union = []
+		for table in tables:
+			final, _df, _af = build_table_transactions(self._auto_map(table))
+			union.extend(final)
+
+		self.assertEqual(len(union), 3)
+		self.assertEqual(sorted(t["date"] for t in union), ["2024-04-01", "2024-04-03", "2024-04-05"])
+
+	def test_pdf_junk_table_excluded(self):
+		"""A non-transactions table (ad/summary) should yield zero transactions."""
+		ad_table = self._auto_map({"rows": [["Open a new account!", "Call 1800-XYZ"]]})
+		final, _df, _af = build_table_transactions(ad_table)
+		self.assertEqual(final, [])
+
+	def test_headerless_content_mapping(self):
+		"""Without a header row, columns are guessed from their contents."""
+		rows = [
+			["01/04/2024", "UPI PAYMENT", "500.00"],
+			["03/04/2024", "SALARY CREDIT", "20000.00"],
+		]
+		mapping = {
+			c["maps_to"]: c["index"]
+			for c in guess_column_mapping_by_content(rows)
+			if c["maps_to"] != "Do not import"
+		}
+		self.assertEqual(mapping.get("Date"), 0)
+		self.assertEqual(mapping.get("Description"), 1)
+		self.assertEqual(mapping.get("Amount"), 2)
+
+	def test_pdf_password_protected(self):
+		"""Encrypted PDFs error without a password and succeed with the right one."""
+		html = """
+		<html><body><table border="1">
+		<tr><th>Date</th><th>Narration</th><th>Amount</th></tr>
+		<tr><td>01/04/2024</td><td>UPI PAYMENT</td><td>500.00</td></tr></table></body></html>
+		"""
+		encrypted = self._encrypt(self._make_pdf(html), "secret123")
+
+		# No / wrong password -> recognizable error
+		self.assertRaises(frappe.ValidationError, extract_pdf_tables, encrypted)
+		self.assertRaises(frappe.ValidationError, extract_pdf_tables, encrypted, "wrong")
+
+		# Correct password -> extracts
+		tables = extract_pdf_tables(encrypted, "secret123")
+		self.assertTrue(tables)
+
+	def test_pdf_no_tables_detected(self):
+		"""A PDF with no detectable tables raises a clear error (e.g. scanned PDFs)."""
+		html = "<html><body><p>Just some prose with no tabular data at all.</p></body></html>"
+		self.assertRaises(frappe.ValidationError, extract_pdf_tables, self._make_pdf(html))
+
+	def _create_pdf_import_log(self, html: str) -> BankStatementImportLog:
+		pdf_bytes = self._make_pdf(html)
+		file_doc = frappe.get_doc(
+			{
+				"doctype": "File",
+				"file_name": f"test-statement-{frappe.generate_hash(length=8)}.pdf",
+				"is_private": 1,
+				"content": pdf_bytes,
+			}
+		).insert(ignore_permissions=True)
+
+		doc = frappe.get_doc(
+			{
+				"doctype": "Bank Statement Import Log",
+				"name": f"test-pdf-{frappe.generate_hash(length=8)}",
+				"bank_account": self.bank_account,
+				"file": file_doc.file_url,
+			}
+		)
+		return doc.insert()
+
+	def test_pdf_full_lifecycle(self):
+		"""End-to-end doc lifecycle: insert -> rasterize -> preview -> edit -> import."""
+		html = """
+		<html><body>
+		<table border="1"><tr><th>Date</th><th>Narration</th><th>Withdrawal</th><th>Deposit</th><th>Balance</th></tr>
+		<tr><td>01/04/2024</td><td>UPI PAYMENT</td><td>500.00</td><td></td><td>9500.00</td></tr>
+		<tr><td>03/04/2024</td><td>SALARY</td><td></td><td>20000.00</td><td>29500.00</td></tr></table>
+		<div style="page-break-before: always"></div>
+		<table border="1"><tr><th>Date</th><th>Narration</th><th>Withdrawal</th><th>Deposit</th><th>Balance</th></tr>
+		<tr><td>05/04/2024</td><td>ATM WDL</td><td>2000.00</td><td></td><td>27500.00</td></tr></table>
+		</body></html>
+		"""
+		doc = self._create_pdf_import_log(html)
+
+		# before_insert populated the per-table JSON, page images and the union summary
+		tables = doc.get_pdf_tables()
+		self.assertEqual(len(tables), 2)
+		for table in tables:
+			self.assertTrue(table.get("page_image"))
+			self.assertIn("bbox", table)
+			# Page-image File must be attached to the final docname, not the client's temp id
+			attached_to = frappe.db.get_value("File", {"file_url": table["page_image"]}, "attached_to_name")
+			self.assertEqual(attached_to, doc.name)
+		self.assertEqual(doc.number_of_transactions, 3)
+		self.assertEqual(doc.total_debit_transactions, 2)
+		self.assertEqual(doc.total_credit_transactions, 1)
+
+		# get_statement_details returns the union and the per-table data for the editor
+		details = get_statement_details(doc.name)
+		self.assertEqual(len(details["final_transactions"]), 3)
+		self.assertEqual(details["raw_data"], [])
+		self.assertEqual(len(details["pdf_tables"]), 2)
+
+		# Excluding the second table (page 2) drops its single transaction
+		tables[1]["included"] = False
+		update_pdf_tables(doc.name, tables)
+		doc.reload()
+		self.assertEqual(doc.number_of_transactions, 2)
+
+		# Re-include and import; transactions are created for the union
+		tables[1]["included"] = True
+		update_pdf_tables(doc.name, tables)
+		doc.reload()
+		doc.insert_transactions()
+		doc.reload()
+		self.assertEqual(doc.status, "Completed")
+
+		created = frappe.get_all(
+			"Bank Transaction", filters={"bank_account": self.bank_account, "docstatus": 1}
+		)
+		self.assertEqual(len(created), 3)
+
+	def test_pdf_reextract_table_from_bbox(self):
+		"""Re-extracting a table from an adjusted bbox updates its rows and stores the bbox."""
+		html = """
+		<html><body>
+		<table border="1"><tr><th>Date</th><th>Narration</th><th>Amount</th></tr>
+		<tr><td>01/04/2024</td><td>UPI PAYMENT</td><td>500.00</td></tr>
+		<tr><td>03/04/2024</td><td>SALARY</td><td>20000.00</td></tr></table>
+		</body></html>
+		"""
+		doc = self._create_pdf_import_log(html)
+		table = doc.get_pdf_tables()[0]
+		bbox = table["bbox"]
+
+		details = reextract_pdf_table(doc.name, table["page"], table["table_index"], bbox)
+		updated = details["pdf_tables"][0]
+
+		# Same region -> same rows; bbox is persisted
+		self.assertTrue(updated["rows"])
+		self.assertEqual(updated["bbox"], [round(float(v), 2) for v in bbox])
+		self.assertEqual(updated["rows"], table["rows"])
+
+	def test_pdf_reextract_changed_bbox_updates_rows_and_transactions(self):
+		"""Shrinking a table's bbox must drop rows and update the transaction count end-to-end."""
+		html = """
+		<html><body>
+		<table border="1"><tr><th>Date</th><th>Narration</th><th>Amount</th></tr>
+		<tr><td>01/04/2024</td><td>UPI PAYMENT</td><td>500.00</td></tr>
+		<tr><td>03/04/2024</td><td>SALARY</td><td>20000.00</td></tr>
+		<tr><td>05/04/2024</td><td>ATM WDL</td><td>2000.00</td></tr>
+		<tr><td>07/04/2024</td><td>INTEREST</td><td>12.50</td></tr></table>
+		</body></html>
+		"""
+		doc = self._create_pdf_import_log(html)
+		original = doc.get_pdf_tables()[0]
+		original_rows = len(original["rows"])
+		original_txns = doc.number_of_transactions
+
+		# Shrink the box to roughly the top half (simulating a user drag).
+		x0, top, x1, bottom = original["bbox"]
+		shrunk = [x0, top, x1, top + (bottom - top) * 0.5]
+
+		details = reextract_pdf_table(doc.name, original["page"], original["table_index"], shrunk)
+		updated = details["pdf_tables"][0]
+		doc.reload()
+
+		self.assertLess(len(updated["rows"]), original_rows)
+		self.assertLess(doc.number_of_transactions, original_txns)
+		self.assertEqual(len(details["final_transactions"]), doc.number_of_transactions)
+
+	def test_pdf_set_table_header(self):
+		"""User can clear a table's header (no header row) or set a specific header row."""
+		html = """
+		<html><body>
+		<table border="1"><tr><th>Date</th><th>Narration</th><th>Amount</th></tr>
+		<tr><td>01/04/2024</td><td>UPI PAYMENT</td><td>500.00</td></tr>
+		<tr><td>03/04/2024</td><td>SALARY</td><td>20000.00</td></tr></table>
+		</body></html>
+		"""
+		doc = self._create_pdf_import_log(html)
+		table = doc.get_pdf_tables()[0]
+		self.assertEqual(table["header_index"], 0)
+		original = {
+			c["maps_to"]: c["index"] for c in table["column_mapping"] if c["maps_to"] != "Do not import"
+		}
+
+		# Clear the header (-1): header is removed but the mapping is preserved (not re-guessed).
+		details = set_pdf_table_header(doc.name, table["page"], table["table_index"], -1)
+		updated = details["pdf_tables"][0]
+		self.assertIsNone(updated["header_index"])
+		preserved = {
+			c["maps_to"]: c["index"] for c in updated["column_mapping"] if c["maps_to"] != "Do not import"
+		}
+		self.assertEqual(preserved, original)
+
+		# Set row 0 back as the header: it resolves meaningfully, so mapping is re-derived.
+		details = set_pdf_table_header(doc.name, table["page"], table["table_index"], 0)
+		updated = details["pdf_tables"][0]
+		self.assertEqual(updated["header_index"], 0)
+		mapped = {
+			c["maps_to"]: c["index"] for c in updated["column_mapping"] if c["maps_to"] != "Do not import"
+		}
+		self.assertEqual(mapped.get("Date"), 0)
+		self.assertEqual(mapped.get("Description"), 1)
+
+	# ------------------------------------------------------------------ #
+	# CSV/XLSX column mapping + header overrides
+	# ------------------------------------------------------------------ #
+
+	def _create_csv_import_log(self, csv_text: str) -> BankStatementImportLog:
+		file_doc = frappe.get_doc(
+			{
+				"doctype": "File",
+				"file_name": f"test-statement-{frappe.generate_hash(length=8)}.csv",
+				"is_private": 1,
+				"content": csv_text,
+			}
+		).insert(ignore_permissions=True)
+
+		doc = frappe.get_doc(
+			{
+				"doctype": "Bank Statement Import Log",
+				"bank_account": self.bank_account,
+				"file": file_doc.file_url,
+			}
+		)
+		return doc.insert()
+
+	def test_csv_update_column_mapping(self):
+		"""Overriding the column mapping recomputes the transaction count."""
+		csv_text = "Date,Narration,Amount\n01/04/2024,UPI PAYMENT,500.00\n03/04/2024,SALARY,20000.00\n"
+		doc = self._create_csv_import_log(csv_text)
+		self.assertEqual(doc.number_of_transactions, 2)
+
+		# Drop the amount column -> no amount -> no transactions detected.
+		mapping = [
+			{"index": c.index, "maps_to": "Do not import" if c.maps_to == "Amount" else c.maps_to}
+			for c in doc.column_mapping
+		]
+		details = update_column_mapping(doc.name, mapping)
+		doc.reload()
+		self.assertEqual(doc.number_of_transactions, 0)
+		self.assertEqual(len(details["final_transactions"]), 0)
+
+	def test_csv_set_header_index_preserves_mapping(self):
+		"""Clearing the header keeps the user's mapping; it is not re-guessed."""
+		csv_text = "Date,Narration,Amount\n01/04/2024,UPI PAYMENT,500.00\n03/04/2024,SALARY,20000.00\n"
+		doc = self._create_csv_import_log(csv_text)
+		self.assertEqual(doc.detected_header_index, 0)
+
+		# Manually map the Narration column (1) as Reference.
+		mapping = [
+			{
+				"index": c.index,
+				"maps_to": "Reference" if c.index == 1 else c.maps_to,
+				"header_text": c.header_text,
+			}
+			for c in doc.column_mapping
+		]
+		update_column_mapping(doc.name, mapping)
+		doc.reload()
+
+		# Clear the header row: the manual mapping must be preserved (column 1 stays Reference,
+		# not re-guessed to Description). The label row fails date parsing, so 2 transactions remain.
+		set_header_index(doc.name, -1)
+		doc.reload()
+		self.assertEqual(doc.detected_header_index, -1)
+		self.assertEqual(doc.number_of_transactions, 2)
+		current = {c.index: c.maps_to for c in doc.column_mapping}
+		self.assertEqual(current.get(1), "Reference")
+
+		# Restore row 0 as the header (resolves meaningfully -> re-derived from labels).
+		set_header_index(doc.name, 0)
+		doc.reload()
+		self.assertEqual(doc.detected_header_index, 0)
+		restored = {c.maps_to: c.index for c in doc.column_mapping if c.maps_to != "Do not import"}
+		self.assertEqual(restored.get("Description"), 1)
+
 
 test_hdfc_sample_statement_data = [
 	["HDFC BANK Ltd.  Page No .: 1  Statement of accounts", "", "", "", "", "", ""],

erpnext/accounts/doctype/bank_transaction/test_bank_transaction.py

@@ -47,7 +47,7 @@ class TestBankTransaction(ERPNextTestSuite):
 			from_date=bank_transaction.date,
 			to_date=utils.today(),
 		)
-		self.assertTrue(linked_payments[0]["party"] == "Conrad Electronic")
+		self.assertEqual(linked_payments[0]["party"], "Conrad Electronic")
 
 	# This test validates a simple reconciliation leading to the clearance of the bank transaction and the payment
 	def test_reconcile(self):
@@ -70,10 +70,10 @@ class TestBankTransaction(ERPNextTestSuite):
 		unallocated_amount = frappe.db.get_value(
 			"Bank Transaction", bank_transaction.name, "unallocated_amount"
 		)
-		self.assertTrue(unallocated_amount == 0)
+		self.assertEqual(unallocated_amount, 0)
 
 		clearance_date = frappe.db.get_value("Payment Entry", payment.name, "clearance_date")
-		self.assertTrue(clearance_date is not None)
+		self.assertIsNot(clearance_date, None)
 
 		bank_transaction.reload()
 		bank_transaction.cancel()
@@ -178,9 +178,8 @@ class TestBankTransaction(ERPNextTestSuite):
 		self.assertEqual(
 			frappe.db.get_value("Bank Transaction", bank_transaction.name, "unallocated_amount"), 0
 		)
-		self.assertTrue(
-			frappe.db.get_value("Sales Invoice Payment", dict(parent=payment.name), "clearance_date")
-			is not None
+		self.assertIsNot(
+			frappe.db.get_value("Sales Invoice Payment", dict(parent=payment.name), "clearance_date"), None
 		)
 
 	@if_lending_app_installed

erpnext/accounts/doctype/bisect_accounting_statements/bisect_accounting_statements.py

@@ -121,7 +121,7 @@ class BisectAccountingStatements(Document):
 
 				cur_node.save()
 
-	@frappe.whitelist()
+	@frappe.whitelist(methods=["POST"])
 	def build_tree(self):
 		frappe.db.delete("Bisect Nodes")
 

erpnext/accounts/doctype/budget/budget.py

@@ -705,18 +705,20 @@ def get_ordered_amount(params):
 
 
 def get_other_condition(params, for_doc):
-	condition = f"expense_account = '{params.expense_account}'"
+	condition = f"expense_account = {frappe.db.escape(params.expense_account)}"
 	budget_against_field = params.get("budget_against_field")
 
 	if budget_against_field and params.get(budget_against_field):
-		condition += f" and child.{budget_against_field} = '{params.get(budget_against_field)}'"
+		condition += (
+			f" and child.{budget_against_field} = {frappe.db.escape(params.get(budget_against_field))}"
+		)
 
 	date_field = "schedule_date" if for_doc == "Material Request" else "transaction_date"
 
 	start_date = frappe.get_cached_value("Fiscal Year", params.from_fiscal_year, "year_start_date")
 	end_date = frappe.get_cached_value("Fiscal Year", params.to_fiscal_year, "year_end_date")
 
-	condition += f" and parent.{date_field} between '{start_date}' and '{end_date}'"
+	condition += f" and parent.{date_field} between {frappe.db.escape(str(start_date))} and {frappe.db.escape(str(end_date))}"
 
 	return condition
 

erpnext/accounts/doctype/cheque_print_template/cheque_print_template.js

@@ -6,12 +6,14 @@ frappe.provide("erpnext.cheque_print");
 frappe.ui.form.on("Cheque Print Template", {
 	refresh: function (frm) {
 		if (!frm.doc.__islocal) {
-			frm.add_custom_button(
-				frm.doc.has_print_format ? __("Update Print Format") : __("Create Print Format"),
-				function () {
-					erpnext.cheque_print.view_cheque_print(frm);
-				}
-			).addClass("btn-primary");
+			if (frappe.user.has_role("System Manager")) {
+				frm.add_custom_button(
+					frm.doc.has_print_format ? __("Update Print Format") : __("Create Print Format"),
+					function () {
+						erpnext.cheque_print.view_cheque_print(frm);
+					}
+				).addClass("btn-primary");
+			}
 
 			$(frm.fields_dict.cheque_print_preview.wrapper).empty();
 

erpnext/accounts/doctype/cheque_print_template/cheque_print_template.json

@@ -1,5 +1,6 @@
 {
  "actions": [],
+ "allow_bulk_edit": 1,
  "autoname": "field:bank_name",
  "creation": "2016-05-04 14:35:00.402544",
  "doctype": "DocType",
@@ -294,7 +295,7 @@
  ],
  "links": [],
  "max_attachments": 1,
- "modified": "2024-03-27 13:06:44.654989",
+ "modified": "2026-06-08 12:10:35.829531",
  "modified_by": "Administrator",
  "module": "Accounts",
  "name": "Cheque Print Template",
@@ -325,19 +326,17 @@
    "write": 1
   },
   {
-   "create": 1,
-   "delete": 1,
    "email": 1,
    "export": 1,
    "print": 1,
    "read": 1,
    "report": 1,
    "role": "Accounts User",
-   "share": 1,
-   "write": 1
+   "share": 1
   }
  ],
+ "row_format": "Dynamic",
  "sort_field": "creation",
  "sort_order": "DESC",
  "states": []
-}
+}

erpnext/accounts/doctype/cheque_print_template/cheque_print_template.py

@@ -48,6 +48,8 @@ class ChequePrintTemplate(Document):
 
 @frappe.whitelist()
 def create_or_update_cheque_print_format(template_name: str):
+	frappe.only_for("System Manager")
+
 	if not frappe.db.exists("Print Format", template_name):
 		cheque_print = frappe.new_doc("Print Format")
 		cheque_print.update(

erpnext/accounts/doctype/cost_center_allocation/test_cost_center_allocation.py

@@ -182,7 +182,7 @@ class TestCostCenterAllocation(ERPNextTestSuite):
 		self.assertTrue(gl_entries)
 
 		for gle in gl_entries:
-			self.assertTrue(gle.cost_center in expected_values)
+			self.assertIn(gle.cost_center, expected_values)
 			self.assertEqual(gle.debit, 0)
 			self.assertEqual(gle.credit, expected_values[gle.cost_center])
 

erpnext/accounts/doctype/dunning/dunning.js

@@ -60,7 +60,7 @@ frappe.ui.form.on("Dunning", {
 		if (frm.doc.docstatus === 0) {
 			frm.add_custom_button(__("Fetch Overdue Payments"), () => {
 				erpnext.utils.map_current_doc({
-					method: "erpnext.accounts.doctype.sales_invoice.sales_invoice.create_dunning",
+					method: "erpnext.accounts.doctype.sales_invoice.mapper.create_dunning",
 					source_doctype: "Sales Invoice",
 					date_field: "due_date",
 					target: frm,

erpnext/accounts/doctype/dunning/dunning.json

@@ -1,8 +1,8 @@
 {
  "actions": [],
+ "allow_bulk_edit": 1,
  "allow_events_in_timeline": 1,
  "autoname": "naming_series:",
- "beta": 1,
  "creation": "2019-07-05 16:34:31.013238",
  "doctype": "DocType",
  "engine": "InnoDB",
@@ -400,7 +400,7 @@
  ],
  "is_submittable": 1,
  "links": [],
- "modified": "2024-11-26 13:46:07.760867",
+ "modified": "2026-05-30 23:18:04.712528",
  "modified_by": "Administrator",
  "module": "Accounts",
  "name": "Dunning",
@@ -449,9 +449,10 @@
    "write": 1
   }
  ],
+ "row_format": "Dynamic",
  "sort_field": "creation",
  "sort_order": "ASC",
  "states": [],
  "title_field": "customer_name",
  "track_changes": 1
-}
+}

erpnext/accounts/doctype/dunning/test_dunning.py

@@ -8,7 +8,7 @@ from frappe.utils import add_days, nowdate, today
 
 from erpnext import get_default_cost_center
 from erpnext.accounts.doctype.payment_entry.test_payment_entry import get_payment_entry
-from erpnext.accounts.doctype.sales_invoice.sales_invoice import (
+from erpnext.accounts.doctype.sales_invoice.mapper import (
 	create_dunning as create_dunning_from_sales_invoice,
 )
 from erpnext.accounts.doctype.sales_invoice.test_sales_invoice import (
@@ -73,7 +73,7 @@ class TestDunning(ERPNextTestSuite):
 		dunning = create_dunning_from_sales_invoice(si1.name)
 		dunning.overdue_payments = []
 
-		method = "erpnext.accounts.doctype.sales_invoice.sales_invoice.create_dunning"
+		method = "erpnext.accounts.doctype.sales_invoice.mapper.create_dunning"
 		updated_dunning = mapper.map_docs(method, json.dumps([si1.name, si2.name]), dunning)
 
 		self.assertEqual(len(updated_dunning.overdue_payments), 2)

erpnext/accounts/doctype/dunning_type/dunning_type.json

@@ -1,7 +1,7 @@
 {
  "actions": [],
+ "allow_bulk_edit": 1,
  "allow_rename": 1,
- "beta": 1,
  "creation": "2019-12-04 04:59:08.003664",
  "doctype": "DocType",
  "editable_grid": 1,
@@ -107,7 +107,7 @@
    "link_fieldname": "dunning_type"
   }
  ],
- "modified": "2024-03-27 13:08:19.584112",
+ "modified": "2026-05-30 23:18:20.740726",
  "modified_by": "Administrator",
  "module": "Accounts",
  "name": "Dunning Type",
@@ -151,8 +151,9 @@
    "write": 1
   }
  ],
+ "row_format": "Dynamic",
  "sort_field": "creation",
  "sort_order": "DESC",
  "states": [],
  "track_changes": 1
-}
+}

erpnext/accounts/doctype/financial_report_template/financial_report_engine.py

@@ -565,18 +565,19 @@ class FinancialQueryBuilder:
 			frappe.qb.from_(acb_table)
 			.select(
 				acb_table.account,
-				(acb_table.debit - acb_table.credit).as_("balance"),
+				Sum(acb_table.debit - acb_table.credit).as_("balance"),
 			)
 			.where(acb_table.company == self.company)
 			.where(acb_table.account.isin(account_names))
 			.where(acb_table.period_closing_voucher == closing_voucher)
+			.groupby(acb_table.account)
 		)
 
 		query = self._apply_standard_filters(query, acb_table, "Account Closing Balance")
 		results = self._execute_with_permissions(query, "Account Closing Balance")
 
 		for row in results:
-			closing_balances[row["account"]] = row["balance"]
+			closing_balances[row["account"]] = row["balance"] or 0.0
 
 		return closing_balances
 

erpnext/accounts/doctype/financial_report_template/financial_report_validation.py

@@ -361,7 +361,7 @@ class CalculationFormulaValidator(Validator):
 					"sqrt": lambda x: x**0.5,
 					"pow": pow,
 					"ceil": lambda x: int(x) + (1 if x % 1 else 0),
-					"floor": lambda x: int(x),
+					"floor": int,
 				}
 			)
 

erpnext/accounts/doctype/financial_report_template/test_financial_report_engine.py

@@ -16,6 +16,7 @@ from erpnext.accounts.doctype.financial_report_template.test_financial_report_te
 )
 from erpnext.accounts.doctype.journal_entry.test_journal_entry import make_journal_entry
 from erpnext.accounts.utils import get_currency_precision, get_fiscal_year
+from erpnext.tests.utils import change_settings
 
 
 class TestDependencyResolver(FinancialReportTemplateTestCase):
@@ -1950,6 +1951,104 @@ class TestFinancialQueryBuilder(FinancialReportTemplateTestCase):
 
 			jv_2023.cancel()
 
+	@change_settings("Accounts Settings", {"use_legacy_controller_for_pcv": 1})
+	def test_opening_balance_sums_acb_rows_across_dimensions(self):
+		"""
+		Account Closing Balance stores one row per (account, cost_center,
+		project, finance_book). The closing-balance fetch must sum all rows.
+		"""
+		company = "_Test Company"
+		cash_account = "_Test Cash - _TC"
+		sales_account = "Sales - _TC"
+		cc_1 = "_Test Cost Center - _TC"
+		cc_2 = "_Test Cost Center 2 - _TC"
+		docs = []
+
+		try:
+			jv_2023_cc1 = make_journal_entry(
+				account1=cash_account,
+				account2=sales_account,
+				amount=3000,
+				posting_date="2023-06-15",
+				cost_center=cc_1,
+				company=company,
+				submit=True,
+			)
+			docs.append(jv_2023_cc1)
+			jv_2023_cc2 = make_journal_entry(
+				account1=cash_account,
+				account2=sales_account,
+				amount=2000,
+				posting_date="2023-06-15",
+				cost_center=cc_2,
+				company=company,
+				submit=True,
+			)
+			docs.append(jv_2023_cc2)
+
+			fy_2023 = get_fiscal_year("2023-06-15", company=company)
+
+			pcv = frappe.get_doc(
+				{
+					"doctype": "Period Closing Voucher",
+					"transaction_date": "2023-12-31",
+					"period_start_date": fy_2023[1],
+					"period_end_date": fy_2023[2],
+					"company": company,
+					"fiscal_year": fy_2023[0],
+					"cost_center": cc_1,
+					"closing_account_head": "Deferred Revenue - _TC",
+					"remarks": "Test multi-dim PCV",
+				}
+			)
+			pcv.insert()
+			pcv.submit()
+			docs.append(pcv)
+
+			jv_2024 = make_journal_entry(
+				account1=cash_account,
+				account2=sales_account,
+				amount=100,
+				posting_date="2024-01-15",
+				cost_center=cc_1,
+				company=company,
+				submit=True,
+			)
+			docs.append(jv_2024)
+
+			filters = {
+				"company": company,
+				"from_fiscal_year": "2024",
+				"to_fiscal_year": "2024",
+				"period_start_date": "2024-01-01",
+				"period_end_date": "2024-03-31",
+				"filter_based_on": "Date Range",
+				"periodicity": "Monthly",
+				"ignore_closing_entries": True,
+			}
+			periods = [
+				{"key": "2024_jan", "from_date": "2024-01-01", "to_date": "2024-01-31"},
+				{"key": "2024_feb", "from_date": "2024-02-01", "to_date": "2024-02-29"},
+				{"key": "2024_mar", "from_date": "2024-03-01", "to_date": "2024-03-31"},
+			]
+
+			query_builder = FinancialQueryBuilder(filters, periods)
+			accounts = [
+				frappe._dict({"name": cash_account, "account_name": "Cash", "account_number": "1001"}),
+			]
+
+			balances_data = query_builder.fetch_account_balances(accounts)
+			cash_data = balances_data.get(cash_account)
+			self.assertIsNotNone(cash_data, "Cash account must appear in results")
+
+			jan_cash = cash_data.get_period("2024_jan")
+			self.assertEqual(jan_cash.opening, 5000.0)
+			self.assertEqual(jan_cash.movement, 100.0)
+			self.assertEqual(jan_cash.closing, 5100.0)
+
+		finally:
+			self.cancel_docs(docs)
+
 	def test_opening_entries_roll_into_opening_after_period_closing(self):
 		"""
 		Sequence:

erpnext/accounts/doctype/financial_report_template/test_financial_report_template.py

@@ -9,6 +9,14 @@ from erpnext.tests.utils import ERPNextTestSuite
 class FinancialReportTemplateTestCase(ERPNextTestSuite):
 	"""Utility class with common setup and helper methods for all test classes"""
 
+	def cancel_docs(self, docs):
+		"""Cancel submitted docs in reverse creation order to avoid dependency issues."""
+		for doc in reversed(docs):
+			if doc:
+				doc.reload()
+				if doc.docstatus == 1:
+					doc.cancel()
+
 	def setUp(self):
 		"""Set up test data"""
 		self.create_test_template()

erpnext/accounts/doctype/invoice_discounting/test_invoice_discounting.py

@@ -5,7 +5,7 @@ import frappe
 from frappe.utils import add_days, flt, nowdate
 
 from erpnext.accounts.doctype.account.test_account import create_account
-from erpnext.accounts.doctype.journal_entry.journal_entry import get_payment_entry_against_invoice
+from erpnext.accounts.doctype.journal_entry.mapper import get_payment_entry_against_invoice
 from erpnext.accounts.doctype.sales_invoice.test_sales_invoice import create_sales_invoice
 from erpnext.stock.doctype.purchase_receipt.test_purchase_receipt import get_gl_entries
 from erpnext.tests.utils import ERPNextTestSuite

erpnext/accounts/doctype/journal_entry/journal_entry.js

@@ -178,7 +178,7 @@ frappe.ui.form.on("Journal Entry", {
 					voucher_type: frm.doc.voucher_type,
 					company: args.company,
 				},
-				method: "erpnext.accounts.doctype.journal_entry.journal_entry.make_inter_company_journal_entry",
+				method: "erpnext.accounts.doctype.journal_entry.mapper.make_inter_company_journal_entry",
 				callback: function (r) {
 					if (r.message) {
 						var doc = frappe.model.sync(r.message)[0];
@@ -433,15 +433,17 @@ erpnext.accounts.JournalEntry = class JournalEntry extends frappe.ui.form.Contro
 
 	accounts_add(doc, cdt, cdn) {
 		var row = frappe.get_doc(cdt, cdn);
-		row.exchange_rate = 1;
-		$.each(doc.accounts, function (i, d) {
-			if (d.account && d.party && d.party_type) {
-				row.account = d.account;
-				row.party = d.party;
-				row.party_type = d.party_type;
-				row.exchange_rate = d.exchange_rate;
-			}
-		});
+		if (!row.exchange_rate) row.exchange_rate = 1;
+		if (!row.account) {
+			$.each(doc.accounts, function (i, d) {
+				if (d.account && d.party && d.party_type) {
+					row.account = d.account;
+					row.party = d.party;
+					row.party_type = d.party_type;
+					row.exchange_rate = d.exchange_rate;
+				}
+			});
+		}
 
 		// set difference
 		if (doc.difference) {
@@ -729,7 +731,7 @@ $.extend(erpnext.journal_entry, {
 
 	reverse_journal_entry: function (frm) {
 		frappe.model.open_mapped_doc({
-			method: "erpnext.accounts.doctype.journal_entry.journal_entry.make_reverse_journal_entry",
+			method: "erpnext.accounts.doctype.journal_entry.mapper.make_reverse_journal_entry",
 			frm: frm,
 		});
 	},