fix: failing test

.github/POSTGRES_COMPATIBILITY.md

@@ -1,259 +0,0 @@
-# PostgreSQL compatibility — review guide
-
-ERPNext targets **both MariaDB and PostgreSQL from a single codebase**. The full server
-test suite passes on both, but the PostgreSQL CI job is **label-gated** (it does not run on
-every PR), so until it is required this guide is the always-on guard. Greptile loads it as
-review context (`.greptile/config.json`).
-
-When reviewing a PR, flag any **new or changed query** (raw `frappe.db.sql`, `frappe.qb`,
-`frappe.get_all/get_list/get_value`, report SQL) that would **error on PostgreSQL** or
-**return different results on the two engines**.
-
-## The one rule that governs everything
-
-**MariaDB behaviour must not change; PostgreSQL is brought into line with MariaDB — never the
-reverse.** A "fix" that changes the value, row count, or ordering MariaDB produced is a
-regression, even if the new behaviour looks more correct. The only accepted MariaDB-output
-change is replacing a genuinely *undefined/arbitrary* result with a deterministic one (row
-count preserved) — and that should be called out explicitly.
-
-There are two failure modes to watch for:
-1. **Hard breaks** — PostgreSQL raises an exception; MariaDB is green. Easy to catch in CI,
-   but the gated job may not run.
-2. **Silent divergences** — both engines succeed but return *different* results. CI on one
-   engine stays green; the bug only shows on a PostgreSQL site. These are the dangerous ones.
-
----
-
-## 1. Hard breaks — would error on PostgreSQL
-
-Flag a changed query that uses any of these:
-
-- **Loose `GROUP BY`** — selecting/ordering a column that is neither in `GROUP BY` nor wrapped
-  in an aggregate. MariaDB tolerates it; PostgreSQL errors (`must appear in the GROUP BY
-  clause or be used in an aggregate function`). This **also covers an aggregate (`Sum`/`Count`/…)
-  selected alongside bare columns with NO `.groupby()` at all** — MariaDB silently collapses
-  every row into one arbitrary-valued row (often a *wrong-output* bug there too), PostgreSQL
-  errors. Fix: add the bare column to `GROUP BY` **if it is functionally dependent on the group
-  key**, otherwise wrap it in `Max()`/`Min()`. **See §3 — the row-count trap — before suggesting
-  "add it to GROUP BY".**
-- **MySQL-only functions** — `TIMESTAMP(date,time)`, `TIMEDIFF`, `STR_TO_DATE`, `DATE_FORMAT`,
-  `DATE_ADD/SUB`, `GROUP_CONCAT`, `PERIOD_DIFF`, SQL `IF(cond,a,b)`. Use the portable
-  `frappe.query_builder.functions` equivalents (`CombineDatetime`, `DateDiff`, `Case`,
-  `GroupConcat`, …) or a precomputed column (e.g. `posting_datetime`).
-- **`UPDATE … JOIN`** — not valid on PostgreSQL. Rewrite as `UPDATE … WHERE name IN (subquery)`.
-- **`HAVING` referencing a `SELECT` alias** — PostgreSQL rejects output-column aliases in
-  `HAVING` (regardless of whether the query has a `GROUP BY`; MariaDB allows them). Repeat the
-  underlying expression in `HAVING`, or move a non-aggregate predicate into `WHERE`.
-- **`SELECT DISTINCT … ORDER BY <expr not in the select list>`** — add the expr to the select
-  **only if it is single-valued per distinct row**; otherwise it grows the `DISTINCT` key and the
-  MariaDB row count (see §3) — drop the SQL `ORDER BY` and sort in Python instead.
-- **Single-quoted column alias** `AS 'x'` — PostgreSQL reads `'x'` as a string literal. Use an
-  unquoted (or double-quoted) alias.
-- **`varchar | varchar`** (bitwise OR misused as a coalesce) — errors on PostgreSQL. Use
-  `Coalesce(...)`.
-- **Capital-cased identifiers** used as column/field names in `get_value(dt, dn, "Status")`,
-  `get_all(dt, fields=["Account"])`, and similar — PostgreSQL quotes the identifier and matches
-  it case-sensitively; a stored column named `status`/`account` won't match `"Status"`/`"Account"`
-  (`column "Account" does not exist`). Use the exact stored (lower-case) fieldname.
-- **Boolean passed where an integer column is expected** — `frappe.db.set_value(dt, dn,
-  check_field, True)`, `doc.db_set(field, False)`, or `frappe.qb.update(dt).set(check_field, True)`
-  emit `SET col = true`, which PostgreSQL rejects on a `smallint`/`Check` column
-  (`column is of type smallint but expression is of type boolean`). Pass `1`/`0`.
-- **A direct `.like()`/`.ilike()` on a pypika field (or raw `LIKE`) on a NON-text column** — `idx`,
-  `docstatus`, a date, etc. frappe maps `.like()` → `ILIKE`, and PostgreSQL has no `bigint ILIKE text`
-  operator (`operator does not exist: bigint ~~* unknown`). Cast the column to text first —
-  **`Cast_(col, "varchar")`**, not `Cast(col, "char")` (see below). MariaDB coerces the int
-  implicitly, so the cast is a no-op there. A `["like", …]` filter passed to `get_all`/`get_list`/
-  `qb.get_query`/`reportview` needs no cast: the framework casts non-text fields itself
-  (frappe/frappe#42449).
-- **`CAST(… AS CHAR)` / `Cast(x, "char")`** — on PostgreSQL bare `CHAR` is `character(1)`, so
-  `CAST(12 AS CHAR)` → `'1'` (silently truncates multi-digit values); MariaDB gives the full string.
-  Use `VARCHAR` / `Cast_(x, "varchar")`.
-- **`.rlike()` / raw `RLIKE`** — frappe rewrites `REGEXP` → `~*` on PostgreSQL but does **not**
-  translate `RLIKE` (no such PostgreSQL operator). Use `.regexp()` (or `.like()` for a simple prefix).
-- **`IfNull`/`Coalesce` of a typed column with a different-typed literal** — `IfNull(asset.disposal_date, 0)`
-  renders `COALESCE("disposal_date", 0)`, coalescing a **DATE** with an **integer**. PostgreSQL requires
-  `COALESCE` args to share a type (`DatatypeMismatch: COALESCE types date and integer cannot be matched`);
-  MariaDB's `IFNULL` is permissive. The common shape is `IfNull(date_col, 0) != 0 / == 0` as a presence test —
-  replace with `date_col.isnotnull()` / `date_col.isnull()` (identical, and valid on both). Otherwise coalesce
-  to a **same-type** default (`Coalesce(date_col, '1900-01-01')`, `Coalesce(text_col, '')`).
-- **Division by a possibly-zero divisor** — `Sum(a) / Sum(b)`, `x / col`, etc. where the
-  divisor can be `0`/empty. MariaDB returns `NULL` for division by zero; PostgreSQL raises
-  `division by zero` and aborts the query. Wrap the divisor in `NullIf(divisor, 0)` — that
-  yields `NULL` on both engines, matching MariaDB's value. (Only the *literal* `/ 0` is a parse
-  constant; the trap is a divisor that is an aggregate or column the data can drive to zero.)
-
----
-
-## 2. Silent divergences — succeeds on both, returns different results
-
-These don't error, so a one-engine CI stays green. Flag them:
-
-- **Case sensitivity on text equality** — `==`, `.isin()`, `Strpos`/`Locate` on free-text
-  columns are case-**sensitive** on PostgreSQL but case-**insensitive** under MariaDB's default
-  collation. `Lower()` both sides. *(Not `.like()`/`["like", …]` — those already render as
-  `ILIKE` on PostgreSQL; see §4.)*
-- **Case sensitivity in a doc-`name` lookup** — lower-casing a value then using it as a
-  document name in `get_value`/`get_doc`/`exists` misses on PostgreSQL (names are
-  case-sensitive). Keep original case for the identifier; lower-case only comparison operands.
-- **Empty string vs NULL** — PostgreSQL stores a blank link/data field as `NULL` on some paths
-  while MariaDB keeps `''`; `Concat`/`Concat_ws` then diverge. Prefer the stored full value, or
-  `Coalesce(col, '')` per argument.
-- **NULL ordering** — MariaDB sorts `NULL` first, PostgreSQL sorts it last. For
-  `ORDER BY … LIMIT 1`/`[0]` on a nullable column, guard with `Coalesce`/`isnotnull()`.
-- **`ORDER BY … LIMIT 1` with no unique tiebreaker** — when rows tie on the ordered column the
-  two engines may pick different rows. Add a `creation`/`name` tiebreaker **only if it does not
-  change MariaDB's current pick** (see §4).
-- **Integer division** — `int / int` truncates on PostgreSQL but is decimal on MariaDB, e.g.
-  `COUNT(...) / COUNT(...) * 100` → `0`, or `manufacturing_time_in_mins / 1440` flooring a
-  lead-time to whole days. Force float: multiply by `100.0`, or make a literal a float
-  (`/ 1440` → `/ 1440.0`), or cast an operand. (Only SQL-level `/` on integer **columns/literals**
-  — Python `/` is already float.)
-- **`DISTINCT` list ordering** — `frappe.get_all(distinct=True, order_by=…)` /
-  `SELECT DISTINCT … ORDER BY`: frappe's `db_query` **silently drops `ORDER BY` for distinct
-  queries on PostgreSQL**, so the result is unordered there. Sort in Python instead — and use
-  `key=str.casefold`, because bare `sorted()` is case-sensitive (ASCII) while MariaDB's
-  collation is case-insensitive, so a plain sort reorders MariaDB's output.
-- **Engine-specific function rewrites** — e.g. a PostgreSQL `regexp_replace` branch
-  reimplementing MariaDB's `CAST(SUBSTRING_INDEX(name,' ',-1) AS UNSIGNED)` (leading digits of
-  the last whitespace token). Verify the rewrite matches MariaDB on edge cases (`"X - 3a"→3`,
-  `"X - 1.5"→1`) by diffing both engines on literal rows.
-- **`UnixTimestamp(date)` / date→epoch** is timezone-dependent (midnight in the DB session TZ),
-  so a strict `epoch <= now` bound is flaky on PostgreSQL.
-
----
-
-## 3. The row-count trap — `GROUP BY` **and** `DISTINCT` (the single most important rule)
-
-When making a loose `GROUP BY` PostgreSQL-valid, **do not add a non-functionally-dependent
-column to the `GROUP BY` just to satisfy PostgreSQL** — that turns one group row into N and
-**changes the MariaDB row count** (a regression). The classic traps are adding the **child/row
-primary key** or an **editable per-row field**. Instead **`Max()`/`Min()`-wrap** the offending
-column: the row count is preserved and the value goes from arbitrary (MariaDB's old loose pick)
-to deterministic.
-
-**Judge functional dependence by the source table, not the column name:**
-- A column from a **master joined on the group key** (`t3.x` where `t1.key = t3.name`) is FD →
-  safe to keep in `GROUP BY`.
-- A descriptive field on the **transaction** table (`t1.supplier_name`, `t1.territory`,
-  `t1.item_name` — fetched/editable, can differ across historical rows for the same key) is
-  **not** FD even though it looks master-derived → `Max()`-wrap it.
-
-Conversely, do **not** suggest changing a `Max()`/`Min()`-wrapped column to `Sum()` (or vice
-versa) to make a number "more correct" — that changes the MariaDB value. The wrap reproduces
-MariaDB's prior one-value-per-group output; a different aggregate is a product change, out of
-scope for a portability fix.
-
-**The same trap applies to `SELECT DISTINCT`.** To satisfy PostgreSQL's "an `ORDER BY` expr must
-appear in the select list under `DISTINCT`" rule, **do not blindly add the ordered column to the
-select** — if it is not single-valued per existing distinct row, the `DISTINCT` key grows and
-MariaDB returns **more rows** (a regression), exactly as adding a non-FD column to `GROUP BY` does.
-Add it only when it is functionally dependent on the existing select columns; otherwise drop the
-SQL `ORDER BY` and **sort in Python** (`key=str.casefold`, per §2) so the distinct row set is
-unchanged.
-
-### 3.1 Second-order traps — when the `Max()`/`Min()` wrap itself is the bug
-
-The wrap is only a no-op when the column is provably single-valued per group (**"`Max()` means
-provably constant"**). When the column can genuinely vary, the wrap is a decision, and a full
-audit of these fixes found four recurring mistakes:
-
-- **Incoherent pair** — two semantically-coupled columns (a flag + a link:
-  `is_phantom_item` + `bom_no`; a discriminator + its value) aggregated with *independent*
-  `Max()`/`Min()` can pair values from **different rows** — a chimera row that never existed.
-  MariaDB's loose pick was at least row-coherent. Fix: group by the pair (when consumers
-  tolerate the extra rows), or select one **representative row** (`Min(child.name)` subquery +
-  join-back) so every column comes from the same line.
-- **NULL-skipping** — `MAX`/`MIN` ignore NULLs, so `Max()` over a mostly-NULL discriminator
-  (an `original_item`-style column) *deterministically* returns the non-NULL value where
-  MariaDB could return NULL — deterministically wrong where the old behavior was only
-  intermittently wrong. Flag it wherever "no value" is a meaningful state (fallback gates,
-  dict keys).
-- **Fabricated arithmetic** — `Sum(x) * Max(y)` where `y` varies within the group invents a
-  number no row ever had (and `Max` biases it upward) — poisonous when it feeds validation,
-  budgets, valuation, or GL/stock values. Fix per-row: `Sum(x * y)`.
-- **Collation-dependent pick (text columns)** — `Max()`/`Min()` over text is a *sort*, and the two
-  engines sort text differently: MariaDB's `utf8mb4` collations fold case, PostgreSQL (as CI runs
-  it) orders by byte value. `MAX('abc', 'ABD')` is `ABD` on MariaDB and `abc` on PostgreSQL. So a
-  `Max()` over a text column that varies **in case** within its group is a live P2 divergence, not
-  the arbitrary-pick preservation the wrap is usually justified as. Confirmed on CI; see #56241.
-  Note a local macOS PostgreSQL gives a **false all-clear** — its collation happens to agree with
-  MariaDB on case. Fix: take a representative row rather than sorting text.
-- **Wrong bound** — where the value has a semantic, pick the bound deliberately:
-  `Min(schedule_date)` for a "required by", `Min(idx)` for first-line ordering, a qty-weighted
-  average for a rate. A blind `Max` can understate urgency or overstate a figure.
-
-Review heuristic: **if choosing between `Max` and `Min` would change the answer, the column is
-not functionally dependent** — wrapping either is the wrong fix. Group by it, restructure, or
-pick a bound for a stated reason, and cover the varying-group case with a test.
-
----
-
-## 4. False positives — do NOT flag these
-
-These are auto-handled by the framework and are **not** breaks:
-
-- **`.like()` / `["like", …]`** already renders as `ILIKE` on PostgreSQL — not a
-  case-sensitivity bug. A `["like", …]` filter on a **non-text** field is also cast to text by
-  the framework. *(Exception: a direct `.like()` on a **non-text** pypika field — `idx`,
-  `docstatus` — is a hard break, `bigint ILIKE`; see §1.)*
-- **Raw `ifnull(...)`** inside `frappe.db.sql()` is rewritten to `coalesce(...)` on all engines.
-- **Backticks**, **`LOCATE`**, **`REGEXP`** / **`.regexp()`** in raw SQL are auto-translated on
-  PostgreSQL (`REGEXP` → `~*`). **But `RLIKE` / `.rlike()` is NOT translated** — that one is a
-  hard break (see §1).
-- **An `ORDER BY … LIMIT 1` tie where the two engines already agree**, or where adding a
-  tiebreaker would *change* MariaDB's current pick — leave it; "fixing" it would either change
-  MariaDB or has no observable effect.
-
----
-
-## 5. Transaction / runtime (not query-shape, still PostgreSQL-only)
-
-- **Catch-and-continue inserts** — on PostgreSQL a failed `insert()` aborts the **whole
-  transaction**, so code that swallows a duplicate and keeps going dies on the next statement
-  with `InFailedSqlTransaction` (frappe dropped its blanket per-statement savepoint in
-  frappe#40075). Such a handler must wrap the fallible insert in `frappe.db.savepoint(name)` +
-  `rollback(save_point=name)` — unless it re-`throw`s with no DB call before the throw, or the
-  insert uses `ignore_if_duplicate=True` / `autoname="hash"` (→ `ON CONFLICT DO NOTHING`).
-- **Recover the txn with a *scoped* savepoint, not a full `frappe.db.rollback()`, if any prior work
-  must survive.** A full rollback un-poisons the txn but also discards every row the handler committed
-  *before* the failure — which MariaDB kept (it has no statement-abort), so it's a **silent MariaDB
-  regression**. **"The background job / whitelist entrypoint owns the txn" does NOT make a full rollback
-  safe** if it did multiple inserts in a loop first — it drops the partial results MariaDB retained. A
-  full rollback is safe only when it (a) immediately re-`throw`s/`raise`s (MariaDB rolls back anyway),
-  (b) has nothing successful before it (a single op), or (c) the batch is genuinely meant to be
-  **atomic** (a partial result is an invalid state → rollback + mark *Failed* is correct). Otherwise use
-  a **per-iteration / per-record savepoint** — and keep the function's success/`None` return contract:
-  do **not** return the doc when the savepoint was rolled back.
-
----
-
-## 6. Refactors and raw-SQL→ORM conversions are not automatically 1:1
-
-A commit labeled a **refactor** or a **raw-`frappe.db.sql` → `frappe.qb`/ORM conversion** is meant
-to preserve behaviour — but it easily doesn't, and the change passes the static checker and a
-one-engine green run. **Diff the `WHERE`/predicate, the `JOIN`/`ON` conditions, and the resulting
-row set — not just the `SELECT` shape.** A conversion that silently widens or narrows the filter
-changes the rows touched on **both** engines and is a regression hiding under a "refactor" label.
-
-Real example: an `UPDATE` whose bound was `posting_datetime > X` gained an
-`OR (posting_datetime == X AND creation > args.creation)` branch during a "`sql` → `qb` refactor",
-widening the rows updated on both engines. Even when such a change is a deliberate bug-fix it must
-be called out and tested — it is **not** the no-op the refactor label implies. Confirm the
-converted query touches exactly the same rows with the same values MariaDB produced before.
-
----
-
-## How to review
-
-For every changed query: does it (a) use a construct from §1 (would error on PostgreSQL),
-(b) match a divergence in §2/§3 (different result across engines), or (c) change the row set under
-a refactor/conversion label (§6)? If so, comment with the
-portable fix and confirm it leaves **MariaDB output unchanged**. Skip the §4 false positives.
-Prefer a comment that names the rule (e.g. "loose GROUP BY — Max()-wrap, don't add to GROUP BY:
-splits the row count") so the fix is unambiguous.
-
-The static pre-commit checker (`.github/helper/postgres_compat.py`) catches the *mechanical*
-§1 breaks; the **semantic** §2/§3 divergences and the §6 refactor/conversion row-set changes are
-exactly what a reviewer (and this guide) must cover, because no static check can see them.

.github/helper/hydrate.sh

@@ -1,72 +0,0 @@
-#!/bin/bash
-#
-# Hydrate a test shard from the setup job's artifact.
-#
-# The bench (apps, venv, node_modules, sites) is already on disk at ~/frappe-bench — the
-# workflow untar'd it from the artifact the setup job built. So there is NO bench init, no
-# asset build, and no reinstall here: just bring the DB up on the baked datadir and start redis
-# so tests can run. The whole point is that the expensive work happened ONCE in the setup job.
-#
-set -e
-
-ci_user="${ERPNEXT_CI_USER:-frappe}"
-db_host="${DB_HOST:-127.0.0.1}"
-
-# Re-exec as the ci user (uid 1001) so bench/cache ownership matches the artifact, same as
-# install.sh. The workflow untar'd as root with -p, so the files are already owned by ci.
-if [ "$(id -u)" = "0" ] && [ "${SKIP_SYSTEM_SETUP:-0}" = "1" ] && [ "$ci_user" != "root" ]; then
-    exec su -m "$ci_user" -s /bin/bash -c \
-        "ERPNEXT_CI_USER='$ci_user' DB_HOST='$db_host' DB='${DB:-}' bash '$0'"
-fi
-
-cd ~/frappe-bench
-
-# Start the DB on the datadir baked into the artifact. It's already populated (the setup job
-# reinstalled into this very datadir), so there is NO restore — the server comes up on the
-# existing files. This is what replaces the per-shard SQL replay.
-bash ~/frappe-bench/start-db.sh
-
-# Bring up redis (lightmode unit tests need cache + queue). In the self-hosted container we use the
-# full `bench start` (web/workers too, like install.sh). On the bare GitHub Postgres shard
-# `bench start` (honcho) lagged — it blocks the redis procs behind web/worker procs the lightmode
-# suite never uses, so the wait below burned its full timeout (~4m). There, start the two redis
-# instances directly: fast and deterministic.
-if [ "${DB:-mariadb}" = "postgres" ]; then
-    # Start redis directly as daemons — reliable and persists across steps. Do NOT route it through
-    # `bench start`: honcho tears the whole process group down if any one Procfile proc dies on the
-    # bare shard, which took redis with it (redis @ 13000 refused in Run Tests). Keeping redis
-    # independent is what makes it survive. The web server (for PDF tests) is NOT started here — a
-    # backgrounded server doesn't survive into the next step; it's started inside the Run Tests step.
-    for conf in redis_cache redis_queue; do
-        [ -f ~/frappe-bench/config/$conf.conf ] && redis-server ~/frappe-bench/config/$conf.conf --daemonize yes
-    done
-else
-    bench start >> ~/frappe-bench/bench_start.log 2>&1 &
-fi
-
-# Wait for redis, failing fast instead of silently burning minutes if it never comes up.
-cfg=~/frappe-bench/sites/common_site_config.json
-if [ -f "$cfg" ]; then
-    ports=$(python - "$cfg" <<'PY'
-import json, re, sys
-try:
-    cfg = json.load(open(sys.argv[1]))
-except Exception:
-    sys.exit(0)
-for key in ("redis_cache", "redis_queue"):
-    m = re.search(r":(\d+)", str(cfg.get(key, "")))
-    if m:
-        print(m.group(1))
-PY
-)
-    for port in $ports; do
-        up=0
-        for _ in $(seq 1 60); do
-            if (exec 3<>"/dev/tcp/127.0.0.1/$port") 2>/dev/null; then exec 3>&- 3<&-; up=1; break; fi
-            sleep 1
-        done
-        [ "$up" = "1" ] || { echo "redis did not come up on port $port"; exit 1; }
-    done
-fi
-
-echo "Hydrated: DB up on baked datadir, redis up — ready for tests."

.github/helper/install.sh

@@ -4,406 +4,75 @@ set -e
 
 cd ~ || exit
 
-# Authenticate git against github.com with the job token: anonymous git-over-HTTPS from the
-# runners gets throttled to a 401, which kills whichever clone is in flight — the frappe fetch
-# below, or payments under `bench get-app`. See the PR description.
-#
-# A credential helper rather than a url.insteadOf rewrite, because `git clone` PERSISTS a
-# rewritten URL into the new repo's .git/config: an insteadOf would leave the token sitting in
-# apps/payments/.git/config on the runner. A helper is consulted only when github.com actually
-# challenges, and leaves the stored remote URL untouched. Passing it through GIT_CONFIG_* keeps
-# the token out of ~/.gitconfig too, and child processes inherit it (bench shells out to git).
-ci_github_token=${CI_GITHUB_TOKEN:-${GITHUB_TOKEN:-}}
-if [ -n "$ci_github_token" ]; then
-    export CI_GITHUB_TOKEN="$ci_github_token"
-    export GIT_CONFIG_COUNT=3
-    # Reset first: git runs EVERY configured helper and calls `store` on them after a successful
-    # auth, so a `credential.helper=store` inherited from the image's gitconfig would write the
-    # token to ~/.git-credentials. An empty value clears the list before ours is added.
-    export GIT_CONFIG_KEY_0="credential.helper"
-    export GIT_CONFIG_VALUE_0=""
-    export GIT_CONFIG_KEY_1="credential.https://github.com.username"
-    export GIT_CONFIG_VALUE_1="x-access-token"
-    export GIT_CONFIG_KEY_2="credential.https://github.com.helper"
-    # Single-quoted: $CI_GITHUB_TOKEN is expanded by the shell git runs the helper in, so the
-    # token is read from the environment at call time and never stored anywhere. Answering only
-    # `get` makes the helper inert for git's `store`/`erase` calls.
-    export GIT_CONFIG_VALUE_2='!f() { test "$1" = get && echo "password=$CI_GITHUB_TOKEN"; }; f'
-fi
+sudo apt update
+sudo apt remove mysql-server mysql-client
+sudo apt install libcups2-dev redis-server mariadb-client libmariadb-dev
 
-# Whatever happens, never sit on a credential prompt: fail fast and legibly instead.
-export GIT_TERMINAL_PROMPT=0
+pip install frappe-bench
 
 githubbranch=${GITHUB_BASE_REF:-${GITHUB_REF##*/}}
 frappeuser=${FRAPPE_USER:-"frappe"}
-frappecommitish=${FRAPPE_BRANCH:-}
-
-# A stacked pull request targets another erpnext branch, which has no counterpart in frappe.
-# Fall back to develop so the bench is still installed. An explicit FRAPPE_BRANCH is trusted as
-# given, since it can be a commit sha rather than a branch.
-if [ -z "$frappecommitish" ]; then
-    frappecommitish=$githubbranch
-
-    # git ls-remote --exit-code reports 2 for a branch that is not there and 128 for a remote it
-    # could not reach. Only the first one is proof of absence; keep the branch on anything else so
-    # a flaky probe cannot install an unrelated frappe.
-    probe=0
-    git ls-remote --exit-code --heads "https://github.com/${frappeuser}/frappe" "$frappecommitish" >/dev/null 2>&1 || probe=$?
-
-    if [ "$probe" -eq 2 ]; then
-        echo "frappe has no branch ${frappecommitish}, falling back to develop"
-        frappecommitish=develop
-    elif [ "$probe" -ne 0 ]; then
-        echo "could not reach frappe to check for branch ${frappecommitish} (git ls-remote exited ${probe}), keeping it"
-    fi
-fi
-db_host=${DB_HOST:-"127.0.0.1"}
-db_user_host=${DB_USER_HOST:-"localhost"}
-wkhtmltox_deb=${WKHTMLTOX_DEB:-"/tmp/wkhtmltox.deb"}
-bench_cache_dir=${BENCH_CACHE_DIR:-}
-
-run_as_ci_user_if_needed() {
-    if [ "$(id -u)" != "0" ] || [ "${SKIP_SYSTEM_SETUP:-0}" != "1" ] || [ "${ERPNEXT_CI_NON_ROOT:-0}" = "1" ]; then
-        return
-    fi
-
-    local missing_packages=()
-    if ! command -v pkg-config >/dev/null 2>&1; then
-        missing_packages+=("pkg-config")
-    fi
-    if ! command -v mariadb_config >/dev/null 2>&1 && ! command -v mysql_config >/dev/null 2>&1; then
-        missing_packages+=("libmariadb-dev")
-    fi
-    if ! command -v crontab >/dev/null 2>&1; then
-        missing_packages+=("cron")
-    fi
-
-    if [ "${#missing_packages[@]}" -gt 0 ]; then
-        apt-get update
-        apt-get install -y --no-install-recommends "${missing_packages[@]}"
-    fi
-
-    local ci_user="${ERPNEXT_CI_USER:-frappe}"
-
-    if ! id "$ci_user" >/dev/null 2>&1; then
-        useradd --home-dir "$HOME" --no-create-home --shell /bin/bash "$ci_user"
-    fi
-
-    rm -rf ~/frappe ~/frappe-bench
-
-    local ci_dirs=(
-        "$HOME"
-        "$GITHUB_WORKSPACE"
-        "$HOME/.cache"
-        "${PIP_CACHE_DIR:-$HOME/.cache/pip}"
-        "${npm_config_cache:-$HOME/.npm}"
-        "${YARN_CACHE_FOLDER:-$HOME/.cache/yarn}"
-        "$HOME/.yarn"
-        "${UV_CACHE_DIR:-$HOME/.cache/uv}"
-        "$(dirname "$wkhtmltox_deb")"
-    )
-    if [ -n "$bench_cache_dir" ]; then
-        ci_dirs+=("$bench_cache_dir")
-    fi
-
-    # Create + own (non-recursively) the home/cache/workspace dirs before dropping to
-    # the ci user. We deliberately do NOT wipe the yarn/uv caches here so a persistent
-    # cache (mounted volume or baked image layer) stays warm across runs.
-    mkdir -p "${ci_dirs[@]}" "$HOME/.yarn"
-    chown "$ci_user:$ci_user" "${ci_dirs[@]}" "$HOME/.yarn"
-
-    export ERPNEXT_CI_NON_ROOT=1
-    exec su -m "$ci_user" -s /bin/bash -c "cd '$HOME' && bash '$GITHUB_WORKSPACE/.github/helper/install.sh'"
-}
-
-run_as_ci_user_if_needed
-
-run_ci_step() {
-    local label=$1
-    shift
-
-    echo "::group::${label}"
-    date -u
-    local exit_code=0
-    timeout --foreground "${CI_INSTALL_STEP_TIMEOUT:-1800}" "$@" || exit_code=$?
-    date -u
-    echo "::endgroup::"
-    return "$exit_code"
-}
-
-if [ -n "${GITHUB_WORKSPACE:-}" ]; then
-    git config --global --add safe.directory "$GITHUB_WORKSPACE" || true
-    git config --global --add safe.directory "$GITHUB_WORKSPACE/.git" || true
-fi
-
-rm -rf ~/frappe ~/frappe-bench
-
-# ---------------------------------------------------------------------------
-# Phase 1 — parallelise the three slow, independent setup steps:
-#   a) system packages   b) frappe-bench pip install   c) frappe git fetch
-# ---------------------------------------------------------------------------
-
-if [ "${SKIP_SYSTEM_SETUP:-0}" != "1" ]; then
-    sudo apt-get update
-
-    # apt remove/install must run sequentially but can overlap with pip and git.
-    sudo apt-get remove -y mysql-server mysql-client
-    sudo apt-get install -y libcups2-dev redis-server mariadb-client libmariadb-dev &
-    apt_pid=$!
-
-    pip install frappe-bench &
-    pip_pid=$!
-else
-    apt_pid=
-    pip_pid=
-fi
+frappecommitish=${FRAPPE_BRANCH:-$githubbranch}
 
 mkdir frappe
-(
-  cd frappe
-  git init
-  git remote add origin "https://github.com/${frappeuser}/frappe"
-  git fetch origin "${frappecommitish}" --depth 1
-) &
-clone_pid=$!
-
-if [ -n "$apt_pid" ]; then wait $apt_pid; fi
-if [ -n "$pip_pid" ]; then wait $pip_pid; fi
-wait $clone_pid
-
 pushd frappe
+git init
+git remote add origin "https://github.com/${frappeuser}/frappe"
+git fetch origin "${frappecommitish}" --depth 1
 git checkout FETCH_HEAD
 popd
-frappe_sha=$(git -C frappe rev-parse HEAD)
 
-get_bench_cache_archive() {
-    if [ -z "$bench_cache_dir" ]; then
-        return
-    fi
+bench init --skip-assets --frappe-path ~/frappe --python "$(which python)" frappe-bench
 
-    mkdir -p "$bench_cache_dir"
-
-    # Keyed on tool versions only (NOT the frappe SHA): any recent base bench works, because
-    # restore_warm_bench fast-forwards it to the exact live develop SHA. This is what lets a
-    # constantly-moving develop still hit the cache.
-    local cache_key
-    cache_key=$(
-        {
-            uname -m
-            python --version
-            node --version
-            bench --version
-        } | sha256sum | awk '{print $1}'
-    )
-
-    echo "${bench_cache_dir}/frappe-bench-base-${cache_key}.tar.zst"
-}
-
-restore_warm_bench() {
-    bench_cache_archive=$(get_bench_cache_archive)
-    [ -n "$bench_cache_archive" ] && [ -f "$bench_cache_archive" ] || return 1
-
-    echo "Restoring base bench from ${bench_cache_archive}"
-    tar --use-compress-program=unzstd -xf "$bench_cache_archive" -C ~ || return 1
-    [ -d ~/frappe-bench/apps/frappe/.git ] || return 1
-    mkdir -p ~/frappe-bench/sites ~/frappe-bench/logs
-    [ -f ~/frappe-bench/sites/apps.txt ] || printf "frappe\n" > ~/frappe-bench/sites/apps.txt
-    [ -f ~/frappe-bench/sites/common_site_config.json ] || printf "{}\n" > ~/frappe-bench/sites/common_site_config.json
-
-    # Fast-forward the restored frappe to the EXACT live develop SHA fetched in phase 1, then
-    # rebuild only what changed. The editable install means the venv tracks the new code with
-    # no reinstall. Any failure returns non-zero so the caller falls back to a full bench init.
-    if ! (
-        cd ~/frappe-bench/apps/frappe || exit 1
-        # Phase 1 already fetched ~/frappe to the exact live develop SHA. Fetch that commit
-        # straight from it (bench init names the remote 'upstream', not 'origin', and points
-        # it at this local clone — so a plain `git fetch origin` does not work).
-        git fetch --no-tags --update-shallow "$HOME/frappe" HEAD || exit 1
-        git checkout --force FETCH_HEAD || exit 1
-    ); then
-        echo "Fast-forward to ${frappe_sha} failed; falling back to full init"
-        rm -rf ~/frappe-bench
-        return 1
-    fi
-
-    # Pick up any frappe dependency changes since the base was built (cached → fast if none),
-    # so a develop commit that bumped requirements doesn't leave a stale venv.
-    if ! ~/frappe-bench/env/bin/python -m pip install -q -e ~/frappe-bench/apps/frappe; then
-        echo "frappe dependency refresh failed; falling back to full init"
-        rm -rf ~/frappe-bench
-        return 1
-    fi
-
-    ( cd ~/frappe-bench && CI=Yes bench build --app frappe ) || { rm -rf ~/frappe-bench; return 1; }
-    return 0
-}
-
-save_warm_bench() {
-    if [ -z "${bench_cache_archive:-}" ] || [ -f "$bench_cache_archive" ]; then
-        return
-    fi
-
-    if [ -n "$bench_cache_dir" ] && [ ! -w "$bench_cache_dir" ]; then
-        echo "Skipping warm bench save because ${bench_cache_dir} is not writable"
-        return
-    fi
-
-    local tmp_archive
-    tmp_archive="${bench_cache_archive}.${$}.tmp"
-
-    echo "Saving warm bench to ${bench_cache_archive}"
-    # Keep sites/common_site_config.json (the redis ports live there — dropping it makes the
-    # restore path fall back to a default redis port that bench start never bound, so reinstall
-    # fails with "redis ... connection refused"). Only the rebuildable sites/assets is excluded;
-    # restore_warm_bench runs `bench build` to regenerate it.
-    tar \
-        --use-compress-program="zstd -T0 -3" \
-        --exclude="frappe-bench/logs" \
-        --exclude="frappe-bench/sites/assets" \
-        -cf "$tmp_archive" \
-        -C ~ frappe-bench
-    mv "$tmp_archive" "$bench_cache_archive"
-}
-
-# ---------------------------------------------------------------------------
-# Phase 2 — bench init and site setup
-# ---------------------------------------------------------------------------
-
-install_whktml() {
-    # Re-use the .deb if the wkhtmltopdf cache step already restored it.
-    if [ ! -f "$wkhtmltox_deb" ]; then
-        wget -O "$wkhtmltox_deb" https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6.1-2/wkhtmltox_0.12.6.1-2.jammy_amd64.deb
-    fi
-    sudo apt-get install -y "$wkhtmltox_deb"
-}
-if [ "${SKIP_WKHTMLTOX_SETUP:-0}" != "1" ]; then
-    install_whktml &
-    wkpid=$!
-else
-    wkpid=
-fi
-
-if ! restore_warm_bench; then
-    bench init --skip-assets --frappe-path ~/frappe --python "$(which python)" frappe-bench
-
-    cd ~/frappe-bench || exit
-
-    sed -i 's/watch:/# watch:/g' Procfile
-    sed -i 's/schedule:/# schedule:/g' Procfile
-    sed -i 's/socketio:/# socketio:/g' Procfile
-    sed -i 's/redis_socketio:/# redis_socketio:/g' Procfile
-
-    CI=Yes bench build --app frappe
-    save_warm_bench
-fi
-
-if [ -n "$wkpid" ]; then wait $wkpid; fi
-
-mkdir -p ~/frappe-bench/sites/test_site
+mkdir ~/frappe-bench/sites/test_site
 
 if [ "$DB" == "mariadb" ];then
     cp -r "${GITHUB_WORKSPACE}/.github/helper/site_config_mariadb.json" ~/frappe-bench/sites/test_site/site_config.json
-    if [ "$db_host" != "127.0.0.1" ]; then
-        sed -i "s/\"db_host\": \"127.0.0.1\"/\"db_host\": \"${db_host}\"/" ~/frappe-bench/sites/test_site/site_config.json
-    fi
 else
     cp -r "${GITHUB_WORKSPACE}/.github/helper/site_config_postgres.json" ~/frappe-bench/sites/test_site/site_config.json
 fi
 
 
 if [ "$DB" == "mariadb" ];then
-    for _ in {1..60}; do
-        if mariadb-admin ping --host "$db_host" --port 3306 -u root -proot --silent; then
-            break
-        fi
-        sleep 1
-    done
-    mariadb-admin ping --host "$db_host" --port 3306 -u root -proot --silent
+    mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL character_set_server = 'utf8mb4'"
+    mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL collation_server = 'utf8mb4_unicode_ci'"
 
-    mariadb --host "$db_host" --port 3306 -u root -proot -e "SET GLOBAL character_set_server = 'utf8mb4'"
-    mariadb --host "$db_host" --port 3306 -u root -proot -e "SET GLOBAL collation_server = 'utf8mb4_unicode_ci'"
+    mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "CREATE USER 'test_frappe'@'localhost' IDENTIFIED BY 'test_frappe'"
+    mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "CREATE DATABASE test_frappe"
+    mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "GRANT ALL PRIVILEGES ON \`test_frappe\`.* TO 'test_frappe'@'localhost'"
 
-    # Throwaway-DB durability tuning at runtime. (innodb_doublewrite is read-only on MariaDB
-    # 10.6, so it can't be disabled here — would need a server startup flag.)
-    mariadb --host "$db_host" --port 3306 -u root -proot \
-        -e "SET GLOBAL innodb_flush_log_at_trx_commit=0; SET GLOBAL sync_binlog=0;"
-
-    # Opt-in DDL speedup: a shared tablespace avoids a create+fsync per DocType table during
-    # reinstall — a big win under disk contention. But ROW_FORMAT=DYNAMIC must be accepted in
-    # the system tablespace on this MariaDB. Enable with CI_INNODB_SHARED_TABLESPACE=1; if
-    # reinstall then errors on table creation, unset it (off by default — zero risk).
-    if [ "${CI_INNODB_SHARED_TABLESPACE:-0}" = "1" ]; then
-        mariadb --host "$db_host" --port 3306 -u root -proot -e "SET GLOBAL innodb_file_per_table=0;"
-    fi
-
-    mariadb --host "$db_host" --port 3306 -u root -proot -e "CREATE USER 'test_frappe'@'${db_user_host}' IDENTIFIED BY 'test_frappe'"
-    mariadb --host "$db_host" --port 3306 -u root -proot -e "CREATE DATABASE test_frappe"
-    mariadb --host "$db_host" --port 3306 -u root -proot -e "GRANT ALL PRIVILEGES ON \`test_frappe\`.* TO 'test_frappe'@'${db_user_host}'"
-
-    mariadb --host "$db_host" --port 3306 -u root -proot -e "FLUSH PRIVILEGES"
+    mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "FLUSH PRIVILEGES"
 fi
 
 if [ "$DB" == "postgres" ];then
     echo "travis" | psql -h 127.0.0.1 -p 5432 -c "CREATE DATABASE test_frappe" -U postgres;
     echo "travis" | psql -h 127.0.0.1 -p 5432 -c "CREATE USER test_frappe WITH PASSWORD 'test_frappe'" -U postgres;
-
-    # Durability-off for speed (no fsync/synchronous_commit/full_page_writes) is applied by
-    # start-db.sh's postgres `-o` flags on every start — setup job AND each test shard — so it is
-    # NOT repeated here. The postgres workflow runs in-runner via start-db.sh, not a service
-    # container.
 fi
 
+
+install_whktml() {
+    wget -O /tmp/wkhtmltox.deb https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6.1-2/wkhtmltox_0.12.6.1-2.jammy_amd64.deb
+    sudo apt install /tmp/wkhtmltox.deb
+
+}
+install_whktml &
+wkpid=$!
+
+
 cd ~/frappe-bench || exit
 
-run_ci_step "Get payments app" bench get-app payments --branch develop
+sed -i 's/watch:/# watch:/g' Procfile
+sed -i 's/schedule:/# schedule:/g' Procfile
+sed -i 's/socketio:/# socketio:/g' Procfile
+sed -i 's/redis_socketio:/# redis_socketio:/g' Procfile
 
-# Opt-in: skip building erpnext's frontend assets. Server tests don't need them, but PDF
-# tests (print formats) do — they pass only if the PDF renderer ignores missing assets.
-# Enable with CI_SKIP_ERPNEXT_ASSETS=1 to test; if PDF tests fail, unset it.
-erpnext_get_app_args=()
-if [ "${CI_SKIP_ERPNEXT_ASSETS:-0}" = "1" ]; then erpnext_get_app_args=(--skip-assets); fi
-run_ci_step "Get erpnext app" bench get-app erpnext "${GITHUB_WORKSPACE}" "${erpnext_get_app_args[@]}"
+bench get-app payments --branch develop
+bench get-app erpnext "${GITHUB_WORKSPACE}"
 
-if [ "$TYPE" == "server" ]; then run_ci_step "Setup dev requirements" bench setup requirements --dev; fi
+if [ "$TYPE" == "server" ]; then bench setup requirements --dev; fi
 
-bench start >> ~/frappe-bench/bench_start.log 2>&1 &
+wait $wkpid
 
-# Under heavy concurrency, gunicorn's startup can delay redis coming up. reinstall and the
-# tests need redis, so wait for it (best-effort, bounded) instead of racing — contention
-# then slows the job rather than failing it.
-wait_for_redis() {
-    local cfg=~/frappe-bench/sites/common_site_config.json
-    [ -f "$cfg" ] || return 0
-    local ports port
-    ports=$(python - "$cfg" <<'PY'
-import json, re, sys
-try:
-    cfg = json.load(open(sys.argv[1]))
-except Exception:
-    sys.exit(0)
-for key in ("redis_cache", "redis_queue"):
-    match = re.search(r":(\d+)", str(cfg.get(key, "")))
-    if match:
-        print(match.group(1))
-PY
-)
-    for port in $ports; do
-        local up=0
-        for _ in $(seq 1 120); do
-            if (exec 3<>"/dev/tcp/127.0.0.1/$port") 2>/dev/null; then
-                exec 3>&- 3<&-; up=1
-                break
-            fi
-            sleep 1
-        done
-        # Fail clearly instead of letting reinstall die later on a vague socket-connection error
-        # when redis never bound.
-        [ "$up" = "1" ] || { echo "redis did not come up on port $port"; return 1; }
-    done
-}
-wait_for_redis
-
-# Site setup: build the schema (~1000 DocTypes) into the DB. This is the single-threaded-Python
-# bottleneck, but the fan-out amortises it — it runs once here in the setup job, and the test
-# shards start the DB on the baked datadir instead of repeating the reinstall.
-run_ci_step "Reinstall test site" bench --site test_site reinstall --yes
+bench start &>> ~/frappe-bench/bench_start.log &
+CI=Yes bench build --app frappe &
+bench --site test_site reinstall --yes

.github/helper/merge_po_files.py

@@ -1,52 +0,0 @@
-#!/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/postgres_compat.py

@@ -1,241 +0,0 @@
-#!/usr/bin/env python3
-"""Static guard against MySQL-only SQL that breaks on PostgreSQL.
-
-The Postgres test job is label-gated, so it does not run on every PR. This pre-commit
-hook is the always-on first line of defence: it flags the *mechanical* Postgres breaks
-that static analysis can catch reliably with a low false-positive rate.
-
-It deliberately does NOT try to catch the *semantic* divergences (loose GROUP BY,
-case-sensitive ==/IN, NULL ordering, ORDER BY ... LIMIT 1 tiebreakers, integer-division
-intent, division by a possibly-zero divisor, savepoint discipline) — those genuinely need
-the test suite or a human/Greptile reviewer. Run the full suite on a Postgres site for those.
-
-Escape hatch: put `# pg-ok` anywhere on the offending statement's line span (e.g. on a
-`SHOW INDEX` query that lives inside an `if frappe.db.db_type == "mariadb":` branch).
-
-Usage: postgres_compat.py <file.py> [<file.py> ...]   (pre-commit passes staged files)
-"""
-
-from __future__ import annotations
-
-import ast
-import re
-import sys
-
-IGNORE = "pg-ok"
-
-# Strings are only scanned for the patterns below when they have real SQL *structure*
-# (not just an English word like "select" or "from"), to keep false positives near zero.
-SQL_HINT = re.compile(
-	r"\bselect\b[\s\S]{0,800}\bfrom\b"        # SELECT ... FROM
-	r"|\bupdate\b[\s\S]{0,400}\bset\b"         # UPDATE ... SET
-	r"|\bdelete\s+from\b"
-	r"|\binsert\s+into\b"
-	r"|\bshow\s+(?:index|tables|columns)\b"
-	r"|\bfrom\s+[\"'`]?tab",                   # FROM `tabDocType`
-	re.I,
-)
-
-# MySQL-only constructs with NO frappe auto-translation. (frappe.db.sql already rewrites
-# ifnull->coalesce on all engines and backtick/locate/REGEXP on Postgres, and .like()
-# renders ILIKE — so those are NOT listed here; flagging them would be false positives.)
-SQL_PATTERNS: list[tuple[re.Pattern, str]] = [
-	(re.compile(r"\btimestamp\s*\(\s*[^,()]+,", re.I),
-	 "timestamp(date, time) is MySQL-only -> use CombineDatetime() or a precomputed datetime column"),
-	(re.compile(r"\btimediff\s*\(", re.I),
-	 "timediff() is MySQL-only -> compute the delta in Python"),
-	(re.compile(r"\bstr_to_date\s*\(", re.I),
-	 "str_to_date() is MySQL-only -> parse in Python and pass a real date"),
-	(re.compile(r"\bdate_format\s*\(", re.I),
-	 "date_format() is MySQL-only -> filter on a date range instead"),
-	(re.compile(r"\bdate_(add|sub)\s*\(", re.I),
-	 "date_add()/date_sub() are MySQL-only -> use Python date math or interval arithmetic"),
-	(re.compile(r"\bgroup_concat\s*\(", re.I),
-	 "group_concat() is MySQL-only -> use GroupConcat (string_agg) or aggregate in Python"),
-	(re.compile(r"\bperiod_diff\s*\(", re.I),
-	 "period_diff() is MySQL-only -> compute in Python"),
-	(re.compile(r"\bshow\s+index\b", re.I),
-	 "SHOW INDEX is MySQL-only -> use frappe.db.has_index() / get_column_index()"),
-	(re.compile(r"\bshow\s+(tables|columns)\b", re.I),
-	 "SHOW TABLES/COLUMNS is MySQL-only -> use frappe.db.get_tables()/table_columns / information-schema helpers"),
-	(re.compile(r"\bas\s+'[^']+'", re.I),
-	 "single-quoted column alias breaks on Postgres -> use a bare or double-quoted alias"),
-	(re.compile(r"\bif\s*\(", re.I),
-	 "SQL IF() is MySQL-only -> use CASE WHEN ... THEN ... ELSE ... END (frappe.qb.Case())"),
-	(re.compile(r"\brlike\b", re.I),
-	 "RLIKE is MySQL-only -> frappe rewrites REGEXP->~* on Postgres but NOT RLIKE; use REGEXP / .regexp() / ~"),
-	(re.compile(r"\bcast\s*\(.+?\bas\s+char\b", re.I | re.S),  # .+? spans nested parens, e.g. CAST(ABS(x) AS CHAR)
-	 "CAST(... AS CHAR) is character(1) on Postgres and truncates -> CAST AS VARCHAR (frappe Cast_(x, 'varchar'))"),
-]
-
-# UPDATE ... JOIN: both keywords in the same SQL string.
-UPDATE_JOIN = (re.compile(r"\bupdate\b", re.I), re.compile(r"\bjoin\b", re.I))
-
-MYSQL_RESULT_KEYS = {"Column_name", "Key_name", "Seq_in_index", "Non_unique", "Index_type"}
-
-SET_BOOL_FUNCS = {"set_value", "db_set"}
-
-# query-builder cast helpers: pypika Cast / frappe Cast_. A "char" target type is character(1)
-# on Postgres (truncates); "varchar" is the full-length cast.
-CAST_FUNCS = {"Cast", "Cast_"}
-
-# frappe.get_all / get_list: frappe's db_query SILENTLY drops ORDER BY for `distinct` queries on
-# Postgres (the ORDER BY column must appear in the SELECT-DISTINCT list), so `distinct=True` together
-# with a literal `order_by` is a no-op on PG and the result comes back unordered.
-DISTINCT_ORDER_FUNCS = {"get_all", "get_list"}
-
-
-def _docstring_ids(tree: ast.AST) -> set[int]:
-	"""ids of Constant nodes that are docstrings (so prose describing the rules isn't flagged)."""
-	ids: set[int] = set()
-	for node in ast.walk(tree):
-		if isinstance(node, (ast.Module, ast.FunctionDef, ast.AsyncFunctionDef, ast.ClassDef)):
-			body = getattr(node, "body", None)
-			if body and isinstance(body[0], ast.Expr) and isinstance(body[0].value, ast.Constant) and isinstance(body[0].value.value, str):
-				ids.add(id(body[0].value))
-	return ids
-
-
-class Visitor(ast.NodeVisitor):
-	def __init__(self, lines: list[str], docstrings: set[int]):
-		self.lines = lines
-		self.docstrings = docstrings
-		self.violations: list[tuple[int, str]] = []
-
-	def _ignored(self, node: ast.AST) -> bool:
-		start = getattr(node, "lineno", 1)
-		end = getattr(node, "end_lineno", start) or start
-		# honour `# pg-ok` anywhere on the node's line span, the line just above (the enclosing
-		# call, e.g. `frappe.db.sql(  # pg-ok`), or the line just below (a multi-line call's `)  # pg-ok`).
-		lo = max(0, start - 2)
-		return any(IGNORE in self.lines[i] for i in range(lo, min(end + 1, len(self.lines))))
-
-	def _flag(self, node: ast.AST, msg: str) -> None:
-		if not self._ignored(node):
-			self.violations.append((getattr(node, "lineno", 1), msg))
-
-	def _scan_sql(self, text: str, node: ast.AST) -> None:
-		if not SQL_HINT.search(text):
-			return
-		for pattern, msg in SQL_PATTERNS:
-			if pattern.search(text):
-				self._flag(node, msg)
-		if UPDATE_JOIN[0].search(text) and UPDATE_JOIN[1].search(text):
-			self._flag(node, "UPDATE ... JOIN is MySQL-only -> use a correlated subquery (WHERE ... IN/EXISTS)")
-
-	def visit_Constant(self, node: ast.Constant) -> None:
-		# plain string literals, incl. `"...".format()` and `"..." % (...)` templates
-		if isinstance(node.value, str) and id(node) not in self.docstrings:
-			self._scan_sql(node.value, node)
-		self.generic_visit(node)
-
-	def visit_JoinedStr(self, node: ast.JoinedStr) -> None:
-		# f-string: scan its STATIC text (interpolated values become a placeholder) so MySQL-isms
-		# in dynamic SQL are caught, without flagging safe interpolation of identifiers.
-		text = "".join(
-			v.value if isinstance(v, ast.Constant) and isinstance(v.value, str) else " ? "
-			for v in node.values
-		)
-		self._scan_sql(text, node)
-		# don't recurse: child literal chunks would otherwise be re-scanned individually
-
-	def visit_Call(self, node: ast.Call) -> None:
-		fn = node.func
-		name = fn.attr if isinstance(fn, ast.Attribute) else (fn.id if isinstance(fn, ast.Name) else "")
-
-		# row.get("Column_name") — MySQL SHOW INDEX result key
-		if name == "get" and node.args and isinstance(node.args[0], ast.Constant) and node.args[0].value in MYSQL_RESULT_KEYS:
-			self._flag(node, f'"{node.args[0].value}" is a MySQL SHOW INDEX result key -> use frappe.db.has_index()/get_column_index()')
-
-		# set_value(..., True) / db_set("field", True) on a Check (int) column.
-		# Only the field *value* arg carries bool->smallint risk — NOT trailing flags like
-		# update_modified. db_set(field, value, update_modified, ...) -> value at args[1] (or a dict
-		# at args[0]); set_value(dt, dn, field, value, ...) -> value at args[3] (or a dict at args[2]).
-		if name in SET_BOOL_FUNCS:
-			value_idx, dict_idx = (1, 0) if name == "db_set" else (3, 2)
-			dict_arg = (
-				node.args[dict_idx]
-				if len(node.args) > dict_idx and isinstance(node.args[dict_idx], ast.Dict)
-				else None
-			)
-			if dict_arg is not None:
-				for v in dict_arg.values:
-					if isinstance(v, ast.Constant) and isinstance(v.value, bool):
-						self._flag(node, f"{name}(...) sets an int/Check column with a bool in a dict -> pass 1/0 (Postgres rejects bool->smallint)")
-			elif len(node.args) > value_idx:
-				a = node.args[value_idx]
-				if isinstance(a, ast.Constant) and isinstance(a.value, bool):
-					self._flag(node, f"{name}(..., {a.value}) sets an int/Check column with a bool -> pass 1/0 (Postgres rejects bool->smallint)")
-
-		# frappe.get_all/get_list(..., distinct=True, order_by="<col>") -> ORDER BY is silently dropped
-		# for distinct queries on Postgres, so the result is unordered there. Sort in python instead
-		# (e.g. sorted(frappe.get_all(..., distinct=True), key=str.casefold)). An empty order_by="" (the
-		# explicit "suppress the injected default" idiom) and a dynamic/variable order_by are not flagged.
-		if name in DISTINCT_ORDER_FUNCS:
-			has_distinct = any(
-				kw.arg == "distinct" and isinstance(kw.value, ast.Constant) and kw.value.value
-				for kw in node.keywords
-			)
-			order_kw = next((kw for kw in node.keywords if kw.arg == "order_by"), None)
-			has_literal_order = (
-				order_kw is not None
-				and isinstance(order_kw.value, ast.Constant)
-				and isinstance(order_kw.value.value, str)
-				and order_kw.value.value.strip()
-			)
-			if has_distinct and has_literal_order:
-				self._flag(node, f"{name}(distinct=True, order_by=...) -> frappe drops ORDER BY for distinct queries on Postgres; sort in python instead, e.g. sorted(..., key=str.casefold)")
-
-		# query-builder .rlike(...): pypika emits the MySQL-only RLIKE operator, which frappe does
-		# NOT translate for Postgres (it rewrites only REGEXP -> ~*).
-		if name == "rlike":
-			self._flag(node, ".rlike() emits MySQL-only RLIKE (not translated on Postgres) -> use .regexp() (rewritten to ~*) or .like()")
-
-		# Cast(col, "char") / Cast_(col, "char"): on Postgres a bare CHAR is character(1) and truncates
-		# (e.g. CAST(12 AS CHAR) -> '1'); use "varchar" for a full-length string cast.
-		if name in CAST_FUNCS:
-			for arg in (*node.args, *(kw.value for kw in node.keywords)):
-				if isinstance(arg, ast.Constant) and isinstance(arg.value, str) and arg.value.strip().lower() == "char":
-					self._flag(node, f"{name}(..., 'char') is character(1) on Postgres and truncates -> use 'varchar'")
-
-		self.generic_visit(node)
-
-	def visit_Subscript(self, node: ast.Subscript) -> None:
-		key = node.slice
-		if isinstance(key, ast.Constant) and key.value in MYSQL_RESULT_KEYS:
-			self._flag(node, f'"{key.value}" is a MySQL SHOW INDEX result key -> use frappe.db.has_index()/get_column_index()')
-		self.generic_visit(node)
-
-
-def check_file(path: str) -> list[str]:
-	try:
-		# nosemgrep: frappe-semgrep-rules.rules.security.frappe-security-file-traversal -- dev-only lint tool; `path` is a source file supplied by pre-commit, not user input
-		src = open(path, encoding="utf-8").read()
-	except (OSError, UnicodeDecodeError):
-		return []
-	try:
-		tree = ast.parse(src, filename=path)
-	except SyntaxError:
-		return []  # check-ast hook reports real syntax errors
-	v = Visitor(src.splitlines(), _docstring_ids(tree))
-	v.visit(tree)
-	return [f"{path}:{line}: [pg-compat] {msg}" for line, msg in sorted(set(v.violations))]
-
-
-def main(argv: list[str]) -> int:
-	out: list[str] = []
-	for path in argv:
-		if path.endswith(".py"):
-			out.extend(check_file(path))
-	if out:
-		print("\n".join(out))
-		print(
-			f"\n{len(out)} PostgreSQL-incompatibility issue(s). Fix them, or add `# pg-ok` to a "
-			"line that is intentionally MariaDB-only (e.g. inside an `if frappe.db.db_type == 'mariadb':` branch)."
-		)
-		return 1
-	return 0
-
-
-if __name__ == "__main__":
-	raise SystemExit(main(sys.argv[1:]))

.github/helper/site_config_postgres.json

@@ -13,6 +13,6 @@
  "root_login": "postgres",
  "root_password": "travis",
  "host_name": "http://test_site:8000",
- "install_apps": ["payments", "erpnext"],
+ "install_apps": ["erpnext"],
  "throttle_user_limit": 100
 }

.github/helper/start-db.sh

@@ -1,79 +0,0 @@
-#!/bin/bash
-#
-# Run MariaDB INSIDE the runner container, on a datadir we control. Because the datadir can be
-# packaged into the bench artifact, test shards start an already-loaded server instead of
-# replaying a SQL dump (the ~60s hydrate restore). Each shard gets its own copy → isolation kept.
-#
-# CI_DB_DATADIR picks the path:
-#   - setup job:  /home/ci/db-data  (OUTSIDE the bench, so install.sh's `rm -rf ~/frappe-bench`
-#                 doesn't wipe it; it's moved into the bench just before packaging)
-#   - test shard: ~/frappe-bench/mariadb-data  (where the artifact untar'd it)
-#
-# Idempotent: inits a fresh datadir if absent (setup), else starts on the existing one (shards).
-#
-set -e
-
-ci_user="${ERPNEXT_CI_USER:-frappe}"
-
-# Re-exec as the ci user so mariadbd and the datadir are owned consistently (root mariadbd is
-# refused anyway). Mirrors install.sh's user switch.
-if [ "$(id -u)" = "0" ] && [ "${SKIP_SYSTEM_SETUP:-0}" = "1" ] && [ "$ci_user" != "root" ]; then
-    exec su -m "$ci_user" -s /bin/bash -c \
-        "ERPNEXT_CI_USER='$ci_user' CI_DB_DATADIR='${CI_DB_DATADIR:-}' DB='${DB:-}' bash '$0'"
-fi
-
-# --- PostgreSQL (GitHub-hosted CI): run in-runner on a PGDATA so it bakes into the artifact,
-# same idea as the mariadb datadir. Trust auth (throwaway CI) skips password setup; durability
-# off for speed. Postgres is preinstalled on ubuntu-latest under /usr/lib/postgresql/<ver>/bin.
-if [ "${DB:-mariadb}" = "postgres" ]; then
-    PG_BIN=$(ls -d /usr/lib/postgresql/*/bin 2>/dev/null | sort -V | tail -1)
-    [ -n "$PG_BIN" ] && export PATH="$PG_BIN:$PATH"
-    PGDATA="${CI_DB_DATADIR:-$HOME/frappe-bench/pgdata}"
-    if [ ! -d "$PGDATA/base" ]; then
-        initdb -D "$PGDATA" -U postgres --auth-local=trust --auth-host=trust >/dev/null
-        echo "host all all 127.0.0.1/32 trust" >> "$PGDATA/pg_hba.conf"
-    fi
-    pg_ctl -D "$PGDATA" -w -o "-p 5432 -c listen_addresses=127.0.0.1 -c unix_socket_directories=$PGDATA -c fsync=off -c synchronous_commit=off -c full_page_writes=off" start
-    echo "PostgreSQL up in-runner (pgdata=$PGDATA)"
-    exit 0
-fi
-
-# --- MariaDB ---
-DATADIR="${CI_DB_DATADIR:-$HOME/frappe-bench/mariadb-data}"
-SOCK="$DATADIR/mysqld.sock"
-fresh=0
-
-if [ ! -d "$DATADIR/mysql" ]; then
-    mkdir -p "$DATADIR"
-    mariadb-install-db --no-defaults --datadir="$DATADIR" \
-        --auth-root-authentication-method=normal --skip-test-db >/dev/null 2>&1
-    fresh=1
-fi
-
-# Throwaway-CI durability off; bind TCP 127.0.0.1:3306 so bench/install.sh connect as usual.
-mariadbd --no-defaults --datadir="$DATADIR" --socket="$SOCK" --pid-file="$DATADIR/mysqld.pid" \
-    --port=3306 --bind-address=127.0.0.1 \
-    --innodb-flush-log-at-trx-commit=0 --sync-binlog=0 --skip-log-bin \
-    > "$HOME/mariadb.log" 2>&1 &
-
-up=0
-for _ in $(seq 1 60); do
-    if mariadb-admin --socket="$SOCK" ping --silent 2>/dev/null; then up=1; break; fi
-    sleep 1
-done
-# Fail loudly instead of letting the loop fall through (exit 0 of the last `sleep`) into SQL that
-# would error with a vague socket-connection failure.
-[ "$up" = "1" ] || { echo "mariadbd did not come up on $SOCK"; cat "$HOME/mariadb.log" 2>/dev/null; exit 1; }
-
-if [ "$fresh" = "1" ]; then
-    # A fresh datadir has only a password-less root@localhost. Give it the password install.sh
-    # uses, plus a TCP-reachable root@127.0.0.1, so the rest of install.sh works unchanged.
-    mariadb --no-defaults --socket="$SOCK" -u root <<'SQL'
-ALTER USER 'root'@'localhost' IDENTIFIED BY 'root';
-CREATE USER IF NOT EXISTS 'root'@'127.0.0.1' IDENTIFIED BY 'root';
-GRANT ALL PRIVILEGES ON *.* TO 'root'@'127.0.0.1' WITH GRANT OPTION;
-FLUSH PRIVILEGES;
-SQL
-fi
-
-echo "MariaDB up in-container (datadir=$DATADIR, fresh=$fresh)"

.github/helper/sync_hotfix_translations.sh

@@ -1,121 +0,0 @@
-#!/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

@@ -1,70 +0,0 @@
-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/crowdin-actions-download-translations.yml

@@ -1,51 +0,0 @@
-name: Download translations from Crowdin
-
-on:
-  schedule:
-    - cron: "0 4 * * 1"
-  workflow_dispatch:
-
-concurrency:
-  group: crowdin-download
-  cancel-in-progress: false
-
-permissions:
-  contents: read
-
-jobs:
-  download-translations:
-    name: Download translations into ${{ matrix.branch }}
-    runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        branch: ["develop", "version-16-hotfix"]
-
-    steps:
-      - name: Checkout ${{ matrix.branch }}
-        uses: actions/checkout@v6
-        with:
-          ref: ${{ matrix.branch }}
-          fetch-depth: 0
-          persist-credentials: false
-
-      - name: Download translations and open PR
-        uses: crowdin/github-action@8f01d54f70f1713ee3f09d82c2bbb2daeac28689 # v2.17.1
-        with:
-          config: crowdin.yml
-          upload_sources: false
-          upload_translations: false
-          download_translations: true
-          crowdin_branch_name: "[frappe.erpnext] ${{ matrix.branch }}"
-          skip_ref_checkout: true
-          localization_branch_name: l10n_crowdin_${{ matrix.branch }}
-          create_pull_request: true
-          pull_request_base_branch_name: ${{ matrix.branch }}
-          commit_message: "fix: sync translations from crowdin"
-          pull_request_title: "fix: sync translations from crowdin (${{ matrix.branch }})"
-          pull_request_labels: "translation, skip-release-notes"
-          pull_request_reviewers: barredterra
-        env:
-          GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}
-          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
-          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.github/workflows/crowdin-actions-update-main-pot.yml

@@ -1,54 +0,0 @@
-name: Upload main.pot to Crowdin
-
-on:
-  push:
-    branches:
-      - develop
-      - version-16-hotfix
-    paths:
-      - "erpnext/locale/main.pot"
-  workflow_dispatch:
-
-concurrency:
-  group: crowdin-upload-${{ github.ref_name }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  upload-sources:
-    name: Upload sources from ${{ github.ref_name }}
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout ${{ github.ref_name }}
-        uses: actions/checkout@v6
-
-      - name: Restore Crowdin cache
-        uses: actions/cache/restore@v6
-        with:
-          path: .crowdin
-          key: crowdin-${{ github.ref_name }}
-          restore-keys: crowdin-${{ github.ref_name }}-
-
-      - name: Upload main.pot to Crowdin
-        uses: crowdin/github-action@8f01d54f70f1713ee3f09d82c2bbb2daeac28689 # v2.17.1
-        with:
-          config: crowdin.yml
-          upload_sources: true
-          upload_translations: false
-          download_translations: false
-          create_pull_request: false
-          crowdin_branch_name: "[frappe.erpnext] ${{ github.ref_name }}"
-          upload_sources_args: "--cache"
-        env:
-          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
-          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
-
-      - name: Save Crowdin cache
-        uses: actions/cache/save@v6
-        if: always()
-        with:
-          path: .crowdin
-          key: crowdin-${{ github.ref_name }}-${{ github.run_id }}

.github/workflows/linters.yml

@@ -21,7 +21,7 @@ jobs:
           cache: pip
 
       - name: Install and Run Pre-commit
-        uses: pre-commit/action@v3.0.1
+        uses: pre-commit/action@v3.0.0
 
   semgrep:
     name: semgrep

.github/workflows/notify-support-on-release.yml

@@ -1,45 +0,0 @@
-name: Notify Support on PR release
-
-on:
-  issue_comment:
-    types: [created]
-
-permissions: {}
-
-jobs:
-  notify-support:
-    if: >-
-      github.event.issue.pull_request
-      && github.event.comment.user.id == 28699486
-      && contains(github.event.comment.body, 'This PR is included in version')
-    runs-on: ubuntu-latest
-    timeout-minutes: 2
-
-    steps:
-      - name: Notify support.frappe.io
-        env:
-          COMMENT_ID: ${{ github.event.comment.id }}
-          PR_NUMBER: ${{ github.event.issue.number }}
-          REPOSITORY: ${{ github.repository }}
-          SUPPORT_FRAPPE_AUTH: ${{ secrets.SUPPORT_FRAPPE_AUTH }}
-        run: |
-          payload="$(
-            jq -n \
-              --arg repository "$REPOSITORY" \
-              --argjson pr_number "$PR_NUMBER" \
-              --argjson comment_id "$COMMENT_ID" \
-              '{
-                repository: $repository,
-                pr_number: $pr_number,
-                comment_id: $comment_id
-              }'
-          )"
-
-          curl --fail-with-body \
-            --retry 3 \
-            --retry-all-errors \
-            --request POST \
-            --header "Authorization: $SUPPORT_FRAPPE_AUTH" \
-            --header "Content-Type: application/json" \
-            --data "$payload" \
-            "https://support.frappe.io/api/method/notify_pr_release"

.github/workflows/patch.yml

@@ -65,22 +65,6 @@ jobs:
       - name: Add to Hosts
         run: echo "127.0.0.1 test_site" | sudo tee -a /etc/hosts
 
-      # The v14 baseline backup is a fixed published file — cache it instead of re-downloading
-      # it from the GitHub release every run.
-      - name: Cache erpnext v14 backup
-        id: cache-v14
-        uses: actions/cache@v4
-        with:
-          path: ~/erpnext-v14.sql.gz
-          key: erpnext-v14-sql-gz
-
-      - name: Download erpnext v14 backup
-        if: steps.cache-v14.outputs.cache-hit != 'true'
-        run: |
-          curl -fSL --retry 5 --retry-all-errors --retry-delay 5 \
-            -o ~/erpnext-v14.sql.gz \
-            https://github.com/frappe/erpnext/releases/download/v14-baseline/erpnext-v14.sql.gz
-
       - name: Cache pip
         uses: actions/cache@v4
         with:
@@ -121,8 +105,6 @@ jobs:
         env:
           DB: mariadb
           TYPE: server
-          # Anonymous git to github.com gets throttled to a 401; authenticate the clones.
-          CI_GITHUB_TOKEN: ${{ github.token }}
 
       - name: Run Patch Tests
         run: |
@@ -131,20 +113,12 @@ jobs:
           jq 'del(.install_apps)' ~/frappe-bench/sites/test_site/site_config.json > tmp.json
           mv tmp.json ~/frappe-bench/sites/test_site/site_config.json
 
-          bench --site test_site --force restore ~/erpnext-v14.sql.gz
+          wget https://frappe.io/files/erpnext-v14.sql.gz
+          bench --site test_site --force restore ~/frappe-bench/erpnext-v14.sql.gz
 
           git -C "apps/frappe" remote set-url upstream https://github.com/frappe/frappe.git
           git -C "apps/erpnext" remote set-url upstream https://github.com/frappe/erpnext.git
 
-          # Start every bench process except the background workers. If workers run during a
-          # migrate, they pick up the orphan-link cleanup jobs it enqueues and race its schema
-          # changes, which fails with MySQL 1412 "Table definition has changed". Redis and the
-          # other services stay up; the queued jobs simply wait and are harmless here.
-          function start_bench_without_workers() {
-            local procs
-            procs=$(awk -F: '/^[a-z_]+:/ && $1 !~ /worker/ {print $1}' ~/frappe-bench/Procfile)
-            honcho start -f ~/frappe-bench/Procfile $procs &>> ~/frappe-bench/bench_start.log &
-          }
 
           function update_to_version() {
             version=$1
@@ -160,11 +134,10 @@ jobs:
 
             # Resetup env and install apps
             pgrep honcho | xargs kill
-            sleep 10
             rm -rf ~/frappe-bench/env
             bench -v setup env --python python$2
             bench pip install -e ./apps/erpnext
-            start_bench_without_workers
+            bench start &>> ~/frappe-bench/bench_start.log &
 
             bench --site test_site migrate
           }
@@ -173,30 +146,7 @@ jobs:
           update_to_version 16 3.14
 
           echo "Updating to latest version"
-          fallback_to_develop=0
-          if [ -n "${GITHUB_BASE_REF:-}" ]; then
-            frappe_ref="refs/heads/$GITHUB_BASE_REF"
-            fallback_to_develop=1
-          elif [ "${GITHUB_REF_TYPE:-}" = "branch" ]; then
-            frappe_ref="$GITHUB_REF"
-            fallback_to_develop=1
-          elif [ "${GITHUB_REF_TYPE:-}" = "tag" ]; then
-            frappe_ref="$GITHUB_REF"
-          else
-            echo "Unsupported GitHub ref type: '${GITHUB_REF_TYPE:-unset}'"
-            exit 1
-          fi
-
-          ls_remote_status=0
-          git -C "apps/frappe" ls-remote --exit-code upstream "$frappe_ref" >/dev/null \
-            || ls_remote_status=$?
-          if [ "$ls_remote_status" -eq 2 ] && [ "$fallback_to_develop" -eq 1 ]; then
-            echo "frappe has no '$frappe_ref'; falling back to develop"
-            frappe_ref=refs/heads/develop
-          elif [ "$ls_remote_status" -ne 0 ]; then
-            exit "$ls_remote_status"
-          fi
-          git -C "apps/frappe" fetch --depth 1 upstream "$frappe_ref"
+          git -C "apps/frappe" fetch --depth 1 upstream "${GITHUB_BASE_REF:-${GITHUB_REF##*/}}"
           git -C "apps/frappe" checkout -q -f FETCH_HEAD
           git -C "apps/erpnext" checkout -q -f "$GITHUB_SHA"
 
@@ -204,7 +154,7 @@ jobs:
           rm -rf ~/frappe-bench/env
           bench -v setup env
           bench pip install -e ./apps/erpnext
-          start_bench_without_workers
+          bench start &>> ~/frappe-bench/bench_start.log &
 
           bench --site test_site migrate
 

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

@@ -1,27 +0,0 @@
-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@5928f84d6bc9094f9ad6e2c5780f01c0044b800e # v1.1.1
-        with:
-          hidden-po-files: eo.po

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

@@ -1,52 +0,0 @@
-# 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/run-individual-tests.yml

@@ -129,8 +129,6 @@ jobs:
           TYPE: server
           FRAPPE_USER: ${{ github.event.inputs.user }}
           FRAPPE_BRANCH: ${{ github.event.inputs.branch }}
-          # Anonymous git to github.com gets throttled to a 401; authenticate the clones.
-          CI_GITHUB_TOKEN: ${{ github.token }}
 
       - name: Run Tests
         run: |

.github/workflows/server-tests-mariadb-faux.yml

@@ -13,7 +13,6 @@ on:
       - 'crowdin.yml'
       - '.coderabbit.yml'
       - '.mergify.yml'
-      - '**.po'
 
 permissions:
   contents: read

.github/workflows/server-tests-mariadb.yml

@@ -13,7 +13,6 @@ on:
       - 'crowdin.yml'
       - '.coderabbit.yml'
       - '.mergify.yml'
-      - '**.po'
   schedule:
     # Run everday at midnight UTC / 5:30 IST
     - cron: "0 0 * * *"
@@ -32,49 +31,47 @@ on:
 
 permissions:
   contents: read
-  packages: read
 
 concurrency:
   group: server-mariadb-develop-${{ github.event_name }}-${{ github.event.number || github.event_name == 'workflow_dispatch' && github.run_id || '' }}
   cancel-in-progress: true
 
-# Shared across both jobs. Both run in the SAME CI image so the bench lives at the identical
-# path (/home/ci/frappe-bench) on the setup runner and the test shards — that's what makes the
-# packaged Python venv portable between them.
-env:
-  TZ: 'Asia/Kolkata'
-  DEBIAN_FRONTEND: noninteractive
-  NODE_ENV: "production"
-  WITH_COVERAGE: ${{ github.event_name != 'pull_request' }}
-  ERPNEXT_CI_USER: ci
-  PIP_CACHE_DIR: /home/ci/.cache/pip
-  npm_config_cache: /home/ci/.cache/npm
-  YARN_CACHE_FOLDER: /home/ci/.cache/yarn
-  UV_CACHE_DIR: /home/ci/.cache/uv
-
 jobs:
-  # Build the bench (clone + pip + yarn + assets) and reinstall test_site ONCE, on a free
-  # GitHub-hosted runner, then publish the whole bench (with a DB dump baked in) as an artifact.
-  # The expensive, non-parallelisable work happens here exactly once instead of on every shard.
-  setup:
-    name: Build & reinstall (setup)
-    # Dedicated scale set (fat cpu request) so the build+reinstall runs at full speed, uncontended
-    # by the many thin test shards. Same CI image + /home/ci path + 127.0.0.1 DB as the shards,
-    # so the packaged bench (and its venv) transplants cleanly.
-    runs-on: erpnext-arc-setup
-    timeout-minutes: 40
-    container:
-      image: ghcr.io/frappe/erpnext-ci-mariadb:py3.14-node24
-      credentials:
-        username: ${{ secrets.GHCR_USERNAME || github.actor }}
-        password: ${{ secrets.GHCR_TOKEN || github.token }}
-    defaults:
-      run:
-        shell: bash
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    env:
+      TZ: 'Asia/Kolkata'
+      NODE_ENV: "production"
+      WITH_COVERAGE: ${{ github.event_name != 'pull_request' }}
+
+    strategy:
+      fail-fast: false
+
+      matrix:
+        container: [1, 2, 3, 4]
+
+    name: Python Unit Tests
+
+    services:
+      mysql:
+        image: mariadb:10.6
+        env:
+          TZ: 'Asia/Kolkata'
+          MARIADB_ROOT_PASSWORD: 'root'
+        ports:
+          - 3306:3306
+        options: --health-cmd="mariadb-admin ping" --health-interval=5s --health-timeout=2s --health-retries=3
+
     steps:
       - name: Clone
         uses: actions/checkout@v6
 
+      - name: Setup Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: '3.14'
+
       - name: Check for valid Python & Merge Conflicts
         run: |
           python -m compileall -fq "${GITHUB_WORKSPACE}"
@@ -83,17 +80,47 @@ jobs:
               exit 1
           fi
 
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          check-latest: true
+
       - name: Add to Hosts
         run: echo "127.0.0.1 test_site" | sudo tee -a /etc/hosts
 
-      # MariaDB runs in-container on a datadir OUTSIDE the bench, because install.sh's next step
-      # does `rm -rf ~/frappe-bench`. After the reinstall, the datadir is moved into the bench so
-      # it ships in the artifact — test shards then start an already-loaded server (no restore).
-      - name: Start DB
-        run: bash ${GITHUB_WORKSPACE}/.github/helper/start-db.sh
+      - name: Cache pip
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+            ${{ runner.os }}-
+
+      - name: Cache node modules
+        uses: actions/cache@v4
         env:
-          SKIP_SYSTEM_SETUP: "1"
-          CI_DB_DATADIR: /home/ci/db-data
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v4
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
       - name: Install
         run: bash ${GITHUB_WORKSPACE}/.github/helper/install.sh
@@ -102,116 +129,26 @@ jobs:
           TYPE: server
           FRAPPE_USER: ${{ github.event.inputs.user }}
           FRAPPE_BRANCH: ${{ github.event.client_payload.sha || github.event.inputs.branch }}
-          # Anonymous git to github.com gets throttled to a 401; authenticate the clones.
-          CI_GITHUB_TOKEN: ${{ github.token }}
-          DB_HOST: 127.0.0.1
-          DB_USER_HOST: '%'
-          WKHTMLTOX_DEB: /tmp/wkhtmltox.deb
-          SKIP_SYSTEM_SETUP: "1"
-          SKIP_WKHTMLTOX_SETUP: "1"
-
-      - name: Warm up test data
-        run: |
-          su -m "${ERPNEXT_CI_USER:-frappe}" -s /bin/bash <<'EOF'
-          cd ~/frappe-bench/
-          bench --site test_site run-tests --lightmode --module erpnext.tests.bootstrap_test_data
-          EOF
-
-      # Clean shutdown (consistent InnoDB datadir), then stage it inside the bench for packaging.
-      - name: Stop DB and stage datadir
-        run: |
-          mariadb-admin -h 127.0.0.1 -P 3306 -u root -proot shutdown || true
-          for _ in $(seq 1 30); do [ -f /home/ci/db-data/mysqld.pid ] || break; sleep 1; done
-          # Don't bake a dirty datadir — fail if mariadbd didn't finish stopping, rather than ship
-          # an inconsistent datadir the shards would have to crash-recover.
-          [ -f /home/ci/db-data/mysqld.pid ] && { echo "mariadbd did not shut down cleanly"; exit 1; }
-          mv /home/ci/db-data /home/ci/frappe-bench/mariadb-data
-
-      # Package the whole bench (apps, venv, node_modules, sites, the DB dump, and hydrate.sh)
-      # into one artifact for the test shards to consume.
-      # Single-node hand-off: stage the bench on a node-local hostPath instead of round-tripping
-      # through GitHub artifact storage (~60s/shard). Setup and shards share the same disk, so
-      # the shards just untar it locally. NOTE: this assumes one node — a shard on a different
-      # node could not read this path (then you'd need GitHub artifacts or an NFS/RWX volume).
-      - name: Stage bench on node (hostPath)
-        run: |
-          cp "${GITHUB_WORKSPACE}/.github/helper/hydrate.sh" /home/ci/frappe-bench/hydrate.sh
-          cp "${GITHUB_WORKSPACE}/.github/helper/start-db.sh" /home/ci/frappe-bench/start-db.sh
-          mkdir -p /opt/ci-bench-staging
-          # self-clean: drop bench tars from runs older than 2h
-          find /opt/ci-bench-staging -maxdepth 1 -name '*.tar.gz' -mmin +120 -delete 2>/dev/null || true
-          # Exclude .git/node_modules; the mariadb-data datadir IS included (the pre-loaded DB).
-          tar czpf "/opt/ci-bench-staging/${GITHUB_RUN_ID}.tar.gz" -C /home/ci \
-            --exclude='.git' --exclude='node_modules' frappe-bench
-          ls -lh "/opt/ci-bench-staging/${GITHUB_RUN_ID}.tar.gz"
-
-  # Fan-out: each shard downloads the bench, untars it, starts MariaDB on the baked datadir, and
-  # runs its slice of the suite. No clone, no build, no reinstall, no DB dump restore on the shards.
-  test:
-    name: Python Unit Tests
-    needs: setup
-    runs-on: erpnext-arc
-    timeout-minutes: 60
-    container:
-      image: ghcr.io/frappe/erpnext-ci-mariadb:py3.14-node24
-      credentials:
-        username: ${{ secrets.GHCR_USERNAME || github.actor }}
-        password: ${{ secrets.GHCR_TOKEN || github.token }}
-    defaults:
-      run:
-        shell: bash
-
-    strategy:
-      fail-fast: false
-      matrix:
-        container: [1, 2, 3, 4]
-
-    steps:
-      - name: Add to Hosts
-        run: echo "127.0.0.1 test_site" | sudo tee -a /etc/hosts
-
-      # Read the bench straight from the node-local hostPath the setup job staged it on — no
-      # GitHub download. -p preserves the ci (uid 1001) ownership so bench runs as ci cleanly.
-      - name: Untar bench from node (hostPath)
-        run: |
-          tar xzpf "/opt/ci-bench-staging/${GITHUB_RUN_ID}.tar.gz" -C /home/ci
-          ls -ld /home/ci/frappe-bench
-
-      - name: Hydrate (start DB on baked datadir + bench start)
-        run: bash /home/ci/frappe-bench/hydrate.sh
-        env:
-          DB_HOST: 127.0.0.1
-          SKIP_SYSTEM_SETUP: "1"
 
       - name: Run Tests
-        run: |
-          su -m "${ERPNEXT_CI_USER:-frappe}" -s /bin/bash <<'EOF'
-          cd ~/frappe-bench/
-          coverage_flag=""
-          if [ "$WITH_COVERAGE" = "true" ]; then coverage_flag="--with-coverage"; fi
-          bench --site test_site run-parallel-tests --lightmode --app erpnext \
-            --total-builds ${{ strategy.job-total }} \
-            --build-number ${{ matrix.container }} \
-            $coverage_flag
-          EOF
+        run: 'cd ~/frappe-bench/ && bench --site test_site run-parallel-tests --lightmode --app erpnext --total-builds ${{ strategy.job-total }} --build-number ${{ matrix.container }} --with-coverage'
         env:
           TYPE: server
 
+
       - name: Show bench output
         if: ${{ always() }}
         run: cat ~/frappe-bench/bench_start.log || true
 
       - name: Upload coverage data
-        if: ${{ env.WITH_COVERAGE == 'true' }}
         uses: actions/upload-artifact@v4
         with:
           name: coverage-${{ matrix.container }}
-          path: /home/ci/frappe-bench/sites/coverage.xml
+          path: /home/runner/frappe-bench/sites/coverage.xml
 
   coverage:
     name: Coverage Wrap Up
-    needs: [test]
-    if: ${{ github.event_name != 'pull_request' }}
+    needs: test
     runs-on: ubuntu-latest
     steps:
       - name: Clone

.github/workflows/server-tests-postgres.yml

@@ -1,12 +1,7 @@
 name: Server (Postgres)
 
 on:
-  schedule:
-    # 03:00 AM IST daily (21:30 UTC the previous day)
-    - cron: "30 21 * * *"
   pull_request:
-    # 'labeled' so adding the 'postgres' label to an already-open PR re-triggers the run.
-    types: [opened, reopened, synchronize, labeled]
     paths-ignore:
       - '**.js'
       - '**.md'
@@ -14,7 +9,7 @@ on:
       - 'crowdin.yml'
       - '.coderabbit.yml'
       - '.mergify.yml'
-  workflow_dispatch:
+    types: [opened, labelled, synchronize, reopened]
 
 concurrency:
   group: server-postgres-develop-${{ github.event_name }}-${{ github.event.number || github.event_name == 'workflow_dispatch' && github.run_id || '' }}
@@ -23,31 +18,41 @@ concurrency:
 permissions:
   contents: read
 
-# Postgres CI stays on GitHub-hosted (free, full-speed VM per shard) but follows the same fan-out
-# we built for MariaDB: build the bench + reinstall ONCE in the setup job, bake the PostgreSQL
-# PGDATA into the artifact, and have 4 test shards start Postgres on that datadir — no per-shard
-# clone/build/reinstall/restore. Python is pinned so the venv transplants between VMs.
-env:
-  TZ: 'Asia/Kolkata'
-  NODE_ENV: "production"
-  PYTHON_VERSION: '3.14'
-
 jobs:
-  setup:
-    name: Build & reinstall (setup)
+  test:
+    if: ${{ contains(github.event.pull_request.labels.*.name, 'postgres') }}
     runs-on: ubuntu-latest
-    # Runs on the daily schedule (and workflow_dispatch). On PRs it runs ONLY when the PR carries
-    # the 'postgres' label — the test job needs setup, so it's skipped too when this is.
-    if: github.event_name != 'pull_request' || contains(github.event.pull_request.labels.*.name, 'postgres')
-    timeout-minutes: 40
+    timeout-minutes: 60
+
+    strategy:
+      fail-fast: false
+      matrix:
+       container: [1]
+
+    name: Python Unit Tests
+
+    services:
+      postgres:
+        image: postgres:13.3
+        env:
+          POSTGRES_PASSWORD: travis
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          - 5432:5432
+
     steps:
+
       - name: Clone
         uses: actions/checkout@v6
 
       - name: Setup Python
         uses: actions/setup-python@v6
         with:
-          python-version: ${{ env.PYTHON_VERSION }}
+          python-version: '3.14'
 
       - name: Check for valid Python & Merge Conflicts
         run: |
@@ -66,135 +71,48 @@ jobs:
       - name: Add to Hosts
         run: echo "127.0.0.1 test_site" | sudo tee -a /etc/hosts
 
-      - name: Cache deps (uv/pip/npm/yarn)
+      - name: Cache pip
         uses: actions/cache@v4
         with:
-          path: |
-            ~/.cache/uv
-            ~/.cache/pip
-            ~/.npm
-            ~/.cache/yarn
-          key: ${{ runner.os }}-deps-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-deps-
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+            ${{ runner.os }}-
 
-      # Warm-bench cache (the big one): install.sh saves the built base bench — frappe + env +
-      # node_modules + assets — here as frappe-bench-base-*.tar.zst. Later runs restore it and only
-      # fast-forward to the live develop SHA + rebuild the delta, so the bench BUILD is near-free and
-      # only the test_site reinstall (per-run DB, uncacheable) stays slow — matching the self-hosted
-      # box. The first run after a deps change populates it; every run after that is fast.
-      - name: Cache warm bench (base build)
+      - name: Cache node modules
         uses: actions/cache@v4
-        with:
-          path: ~/bench-cache
-          key: ${{ runner.os }}-warmbench-v2-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-warmbench-v2-
-
-      # Postgres runs in-runner on a PGDATA OUTSIDE the bench (install.sh wipes ~/frappe-bench);
-      # after the reinstall it's moved into the bench so it ships in the artifact.
-      - name: Start DB
-        run: bash ${GITHUB_WORKSPACE}/.github/helper/start-db.sh
         env:
-          DB: postgres
-          CI_DB_DATADIR: /home/runner/pgdata
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v4
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
       - name: Install
         run: bash ${GITHUB_WORKSPACE}/.github/helper/install.sh
         env:
           DB: postgres
           TYPE: server
-          FRAPPE_BRANCH: develop
-          # Anonymous git to github.com gets throttled to a 401; authenticate the clones.
-          CI_GITHUB_TOKEN: ${{ github.token }}
-          BENCH_CACHE_DIR: /home/runner/bench-cache
-
-      - name: Warm up test data
-        run: |
-          cd ~/frappe-bench/
-          bench --site test_site run-tests --lightmode --module erpnext.tests.bootstrap_test_data
-
-      - name: Stop DB and stage datadir
-        run: |
-          PG_BIN=$(ls -d /usr/lib/postgresql/*/bin | sort -V | tail -1)
-          # Clean shutdown so the baked datadir is consistent. Do NOT swallow a failed stop with
-          # `|| true`: moving and tarring a still-running cluster ships a torn datadir the shards
-          # cannot crash-recover (full_page_writes is off). Fail the job instead — mirrors the
-          # MariaDB sister's "don't bake a dirty datadir" guard.
-          "$PG_BIN/pg_ctl" -D /home/runner/pgdata -m fast -w stop
-          mv /home/runner/pgdata /home/runner/frappe-bench/pgdata
-
-      - name: Package bench for test shards
-        run: |
-          cp "${GITHUB_WORKSPACE}/.github/helper/hydrate.sh" /home/runner/frappe-bench/hydrate.sh
-          cp "${GITHUB_WORKSPACE}/.github/helper/start-db.sh" /home/runner/frappe-bench/start-db.sh
-          tar czpf "${GITHUB_WORKSPACE}/bench.tar.gz" -C /home/runner \
-            --exclude='.git' --exclude='node_modules' frappe-bench
-          ls -lh "${GITHUB_WORKSPACE}/bench.tar.gz"
-
-      - name: Upload bench artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: bench-pg
-          path: bench.tar.gz
-          retention-days: 1
-          compression-level: 0
-
-  test:
-    name: Python Unit Tests
-    needs: setup
-    runs-on: ubuntu-latest
-    timeout-minutes: 60
-    strategy:
-      fail-fast: false
-      matrix:
-        container: [1, 2, 3, 4]
-    steps:
-      - name: Download bench artifact
-        uses: actions/download-artifact@v4
-        with:
-          name: bench-pg
-
-      - name: Setup Python
-        uses: actions/setup-python@v6
-        with:
-          python-version: ${{ env.PYTHON_VERSION }}
-
-      - name: Add to Hosts
-        run: echo "127.0.0.1 test_site" | sudo tee -a /etc/hosts
-
-      # The bench CLI (frappe-bench) and redis are global/system tools — not in the bench tarball.
-      # The setup runner got them via install.sh; the MariaDB shards get them from the arc5 image.
-      # GitHub-hosted PG shards install them here (cheap vs the build+reinstall that setup did once).
-      - name: Install shard runtime (bench CLI + redis + wkhtmltopdf)
-        run: |
-          pip install frappe-bench
-          command -v redis-server >/dev/null || { sudo apt-get update -qq && sudo apt-get install -y -qq redis-server; }
-          # wkhtmltopdf (patched-qt build) for print-format / PDF tests — same .deb install.sh uses.
-          if ! command -v wkhtmltopdf >/dev/null; then
-            wget -qO /tmp/wkhtmltox.deb https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6.1-2/wkhtmltox_0.12.6.1-2.jammy_amd64.deb
-            sudo apt-get install -y -qq /tmp/wkhtmltox.deb
-          fi
-
-      - name: Untar bench
-        run: |
-          tar xzpf "${GITHUB_WORKSPACE}/bench.tar.gz" -C /home/runner
-          ls -ld /home/runner/frappe-bench
-
-      - name: Hydrate (start Postgres on the baked datadir)
-        run: bash /home/runner/frappe-bench/hydrate.sh
-        env:
-          DB: postgres
-          DB_HOST: 127.0.0.1
 
       - name: Run Tests
-        run: |
-          cd ~/frappe-bench/
-          # print-format / PDF tests are engine-independent (they exercise wkhtmltopdf rendering,
-          # not postgres SQL — the MariaDB CI already covers them). They only fetch the static asset
-          # bundles from http://test_site:8000/assets/..., so a plain static file server over sites/
-          # satisfies wkhtmltopdf without the frappe web server (which never bound on a bare runner).
-          ( cd ~/frappe-bench/sites && nohup python3 -m http.server 8000 --bind 127.0.0.1 > ~/frappe-bench/web.log 2>&1 & )
-          for _ in $(seq 1 15); do (exec 3<>/dev/tcp/127.0.0.1/8000) 2>/dev/null && { exec 3>&- 3<&-; break; }; sleep 1; done
-          bench --site test_site run-parallel-tests --lightmode --app erpnext \
-            --total-builds ${{ strategy.job-total }} --build-number ${{ matrix.container }}
+        run: cd ~/frappe-bench/ && bench --site test_site run-parallel-tests --app erpnext --use-orchestrator
         env:
           TYPE: server
+          CI_BUILD_ID: ${{ github.run_id }}
+          ORCHESTRATOR_URL: http://test-orchestrator.frappe.io

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

@@ -1,40 +0,0 @@
-# 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 }}

.mergify.yml

@@ -88,8 +88,7 @@ pull_request_rules:
     actions:
       merge:
         method: squash
-        commit_message_format:
-          title: pr-title
-          body: pr-body
-merge_queue:
-  queue_controls_comment: false
+        commit_message_template: |
+          {{ title }} (#{{ number }})
+
+          {{ body }}

.pre-commit-config.yaml

@@ -48,6 +48,7 @@ repos:
                 cypress/.*|
                 .*node_modules.*|
                 .*boilerplate.*|
+                erpnext/public/js/controllers/.*|
                 erpnext/templates/pages/order.js|
                 erpnext/templates/includes/.*
             )$
@@ -65,18 +66,6 @@ repos:
       - id: ruff-format
         name: "Run ruff formatter"
 
-  - repo: local
-    hooks:
-      - id: postgres-compat
-        name: "PostgreSQL compatibility (static check)"
-        description: "Flags MySQL-only SQL that breaks on Postgres; the label-gated PG test job is the backstop for semantic divergences."
-        entry: .github/helper/postgres_compat.py
-        language: script
-        files: ^erpnext/.*\.py$
-        # patches/ are historical, version-gated migrations (skipped on fresh Postgres installs);
-        # out of scope for the always-on gate.
-        exclude: ^erpnext/patches/
-
 ci:
     autoupdate_schedule: weekly
     skip: []

CODEOWNERS

@@ -7,7 +7,6 @@ erpnext/accounts/               @ruthra-kumar
 erpnext/assets/                 @khushi8112
 erpnext/regional                @ruthra-kumar
 erpnext/selling                 @ruthra-kumar
-banking/                        @nikkothari22
 
 erpnext/buying/                 @rohitwaghchaure @mihir-kandoi
 erpnext/maintenance/            @rohitwaghchaure @mihir-kandoi

banking/eslint.config.js

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

banking/package.json

@@ -14,52 +14,53 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@tailwindcss/vite": "^4.3.2",
+    "@tailwindcss/vite": "^4.3.0",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.24",
-    "@vitejs/plugin-react": "^6.0.3",
+    "@vitejs/plugin-react": "^6.0.1",
     "chrono-node": "^2.9.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.20",
-    "frappe-react-sdk": "^1.17.1",
+    "frappe-react-sdk": "^1.15.0",
     "fuse.js": "^7.3.0",
-    "jotai": "^2.20.2",
-    "jotai-family": "^1.1.0",
+    "jotai": "^2.20.0",
+    "jotai-family": "^1.0.1",
     "lodash.isplainobject": "^4.0.6",
     "lucide-react": "^1.14.0",
-    "radix-ui": "^1.6.1",
-    "react": "^19.2.7",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.6",
     "react-currency-input-field": "^4.0.5",
     "react-day-picker": "9.14.0",
-    "react-dom": "^19.2.7",
+    "react-dom": "^19.2.6",
     "react-dropzone": "^15.0.0",
     "react-hook-form": "^7.75.0",
     "react-hotkeys-hook": "^5.3.2",
     "react-markdown": "^10.1.0",
-    "react-router": "^8.3.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",
-    "safe-expr-eval": "^1.0.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.3.0",
     "tw-animate-css": "^1.4.0",
     "usehooks-ts": "^3.1.1",
-    "vite": "^8.2.1"
+    "vite": "^8.0.11"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.5",
+    "@eslint/js": "^9.39.1",
     "@types/node": "^25.3.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^10.8.1",
+    "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.3",
+    "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.67.0"
+    "typescript-eslint": "^8.48.0"
   }
 }

banking/proxyOptions.ts

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

banking/src/App.tsx

@@ -1,15 +1,14 @@
-import { lazy, useEffect } from 'react'
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router'
+import { useEffect } from 'react'
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
 import { FrappeProvider } from 'frappe-react-sdk'
 import { Toaster } from '@/components/ui/sonner'
 import BankReconciliation from '@/pages/BankReconciliation'
-import 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'
-
-const BankStatementImporter = lazy(() => import('@/pages/BankStatementImporter'))
-const ViewBankStatementImportLog = lazy(() => import('@/pages/ViewBankStatementImportLog'))
+import ViewBankStatementImportLog from './pages/ViewBankStatementImportLog'
+import BankStatementImporterContainer from './pages/BankStatementImporterContainer'
 
 function App() {
 	useEffect(() => {
@@ -44,6 +43,7 @@ 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/common/AccountsDropdown.tsx

@@ -9,7 +9,6 @@ import Fuse from "fuse.js"
 import { ChevronDownIcon } from "lucide-react"
 import { useLayoutEffect, useMemo, useRef, useState } from "react"
 import { FormControl } from "../ui/form"
-import useResetScrollOnSearch from "@/hooks/useResetScrollOnSearch"
 
 
 export interface AccountsDropdownProps {
@@ -105,10 +104,6 @@ const AccountsDropdown = ({ root_type, report_type, account_type, value, onChang
 
     const buttonRef = useRef<HTMLButtonElement>(null)
 
-    // Searching replaces the grouped list with a short result list, so pin the scroll back to
-    // the top - otherwise the auto-selected first result can be out of view.
-    const listRef = useResetScrollOnSearch(search)
-
     const [width, setWidth] = useState(320)
 
     useLayoutEffect(() => {
@@ -158,7 +153,7 @@ const AccountsDropdown = ({ root_type, report_type, account_type, value, onChang
             <PopoverContent className="p-0" style={{ minWidth: width }} align="start">
                 <Command shouldFilter={false} className="w-full">
                     <CommandInput placeholder={_("Search account...")} onValueChange={setSearch} value={search} />
-                    <CommandList ref={listRef}>
+                    <CommandList>
                         <CommandEmpty>{_("No accounts found.")}</CommandEmpty>
 
                         {recommendedAccounts.length > 0 && (

banking/src/components/common/LinkFieldCombobox.tsx

@@ -10,7 +10,6 @@ import { ChevronDownIcon, ExternalLink } from "lucide-react";
 import { Button } from "../ui/button";
 import { cn } from "@/lib/utils";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../ui/command";
-import useResetScrollOnSearch from "@/hooks/useResetScrollOnSearch";
 import _ from "@/lib/translate";
 import ErrorBanner from "../ui/error-banner";
 import MarkdownRenderer from "../ui/markdown";
@@ -150,10 +149,6 @@ const LinkFieldCombobox = ({
 
     const buttonRef = useRef<HTMLButtonElement>(null)
 
-    // Results change as the search runs, so pin the scroll back to the top to keep the
-    // auto-selected first result in view.
-    const listRef = useResetScrollOnSearch(searchInput)
-
     const [width, setWidth] = useState(320)
 
     useLayoutEffect(() => {
@@ -269,7 +264,7 @@ const LinkFieldCombobox = ({
                 {error && <ErrorBanner error={error} />}
                 <Command shouldFilter={false} className="w-full">
                     <CommandInput placeholder={placeholder} onValueChange={setSearchInput} />
-                    <CommandList ref={listRef}>
+                    <CommandList>
                         <CommandEmpty>{isLoading ? _("Loading...") : _("No results found.")}</CommandEmpty>
                         <CommandGroup>
                             {items?.map((result) => (
@@ -277,7 +272,7 @@ const LinkFieldCombobox = ({
                                     <span className="font-medium">
                                         {result.label || result.value}
                                     </span>
-                                    {result.description && <span className="text-p-xs text-ink-gray-5">
+                                    {result.description && <span className="text-xs text-ink-gray-5">
                                         <MarkdownRenderer content={result.description} />
                                     </span>}
                                 </CommandItem>

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

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

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

@@ -1,34 +0,0 @@
-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

@@ -1,431 +0,0 @@
-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/BankBalance.tsx

@@ -6,13 +6,13 @@ import { Progress } from "@/components/ui/progress"
 import { useGetAccountClosingBalance, useGetAccountClosingBalanceAsPerStatement, useGetAccountOpeningBalance, useGetUnreconciledTransactions } from "./utils"
 import { flt, formatCurrency } from "@/lib/numbers"
 import { Skeleton } from "@/components/ui/skeleton"
+import { StatContainer, StatLabel, StatValue } from "@/components/ui/stats"
 import { Edit, Info, Trash2 } from "lucide-react"
 import { H4, Paragraph } from "@/components/ui/typography"
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
 import { getCompanyCurrency } from "@/lib/company"
 import _ from "@/lib/translate"
-import { cn } from "@/lib/utils"
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { formatDate } from "@/lib/date"
 import { Form } from "@/components/ui/form"
@@ -26,109 +26,50 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
 import { toast } from "sonner"
 import ErrorBanner from "@/components/ui/error-banner"
 
-const useBankCurrency = () => {
-    const bankAccount = useAtomValue(selectedBankAccountAtom)
-    return bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? '')
-}
-
-/**
- * One line of the balance summary - label on the left, figure right-aligned.
- *
- * `items-baseline` keeps the figure on the label's FIRST line, so a row carrying a `subLabel`
- * (the statement row's "As of <date>" note) doesn't centre its value against both lines.
- */
-const BalanceRow = ({ label, info, subLabel, emphasis, children }: {
-    label: React.ReactNode
-    info?: React.ReactNode
-    subLabel?: React.ReactNode
-    emphasis?: boolean
-    children: React.ReactNode
-}) => (
-    <div className="flex items-baseline justify-between gap-3">
-        <span className="flex min-w-0 flex-col gap-1.5">
-            <span className={cn("flex items-center gap-1 whitespace-nowrap text-xs text-ink-gray-6",
-                emphasis && "font-medium text-ink-gray-7")}>
-                {label}
-                {info}
-            </span>
-            {subLabel}
-        </span>
-        <div className="flex flex-col items-end">{children}</div>
-    </div>
-)
-
-/**
- * Type styles for a figure. Shared so an interactive figure can put them on the <button>
- * ITSELF rather than on a nested span: Tailwind's preflight sets `font: inherit` on buttons,
- * which resets line-height too, so a button wrapping a `text-sm` span gets a taller strut than
- * the span and the row grows - visible as extra space above a baseline-aligned row.
- */
-const BALANCE_VALUE_CLASSES = "font-numeric text-sm tabular-nums text-ink-gray-8"
-
-const BalanceValue = ({ children, emphasis, tone, className }: { children: React.ReactNode, emphasis?: boolean, tone?: 'red', className?: string }) => (
-    <span className={cn(BALANCE_VALUE_CLASSES,
-        emphasis && "font-semibold",
-        tone === 'red' && "text-ink-red-3",
-        className)}>
-        {children}
-    </span>
-)
-
-const BalanceSkeleton = () => <Skeleton className="h-4 w-24 rounded-sm" />
-
-/**
- * Balances and progress for the selected bank account, laid out like the totals block of an
- * invoice. This sits beside the bank picker rather than in a row of its own (saves vertical
- * space) and outside the picker's horizontal scroll area, so the figures being reconciled
- * against can never scroll out of view.
- */
-const BankAccountBalancePanel = () => {
+const BankBalance = () => {
 
     const bankAccount = useAtomValue(selectedBankAccountAtom)
 
     if (!bankAccount) {
         return null
     }
-
     return (
-        <div className="flex w-72 shrink-0 flex-col justify-center gap-2.5 border-s border-outline-gray-2 ps-4">
-            {/* Names the account these figures belong to - the picker scrolls, so the
-                highlighted card can't be relied on as the referent. */}
-            <span
-                className="truncate text-xs font-medium text-ink-gray-7"
-                title={bankAccount.account_name}>
-                {bankAccount.account_name}
-            </span>
-            <OpeningBalanceRow />
-            <SystemClosingBalanceRow />
-            <StatementClosingBalanceRow />
-            <Separator />
-            <DifferenceRow />
-            <ReconciledRow />
+        <div className="flex justify-between">
+            <div className="w-[80%] flex flex-wrap justify-between gap-2 pe-8 border-e-border border-e">
+                <OpeningBalance />
+                <ClosingBalance />
+                <ClosingBalanceAsPerStatement />
+                <Difference />
+            </div>
+
+            <ReconcileProgress />
         </div>
     )
 }
 
-const OpeningBalanceRow = () => {
-    const currency = useBankCurrency()
+const OpeningBalance = () => {
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
     const { data, isLoading } = useGetAccountOpeningBalance()
 
-    return <BalanceRow label={_("Opening Balance")}>
-        {isLoading ? <BalanceSkeleton /> : <BalanceValue>{formatCurrency(flt(data?.message, 2), currency)}</BalanceValue>}
-    </BalanceRow>
+    return <StatContainer className="min-w-48">
+        <StatLabel>{_("Opening Balance")}</StatLabel>
+        {isLoading ? <Skeleton className="w-[150px] h-5 rounded-sm" /> : <StatValue className="font-numeric">{formatCurrency(flt(data?.message, 2), bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? ''))}</StatValue>}
+    </StatContainer>
 }
 
-const SystemClosingBalanceRow = () => {
-    const currency = useBankCurrency()
+const ClosingBalance = () => {
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
     const { data, isLoading } = useGetAccountClosingBalance()
 
     return (
-        <BalanceRow
-            label={_("Closing (system)")}
-            info={
+        <StatContainer className="min-w-48">
+            <div className="flex items-start gap-1">
+                <StatLabel>
+                    {_("Closing Balance as per system")}
+                </StatLabel>
                 <HoverCard openDelay={100}>
                     <HoverCardTrigger>
-                        <Info className="size-3.5 text-ink-gray-6" />
+                        <Info className="size-3.5 text-ink-gray-6 -mt-px" />
                     </HoverCardTrigger>
                     <HoverCardContent className="w-96" align="start" side="right">
                         <H4 className="text-base">{_("Closing balance as per system")}</H4>
@@ -143,111 +84,15 @@ const SystemClosingBalanceRow = () => {
                         </Paragraph>
                     </HoverCardContent>
                 </HoverCard>
-            }
-        >
-            {isLoading ? <BalanceSkeleton /> : <BalanceValue>{formatCurrency(flt(data?.message, 2), currency)}</BalanceValue>}
-        </BalanceRow>
+
+            </div>
+            {isLoading ? <Skeleton className="w-[150px] h-5 rounded-sm" /> : <StatValue className="font-numeric">{formatCurrency(flt(data?.message, 2), bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? ''))}</StatValue>}
+        </StatContainer>
     )
 }
 
-const StatementClosingBalanceRow = () => {
-
+const Difference = () => {
     const bankAccount = useAtomValue(selectedBankAccountAtom)
-    const currency = useBankCurrency()
-    const dates = useAtomValue(bankRecDateAtom)
-    const setValue = useSetAtom(bankRecClosingBalanceAtom(bankAccount?.name ?? ''))
-
-    const { data, isLoading } = useGetAccountClosingBalanceAsPerStatement({
-        onSuccess: (data) => {
-            if (data?.message && data?.message?.balance) {
-                setValue({
-                    value: data?.message?.balance,
-                    stringValue: data?.message?.balance.toString()
-                })
-            }
-        }
-    })
-
-    const isDateSame = data?.message?.date === dates.toDate
-
-    // The server uses the returned date to distinguish an unset balance from a saved zero.
-    const hasBalance = Boolean(data?.message?.date)
-
-    const [isOpen, setIsOpen] = useState(false)
-
-    const tooltip = hasBalance
-        ? _("Click to change the closing balance as per statement")
-        : _("Click to set the closing balance as per statement")
-
-    return (
-        <BalanceRow
-            label={_("Closing (statement)")}
-            // The pencil sits beside the label, mirroring the info icon on the row above, so
-            // the figure stays a plain right-aligned number in line with every other row.
-            info={
-                <Tooltip>
-                    <TooltipTrigger asChild>
-                        {/* `p-0`: Tailwind's preflight gives buttons `appearance: button` but
-                            doesn't reset padding, so a bare button picks up the UA's ~1px 6px
-                            and knocks this row out of step with its neighbours. */}
-                        <button
-                            type='button'
-                            aria-label={tooltip}
-                            onClick={() => setIsOpen(true)}
-                            className="cursor-pointer p-0 text-ink-gray-5 transition-colors hover:text-ink-gray-7">
-                            <Edit className="size-3.5" />
-                        </button>
-                    </TooltipTrigger>
-                    <TooltipContent>{tooltip}</TooltipContent>
-                </Tooltip>
-            }
-            subLabel={!isDateSame && data?.message.date
-                ? <span className="whitespace-nowrap text-2xs font-medium text-ink-red-3">
-                    {_("As of {0}", [formatDate(data?.message?.date ?? '', 'Do MMM YYYY')])}
-                </span>
-                : undefined}
-        >
-            {/* Deliberately NOT a flex container: a flex box's baseline doesn't resolve to its
-                text, so the row's `items-baseline` couldn't line this up with the label. As a
-                plain inline button its baseline is the figure's own, like every other row.
-                "Set" gets the same treatment as a figure - it stands in for one. */}
-            {isLoading
-                ? <BalanceSkeleton />
-                : <Tooltip>
-                    <TooltipTrigger asChild>
-                        {/* The figure styles live on the button itself - see
-                            BALANCE_VALUE_CLASSES. `p-0` because preflight leaves the UA's
-                            button padding in place. */}
-                        <button
-                            type='button'
-                            aria-label={tooltip}
-                            onClick={() => setIsOpen(true)}
-                            className={cn(BALANCE_VALUE_CLASSES,
-                                "cursor-pointer p-0 underline decoration-outline-gray-5 decoration-dashed underline-offset-4",
-                                "transition-colors hover:decoration-ink-gray-8")}>
-                            {hasBalance ? formatCurrency(flt(data?.message?.balance, 2), currency) : _("Set")}
-                        </button>
-                    </TooltipTrigger>
-                    <TooltipContent>{tooltip}</TooltipContent>
-                </Tooltip>}
-
-            <Dialog open={isOpen} onOpenChange={setIsOpen}>
-                <DialogContent className="min-w-xl">
-                    <ClosingBalanceForm
-                        defaultBalance={data?.message?.balance ?? 0}
-                        date={dates.toDate}
-                        bankAccount={bankAccount}
-                        onClose={() => setIsOpen(false)}
-                    />
-                </DialogContent>
-            </Dialog>
-        </BalanceRow>
-    )
-}
-
-const DifferenceRow = () => {
-    const bankAccount = useAtomValue(selectedBankAccountAtom)
-    const currency = useBankCurrency()
 
     const { data, isLoading } = useGetAccountClosingBalance()
 
@@ -257,15 +102,16 @@ const DifferenceRow = () => {
 
     const isError = difference !== 0
 
-    return <BalanceRow label={_("Difference")} emphasis>
-        {isLoading
-            ? <BalanceSkeleton />
-            : <BalanceValue emphasis tone={isError ? 'red' : undefined}>{formatCurrency(difference, currency)}</BalanceValue>}
-    </BalanceRow>
+    return <StatContainer className="w-fit text-end sm:min-w-56">
+        <StatLabel className="text-end">{_("Difference")}</StatLabel>
+        {isLoading ? <Skeleton className="w-[150px] h-5 self-end rounded-sm" /> : <StatValue className={isError ? 'text-ink-red-3 font-numeric' : 'font-numeric'}>
+            {formatCurrency(difference,
+                bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? ''))
+            }</StatValue>}
+    </StatContainer>
 }
 
-/** Reconciliation progress through the selected date range: a count plus a slim bar. */
-const ReconciledRow = () => {
+const ReconcileProgress = () => {
 
     const bankAccount = useAtomValue(selectedBankAccountAtom)
 
@@ -286,14 +132,75 @@ const ReconciledRow = () => {
 
     const progress = (totalCount ? reconciledCount / totalCount : 0) * 100
 
-    return <div className="flex flex-col gap-1.5">
-        <BalanceRow label={_("Reconciled")}>
-            <BalanceValue>{reconciledCount} / {totalCount ?? 0}</BalanceValue>
-        </BalanceRow>
-        <Progress value={progress} max={100} size="sm" />
+    return <div className="w-[18%] flex flex-col gap-1 items-end">
+        <div className="w-full">
+            <Progress
+                value={progress}
+                max={100}
+                size="md"
+                label="Progress"
+                hint
+                hintText={`${reconciledCount} / ${totalCount} ${_("reconciled")}`} />
+        </div>
     </div>
 }
 
+const ClosingBalanceAsPerStatement = () => {
+
+    const bankAccount = useAtomValue(selectedBankAccountAtom)
+    const dates = useAtomValue(bankRecDateAtom)
+    const setValue = useSetAtom(bankRecClosingBalanceAtom(bankAccount?.name ?? ''))
+
+    const { data, isLoading } = useGetAccountClosingBalanceAsPerStatement({
+        onSuccess: (data) => {
+            if (data?.message && data?.message?.balance) {
+                setValue({
+                    value: data?.message?.balance,
+                    stringValue: data?.message?.balance.toString()
+                })
+            }
+        }
+    })
+
+    const isDateSame = data?.message?.date === dates.toDate
+
+    const [isOpen, setIsOpen] = useState(false)
+
+
+    return <StatContainer className="min-w-48">
+        <StatLabel>{_("Closing Balance as per statement")}</StatLabel>
+        <div className="flex flex-col gap-2 items-start">
+            <Dialog open={isOpen} onOpenChange={setIsOpen}>
+                <DialogTrigger>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <div className="flex items-center gap-4 underline cursor-pointer underline-offset-6" role="button">
+                                {isLoading ? <Skeleton className="w-[150px] h-5 rounded-sm" /> : <StatValue className="font-numeric">{formatCurrency(flt(data?.message?.balance, 2), bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? ''))}</StatValue>}
+                                <Edit className="w-4 h-4" />
+                            </div>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                            {_("Click to set the closing balance as per statement")}
+                        </TooltipContent>
+                    </Tooltip>
+                </DialogTrigger>
+                <DialogContent className="min-w-xl">
+                    <ClosingBalanceForm
+                        defaultBalance={data?.message?.balance ?? 0}
+                        date={dates.toDate}
+                        bankAccount={bankAccount}
+                        onClose={() => setIsOpen(false)}
+                    />
+
+
+                </DialogContent>
+            </Dialog>
+            {!isDateSame && data?.message.date && <span className="text-xs font-medium text-ink-red-3">{_("As of {0}", [formatDate(data?.message?.date ?? '', 'Do MMM YYYY')])}</span>}
+        </div>
+    </StatContainer>
+
+}
+
 const ClosingBalanceForm = ({ defaultBalance, date, bankAccount, onClose }: { defaultBalance: number, date: string, bankAccount: SelectedBank | null, onClose: VoidFunction }) => {
 
     const { mutate } = useSWRConfig()
@@ -343,7 +250,7 @@ const ClosingBalanceForm = ({ defaultBalance, date, bankAccount, onClose }: { de
                     {_("Enter the closing balance you see in your bank statement for {0} as of the {1}", [bankAccount?.account_name ?? bankAccount?.name ?? '', formatDate(date, 'Do MMM YYYY')])}
                 </DialogDescription>
             </DialogHeader>
-            {error && <div className="py-2"><ErrorBanner error={error} /></div>}
+            {error && <ErrorBanner error={error} />}
             <div className="py-4">
                 <CurrencyFormField
                     name="balance"
@@ -395,7 +302,7 @@ const ClosingBalancesList = ({ bankAccount, date }: { bankAccount: SelectedBank
 
     return <div>
         <Separator className="my-8" />
-        <p className="text-p-sm text-center pb-2">{_("Balances as per bank statement before {0}", [formatDate(date, 'Do MMM YYYY')])}</p>
+        <p className="text-sm text-center">{_("Balances as per bank statement before {0}", [formatDate(date, 'Do MMM YYYY')])}</p>
         <Table>
             <TableHeader>
                 <TableRow>
@@ -424,4 +331,4 @@ const ClosingBalancesList = ({ bankAccount, date }: { bankAccount: SelectedBank
 
 }
 
-export default BankAccountBalancePanel
+export default BankBalance

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

@@ -2,6 +2,7 @@ import { useAtomValue } from "jotai"
 import { MissingFiltersBanner } from "./MissingFiltersBanner"
 import { bankRecDateAtom, SelectedBank, selectedBankAccountAtom } from "./bankRecAtoms"
 import { useCurrentCompany } from "@/hooks/useCurrentCompany"
+import { Paragraph } from "@/components/ui/typography"
 import type { ColumnDef } from "@tanstack/react-table"
 import { useCallback, useMemo, useState } from "react"
 import { useFrappeGetCall, useFrappePostCall, useSWRConfig } from "frappe-react-sdk"
@@ -25,7 +26,6 @@ import { Form } from "@/components/ui/form"
 import { useForm } from "react-hook-form"
 import { DateField } from "@/components/ui/form-elements"
 import { Empty, EmptyMedia, EmptyHeader, EmptyTitle, EmptyDescription } from "@/components/ui/empty"
-import MarkdownRenderer from "@/components/ui/markdown"
 
 const BankClearanceSummary = () => {
     const bankAccount = useAtomValue(selectedBankAccountAtom)
@@ -83,7 +83,7 @@ const BankClearanceSummaryView = () => {
                 toast.success(_("Copied to clipboard"))
             })
         },
-        [copyToClipboard],
+        [copyToClipboard, _],
     )
 
     const accountCurrency = useMemo(
@@ -200,17 +200,17 @@ const BankClearanceSummaryView = () => {
                 },
             },
         ],
-        [accountCurrency, bankAccount, companyID, mutate, onCopy],
+        [_, accountCurrency, bankAccount, companyID, mutate, onCopy],
     )
 
-    const content = _("Below is a list of all accounting entries posted against the bank account {0} between {1} and {2}.", [`<strong>${bankAccount?.account}</strong>`, `<strong>${formattedFromDate}</strong>`, `<strong>${formattedToDate}</strong>`])
+    return <div className="space-y-4 py-2">
 
-    return <div className="flex min-h-0 flex-1 flex-col space-y-4 py-2">
-
-        <div className="shrink-0">
-            <span className="text-p-sm">
-                <MarkdownRenderer content={content} />
-            </span>
+        <div>
+            <Paragraph className="text-sm">
+                <span dangerouslySetInnerHTML={{
+                    __html: _("Below is a list of all accounting entries posted against the bank account {0} between {1} and {2}.", [`<strong>${bankAccount?.account}</strong>`, `<strong>${formattedFromDate}</strong>`, `<strong>${formattedToDate}</strong>`])
+                }} />
+            </Paragraph>
         </div>
 
         {error && <ErrorBanner error={error} />}
@@ -220,9 +220,8 @@ const BankClearanceSummaryView = () => {
                 data={data.message.result}
                 columns={clearanceColumns}
                 getRowId={(row) => `${row.payment_entry}-${row.posting_date}`}
-                className="min-h-0 flex-1"
-                maxHeight="none"
-                scrollAreaClassName="flex-1"
+                maxHeight="calc(100vh - 200px)"
+                scrollAreaClassName="min-h-[calc(100vh-200px)]"
                 emptyState={_("No rows to display.")}
             />
         ) : null}

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

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

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

@@ -1,787 +0,0 @@
-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 { evaluateAmountFormula } from "@/lib/amountFormula"
-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 {
-
-                        const transactionAmount = selectedTransaction.unallocated_amount ?? 0
-                        if (!acc?.debit && !acc?.credit) {
-                            hasTotallyEmptyRowEarlier = true;
-                        }
-
-                        const computedDebit = acc?.debit ? flt(evaluateAmountFormula(acc.debit, transactionAmount), 2) : 0
-                        const computedCredit = acc?.credit ? flt(evaluateAmountFormula(acc.credit, transactionAmount), 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/BankPicker.tsx

@@ -74,10 +74,7 @@ const BankPicker = ({ className }: { className?: string }) => {
     }
     return (
         <div
-            // No trailing padding: it would sit inside the fade region, so the mask would
-            // spend itself on empty space and the last card would stop short of the balance
-            // panel instead of fading towards it. The column gap provides the separation.
-            className={cn("flex gap-3 items-stretch w-full overflow-x-auto scroll-fade-x",
+            className={cn("flex gap-3 items-stretch w-full overflow-x-auto pe-4",
                 banks?.length > 4 ? 'pb-2' : '', className,
             )}
             style={{
@@ -111,12 +108,12 @@ const BankPickerItem = ({ bank }: { bank: SelectedBank }) => {
         role="button"
         title={`Select ${bank.account_name}`}
         onClick={onSelect}
-        // `shrink-0`: this is a horizontally scrolling row, so cards keep their own width
-        // instead of being compressed to fit the container.
-        className={cn('w-60 shrink-0 rounded-md border border-outline-gray-1 p-2 overflow-hidden cursor-pointer transition-colors',
+        className={cn('rounded-md border border-outline-gray-1 max-w-60 min-w-60 p-2 overflow-hidden cursor-pointer',
             isSelected ? 'border-outline-gray-5 bg-surface-gray-1' : 'hover:bg-surface-gray-1'
         )}
     >
+
+
         <BankLogo bank={bank} className="mb-2" />
 
         <div className="flex flex-col gap-1">

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

@@ -5,179 +5,107 @@ import { AVAILABLE_TIME_PERIODS, formatDate, getDatesForTimePeriod, TimePeriod }
 import { Button } from '@/components/ui/button'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRight } from 'lucide-react'
-import { Command, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
 import { parse } from "chrono-node"
 import { Calendar } from '@/components/ui/calendar'
 import useFiscalYear from '@/hooks/useFiscalYear'
 import dayjs from 'dayjs'
 import _ from '@/lib/translate'
 import { useDirection } from '@/components/ui/direction'
-import useResetScrollOnSearch from '@/hooks/useResetScrollOnSearch'
-
-const DATE_FORMAT = 'YYYY-MM-DD'
-
-/** Current fiscal year plus this many previous ones, for quarter/year options. */
-const PREVIOUS_FISCAL_YEARS = 2
-
-type DateOption = {
-    /** Stable id - used as the cmdk value and the React key. */
-    key: string
-    label: string
-    translatedLabel: string
-    fromDate: string
-    toDate: string
-    format: string
-    /** Extra terms to match against, beyond the labels and dates. */
-    keywords?: string[]
-    /** Whether to show this option when the search box is empty. */
-    isDefault?: boolean
-}
-
-/**
- * Fiscal years keep the same month/day boundaries year on year, so previous years can be
- * derived by subtracting whole years instead of fetching them. Works for both Jan-Dec and
- * Apr-Mar style fiscal years.
- */
-const fiscalYearLabel = (start: dayjs.Dayjs, end: dayjs.Dayjs) =>
-    start.year() === end.year() ? `${start.year()}` : `${start.year()}-${end.year()}`
 
 const BankRecDateFilter = () => {
 
     const [bankRecDate, setBankRecDate] = useAtom(bankRecDateAtom)
 
-    const { fiscalYear } = useFiscalYear()
+    const { data: fiscalYear } = useFiscalYear()
 
-    const today = useMemo(() => dayjs().format(DATE_FORMAT), [])
-
-    const allOptions = useMemo(() => {
-        const standardOptions: DateOption[] = AVAILABLE_TIME_PERIODS.map((period) => {
+    const timePeriodOptions = useMemo(() => {
+        const standardOptions = AVAILABLE_TIME_PERIODS.map((period) => {
             const dates = getDatesForTimePeriod(period)
             return {
-                key: period,
                 label: period,
-                translatedLabel: dates.translatedLabel ?? _(period),
                 fromDate: dates.fromDate,
                 toDate: dates.toDate,
                 format: dates.format,
-                isDefault: true,
+                translatedLabel: dates.translatedLabel
             }
         })
 
-        if (!fiscalYear) {
-            return standardOptions
-        }
+        if (fiscalYear?.message) {
+            // For a fiscal year, we need to replace "Last Year", "This Year", and add options for quarters
+            const fiscalYearStart = fiscalYear.message.year_start_date
+            const fiscalYearEnd = fiscalYear.message.year_end_date
 
-        const currentStart = dayjs(fiscalYear.year_start_date)
-        const currentEnd = dayjs(fiscalYear.year_end_date)
-
-        const quarterOptions: DateOption[] = []
-        const fiscalYearOptions: DateOption[] = []
-
-        // Static literals so the translation extractor can find them.
-        const quarterLabels = [_("Q1"), _("Q2"), _("Q3"), _("Q4")]
-
-        for (let yearsAgo = 0; yearsAgo <= PREVIOUS_FISCAL_YEARS; yearsAgo++) {
-            const start = currentStart.subtract(yearsAgo, 'year')
-            const end = currentEnd.subtract(yearsAgo, 'year')
-            // Keep the real name for the current year; derive it for the earlier ones.
-            const yearLabel = yearsAgo === 0 ? fiscalYear.name : fiscalYearLabel(start, end)
-
-            for (let quarter = 0; quarter < 4; quarter++) {
-                const quarterStart = start.add(quarter * 3, 'month')
-                // End the day before the next quarter starts, clamped to the fiscal year end
-                // so a short fiscal year can't spill over.
-                const nextQuarterStart = start.add((quarter + 1) * 3, 'month')
-                const quarterEnd = nextQuarterStart.subtract(1, 'day').isAfter(end)
-                    ? end
-                    : nextQuarterStart.subtract(1, 'day')
-
-                if (quarterStart.isAfter(end)) continue
-
-                quarterOptions.push({
-                    key: `Q${quarter + 1}-${yearLabel}`,
-                    label: `Q${quarter + 1}: ${yearLabel}`,
-                    translatedLabel: `${quarterLabels[quarter]}: ${yearLabel}`,
-                    fromDate: quarterStart.format(DATE_FORMAT),
-                    toDate: quarterEnd.format(DATE_FORMAT),
-                    format: 'MMM YYYY',
-                    keywords: ['quarter', `q${quarter + 1}`, yearLabel],
-                    // Only the current fiscal year's quarters clutter the default list;
-                    // older ones stay searchable.
-                    isDefault: yearsAgo === 0,
-                })
+            const q1 = {
+                label: `Q1: ${fiscalYear.message.name}`,
+                translatedLabel: `${_("Q1")}: ${fiscalYear.message.name}`,
+                fromDate: fiscalYearStart,
+                toDate: dayjs(fiscalYearStart).add(3, 'month').format('YYYY-MM-DD'),
+                format: 'MMM YYYY'
             }
 
-            const label = yearsAgo === 0
-                ? 'This Fiscal Year'
-                : yearsAgo === 1
-                    ? 'Last Fiscal Year'
-                    : `FY ${yearLabel}`
+            const q2 = {
+                label: `Q2: ${fiscalYear.message.name}`,
+                translatedLabel: `${_("Q2")}: ${fiscalYear.message.name}`,
+                fromDate: dayjs(fiscalYearStart).add(3, 'month').format('YYYY-MM-DD'),
+                toDate: dayjs(fiscalYearStart).add(6, 'month').format('YYYY-MM-DD'),
+                format: 'MMM YYYY'
+            }
 
-            fiscalYearOptions.push({
-                key: `fiscal-year-${yearLabel}`,
-                label,
-                translatedLabel: yearsAgo <= 1 ? _(label) : `${_("FY")} ${yearLabel}`,
-                fromDate: start.format(DATE_FORMAT),
-                toDate: end.format(DATE_FORMAT),
-                format: 'MMM YYYY',
-                keywords: ['fiscal year', yearLabel],
-                isDefault: yearsAgo <= 1,
+            const q3 = {
+                label: `Q3: ${fiscalYear.message.name}`,
+                translatedLabel: `${_("Q3")}: ${fiscalYear.message.name}`,
+                fromDate: dayjs(fiscalYearStart).add(6, 'month').format('YYYY-MM-DD'),
+                toDate: dayjs(fiscalYearStart).add(9, 'month').format('YYYY-MM-DD'),
+                format: 'MMM YYYY'
+            }
+
+            const q4 = {
+                label: `Q4: ${fiscalYear.message.name}`,
+                translatedLabel: `${_("Q4")}: ${fiscalYear.message.name}`,
+                fromDate: dayjs(fiscalYearStart).add(9, 'month').format('YYYY-MM-DD'),
+                toDate: fiscalYearEnd,
+                format: 'MMM YYYY'
+            }
+
+            const thisYear = {
+                label: `This Fiscal Year`,
+                translatedLabel: `${_("This Fiscal Year")}`,
+                fromDate: fiscalYearStart,
+                toDate: fiscalYearEnd,
+                format: 'MMM YYYY'
+            }
+
+            const lastYear = {
+                label: `Last Fiscal Year`,
+                translatedLabel: `${_("Last Fiscal Year")}`,
+                fromDate: dayjs(fiscalYearStart).subtract(1, 'year').format('YYYY-MM-DD'),
+                toDate: dayjs(fiscalYearEnd).subtract(1, 'year').format('YYYY-MM-DD'),
+                format: 'MMM YYYY'
+            }
+            // Sort the options so that we get "This Month", "Last Month", quarters, fiscal year, then the rest of the standard options
+
+            const topRankedItems = standardOptions.filter((option) => {
+                return option.label === "This Month" || option.label === "Last Month"
             })
+
+            const bottomRankedItems = standardOptions.filter((option) => {
+                return option.label !== "This Month" && option.label !== "Last Month"
+            })
+
+            return [...topRankedItems, q1, q2, q3, q4, thisYear, lastYear, ...bottomRankedItems]
         }
 
-        // "This Month"/"Last Month" first, then quarters and fiscal years, then the rest.
-        const topRanked = standardOptions.filter((o) => o.label === 'This Month' || o.label === 'Last Month')
-        const bottomRanked = standardOptions.filter((o) => o.label !== 'This Month' && o.label !== 'Last Month')
-
-        return [...topRanked, ...quarterOptions, ...fiscalYearOptions, ...bottomRanked]
+        return standardOptions
     }, [fiscalYear])
 
-    // Reconciliation only looks backwards, so a period that hasn't started is never useful.
-    const selectableOptions = useMemo(
-        () => allOptions.filter((option) => option.fromDate <= today),
-        [allOptions, today],
-    )
-
     const [open, setOpen] = useState(false)
     const [value, setValue] = useState("")
 
-    // We filter ourselves (`shouldFilter={false}`) so that the parsed-date suggestion can be a
-    // real CommandItem alongside the predefined options, and keyboard navigation covers both.
-    const filteredOptions = useMemo(() => {
-        const query = value.trim().toLowerCase()
-
-        if (!query) {
-            return selectableOptions.filter((option) => option.isDefault)
-        }
-
-        const tokens = query.split(/\s+/)
-
-        return selectableOptions.filter((option) => {
-            const haystack = [
-                option.label,
-                option.translatedLabel,
-                ...(option.keywords ?? []),
-                option.fromDate,
-                option.toDate,
-            ].join(' ').toLowerCase()
-
-            return tokens.every((token) => haystack.includes(token))
-        })
-    }, [selectableOptions, value])
-
-    const parsedOption = useMemo(() => parseDateRange(value), [value])
-
-    // Filtering shortens the list, so pin the scroll back to the top to keep the
-    // auto-selected first option in view.
-    const listRef = useResetScrollOnSearch(value)
-
-    // Don't show a parsed suggestion that duplicates an option already in the list.
-    const showParsedOption = parsedOption
-        && !filteredOptions.some((o) => o.fromDate === parsedOption.fromDate && o.toDate === parsedOption.toDate)
-
     const timePeriod: TimePeriod | string = useMemo(() => {
         if (bankRecDate.fromDate && bankRecDate.toDate) {
-            for (const period of allOptions) {
+            // Check if the from and to dates match any predefined time period
+            for (const period of timePeriodOptions) {
                 if (period.fromDate === bankRecDate.fromDate && period.toDate === bankRecDate.toDate) {
                     return period.label;
                 }
@@ -186,11 +114,10 @@ const BankRecDateFilter = () => {
         } else {
             return "Date Range";
         }
-    }, [bankRecDate.fromDate, bankRecDate.toDate, allOptions]);
+    }, [bankRecDate.fromDate, bankRecDate.toDate, timePeriodOptions]);
 
     const handleTimePeriodChange = (fromDate: string, toDate: string) => {
         setBankRecDate({ fromDate, toDate })
-        setValue("")
         setOpen(false)
     }
 
@@ -203,9 +130,7 @@ const BankRecDateFilter = () => {
 
     const direction = useDirection()
 
-    const RangeArrow = direction === 'ltr'
-        ? <ChevronRight className='text-[12px] text-ink-gray-5/70' />
-        : <ChevronLeftIcon className='text-[12px] text-ink-gray-5/70' />
+
 
     return <div className='flex items-center'>
         <Popover open={open} onOpenChange={setOpen}>
@@ -216,57 +141,30 @@ const BankRecDateFilter = () => {
                     size='md'
                     className='rounded-e-none border-e-0'
                     role="combobox">
-                    {allOptions.find((period) => period.label === timePeriod)?.translatedLabel ?? _(timePeriod)}
+                    {timePeriodOptions.find((period) => period.label === timePeriod)?.translatedLabel ?? _(timePeriod)}
 
                     <ChevronDownIcon />
                 </Button>
             </PopoverTrigger>
 
             <PopoverContent className="w-84 p-1" align='start'>
-                <Command shouldFilter={false}>
+                <Command>
 
-                    <CommandInput placeholder={_("e.g. Last 3 weeks, Q1, May 2025")} onValueChange={setValue} value={value} />
-                    <CommandList ref={listRef} className='max-h-80'>
-                        {showParsedOption && parsedOption && (
-                            <CommandGroup heading={_("Matched date")}>
-                                <CommandItem
-                                    value='parsed-date-range'
-                                    className='flex justify-between'
-                                    onSelect={() => handleTimePeriodChange(parsedOption.fromDate, parsedOption.toDate)}>
-                                    <span className='max-w-[45%] truncate'>{value}</span>
-                                    <span className='text-xs text-ink-gray-5 flex items-center gap-1 text-end whitespace-nowrap'>
-                                        {parsedOption.fromDate === parsedOption.toDate
-                                            ? formatDate(parsedOption.fromDate, 'Do MMM YYYY')
-                                            : <>{formatDate(parsedOption.fromDate, 'Do MMM YY')} {RangeArrow} {formatDate(parsedOption.toDate, 'Do MMM YY')}</>}
-                                    </span>
-                                </CommandItem>
-                            </CommandGroup>
-                        )}
-
-                        {filteredOptions.length > 0 && (
-                            <CommandGroup>
-                                {filteredOptions.map((period) => (
-                                    <CommandItem
-                                        key={period.key}
-                                        value={period.key}
-                                        className='flex justify-between'
-                                        onSelect={() => handleTimePeriodChange(period.fromDate, period.toDate)}>
-                                        <span>
-                                            {period.translatedLabel}
-                                        </span>
-                                        <span className='text-xs text-ink-gray-5 flex items-center gap-1 text-end whitespace-nowrap'>
-                                            {formatDate(period.fromDate, period.format)} {RangeArrow} {formatDate(period.toDate, period.format)}
-                                        </span>
-                                    </CommandItem>
-                                ))}
-                            </CommandGroup>
-                        )}
-
-                        {!showParsedOption && filteredOptions.length === 0 && (
-                            <div className='p-2 text-sm text-ink-gray-5'>
-                                {_("No results found")}
-                            </div>
-                        )}
+                    <CommandInput placeholder="e.g. Last 3 weeks" onValueChange={setValue} value={value} />
+                    <CommandList className='max-h-fit'>
+                        <CommandEmpty className='text-start p-2 hover:bg-surface-gray-1'>
+                            <EmptyState onSelect={handleTimePeriodChange} value={value} />
+                        </CommandEmpty>
+                        {timePeriodOptions.map((period) => (
+                            <CommandItem key={period.label} className='flex justify-between' onSelect={() => handleTimePeriodChange(period.fromDate, period.toDate)}>
+                                <span>
+                                    {period.translatedLabel ?? _(period.label)}
+                                </span>
+                                <span className='text-xs text-ink-gray-5 flex items-center gap-1 text-end whitespace-nowrap'>
+                                    {formatDate(period.fromDate, period.format)} {direction === 'ltr' ? <ChevronRight className='text-[12px] text-ink-gray-5/70' /> : <ChevronLeftIcon className='text-[12px] text-ink-gray-5/70' />} {formatDate(period.toDate, period.format)}
+                                </span>
+                            </CommandItem>
+                        ))}
                     </CommandList>
                 </Command>
 
@@ -301,97 +199,77 @@ const BankRecDateFilter = () => {
 }
 
 const referentialKeywords = ["last", "this", "next", "previous"]
+const EmptyState = ({ onSelect, value }: { onSelect: (fromDate: string, toDate: string) => void, value: string }) => {
 
-/** chrono exposes `knownValues` on ParsingComponents but doesn't type it publicly. */
-const knownValuesOf = (components: unknown): Record<string, number> =>
-    (components as { knownValues?: Record<string, number> })?.knownValues ?? {}
+    const dates = useMemo(() => {
+        if (value) {
+            // Try parsing the value
+            const parsedDate = parse(value, undefined, { forwardDate: false })
 
-/**
- * How far back a parsed date must move to land in the past. Reconciliation only ever looks
- * backwards, so an ambiguous input that chrono resolves into the future - "December" typed in
- * September, or a bare weekday like "Friday" - is pulled to its most recent past occurrence.
- * An explicitly stated year is respected; a range that is still future gets discarded later.
- *
- * This returns a shift rather than a date so that a range can be moved as a single unit -
- * shifting its start and end independently would distort or invert it.
- */
-const pastShift = (date: Date, knownValues: Record<string, number>) => {
-    const today = dayjs()
-    let candidate = dayjs(date)
+            if (parsedDate && parsedDate.length > 0) {
+                const startDate = parsedDate[0].start.date()
+                const endDate = parsedDate[0].end?.date()
 
-    if (!candidate.isAfter(today, 'date') || knownValues.year !== undefined) {
-        return { amount: 0, unit: 'year' as const }
+                if (!endDate) {
+                    const today = new Date()
+                    // If today is greater than the start date, use today as the end date
+                    if (startDate.getTime() > today.getTime()) {
+                        return { fromDate: today, toDate: startDate }
+                    } else {
+                        // Check if the user only wants a specific month like "May 2025"
+                        // If the "known values" just has month and year, then we need to get the first day of the month and the last day of the month
+                        // @ts-expect-error - "Known Values" is available in the start "ParsingComponents"
+                        if (parsedDate[0].start.knownValues?.month && !parsedDate[0].start.knownValues?.day) {
+                            return {
+                                fromDate: startDate,
+                                toDate: dayjs(startDate).endOf('month').toDate()
+                            }
+                            // @ts-expect-error - "Known Values" is available in the start "ParsingComponents"
+                        } else if (parsedDate[0].start.knownValues?.month && parsedDate[0].start.knownValues?.day && !referentialKeywords.some(keyword => value.toLowerCase().includes(keyword))) {
+                            // If month and day is known, then we should not assume that the user wants to get everything until today
+                            return {
+                                fromDate: startDate,
+                                toDate: startDate,
+                            }
+                        }
+
+                        return {
+                            fromDate: startDate,
+                            toDate: today
+                        }
+                    }
+                } else {
+                    return { fromDate: startDate, toDate: endDate }
+                }
+            }
+
+        }
+    }, [value])
+
+    const onClick = (fromDate: Date, toDate: Date) => {
+        onSelect(formatDate(fromDate, 'YYYY-MM-DD'), formatDate(toDate, 'YYYY-MM-DD'))
     }
 
-    // A bare weekday repeats weekly, everything else (month/day) repeats yearly.
-    const unit = knownValues.weekday !== undefined && knownValues.day === undefined
-        ? 'day' as const
-        : 'year' as const
-    const step = unit === 'day' ? 7 : 1
-    let amount = 0
+    const isEqual = dates?.fromDate && dates?.toDate && dayjs(dates.fromDate).isSame(dates.toDate, 'date')
 
-    for (let i = 0; i < 200 && candidate.isAfter(today, 'date'); i++) {
-        candidate = candidate.subtract(step, unit)
-        amount += step
-    }
-
-    return { amount, unit }
+    return <div>
+        {dates ?
+            <div className='flex gap-2 items-center justify-between cursor-pointer' onClick={() => onClick(dates.fromDate, dates.toDate)}>
+                <span className='text-sm text-ink-gray-5 max-w-[30%]'>
+                    {value}
+                </span>
+                {isEqual ? <span className='text-xs text-ink-gray-5 text-balance flex items-center gap-1'>
+                    {formatDate(dates.fromDate, 'Do MMM YYYY')}
+                </span> :
+                    <span className='text-xs text-ink-gray-5 flex items-center gap-1'>
+                        {formatDate(dates.fromDate, 'Do MMM YY')} <ChevronRight size='16' className='text-ink-gray-5' /> {formatDate(dates.toDate, 'Do MMM YY')}
+                    </span>}
+            </div> :
+            <span className='text-sm text-ink-gray-5'>
+                No results found
+            </span>
+        }
+    </div>
 }
 
-/**
- * Parse free text into a past date range, or return undefined when it can't be parsed or
- * resolves entirely into the future.
- */
-const parseDateRange = (value: string): { fromDate: string, toDate: string } | undefined => {
-    if (!value.trim()) return undefined
-
-    const parsedDate = parse(value, undefined, { forwardDate: false })
-
-    if (!parsedDate || parsedDate.length === 0) return undefined
-
-    const result = parsedDate[0]
-    const startKnownValues = knownValuesOf(result.start)
-
-    // Anchor the shift on the start and apply it to both ends, so an explicit range like
-    // "1st Sept to 30th Sept" keeps its shape instead of having only its end rolled back.
-    const shift = pastShift(result.start.date(), startKnownValues)
-    const startDate = dayjs(result.start.date()).subtract(shift.amount, shift.unit).toDate()
-    const endDate = result.end
-        ? dayjs(result.end.date()).subtract(shift.amount, shift.unit).toDate()
-        : undefined
-
-    const today = new Date()
-    let range: { fromDate: Date, toDate: Date }
-
-    if (endDate) {
-        const endKnownValues = knownValuesOf(result.end)
-        // chrono ends "Apr 2025 to Jun 2025" on the 1st of June, but the user means all of it.
-        const rangeEnd = endKnownValues.month && !endKnownValues.day
-            ? dayjs(endDate).endOf('month').toDate()
-            : endDate
-        range = { fromDate: startDate, toDate: rangeEnd }
-    } else if (startKnownValues.month && !startKnownValues.day) {
-        // The user only wants a specific month like "May 2025" - span the whole month
-        range = { fromDate: dayjs(startDate).startOf('month').toDate(), toDate: dayjs(startDate).endOf('month').toDate() }
-    } else if (startKnownValues.month && startKnownValues.day && !referentialKeywords.some(keyword => value.toLowerCase().includes(keyword))) {
-        // If month and day is known, then we should not assume that the user wants to get everything until today
-        range = { fromDate: startDate, toDate: startDate }
-    } else {
-        range = { fromDate: startDate, toDate: today }
-    }
-
-    // A range that hasn't started yet is never useful for reconciliation. A range that merely
-    // ends in the future is kept as typed, the same way "This Month" spans the whole month.
-    if (dayjs(range.fromDate).isAfter(today, 'date')) return undefined
-
-    if (dayjs(range.toDate).isBefore(range.fromDate, 'date')) {
-        range = { fromDate: range.toDate, toDate: range.fromDate }
-    }
-
-    return {
-        fromDate: dayjs(range.fromDate).format(DATE_FORMAT),
-        toDate: dayjs(range.toDate).format(DATE_FORMAT),
-    }
-}
-
-export default BankRecDateFilter
+export default BankRecDateFilter

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

@@ -2,6 +2,7 @@ import { useAtomValue } from "jotai"
 import { MissingFiltersBanner } from "./MissingFiltersBanner"
 import { bankRecDateAtom, selectedBankAccountAtom } from "./bankRecAtoms"
 import { useCurrentCompany } from "@/hooks/useCurrentCompany"
+import { Paragraph } from "@/components/ui/typography"
 import { useCallback, useMemo } from "react"
 import type { ColumnDef } from "@tanstack/react-table"
 import { useFrappeGetCall } from "frappe-react-sdk"
@@ -18,7 +19,6 @@ import _ from "@/lib/translate"
 import { toast } from "sonner"
 import { useCopyToClipboard } from "usehooks-ts"
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
-import MarkdownRenderer from "@/components/ui/markdown"
 
 const BankReconciliationStatement = () => {
     const bankAccount = useAtomValue(selectedBankAccountAtom)
@@ -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(() => {
@@ -189,30 +189,28 @@ const BankReconciliationStatementView = () => {
         return data.message.result.filter((row: BankClearanceSummaryEntry) => Boolean(row.payment_entry))
     }, [data])
 
-    const content = _("Below is a list of all entries posted against the bank account {0} which have not been cleared till {1}.", [`<strong>${bankAccount?.account}</strong>`, `<strong>${formatDate(dates.toDate)}</strong>`])
+    return <div className="space-y-4 py-2">
 
-    return <div className="flex min-h-0 flex-1 flex-col space-y-4 py-2">
-
-        <div className="shrink-0">
-            <span className="text-p-sm">
-                <MarkdownRenderer content={content} />
-            </span>
+        <div>
+            <Paragraph className="text-sm">
+                <span dangerouslySetInnerHTML={{
+                    __html: _("Below is a list of all entries posted against the bank account {0} which have not been cleared till {1}.", [`<strong>${bankAccount?.account}</strong>`, `<strong>${formatDate(dates.toDate)}</strong>`])
+                }} />
+            </Paragraph>
         </div>
 
         {error && <ErrorBanner error={error} />}
 
-        {data && <div className="shrink-0"><SummarySection data={data} /></div>}
+        {data && <SummarySection data={data} />}
 
         {data && data.message.result.length > 0 && (
-            <div className="flex min-h-0 flex-1 flex-col space-y-2">
-                <p className="shrink-0 text-ink-gray-5 text-sm">{_("Bank Reconciliation Statement")}</p>
+            <div className="space-y-2">
+                <p className="text-ink-gray-5 text-sm">{_("Bank Reconciliation Statement")}</p>
                 <ListView
                     data={statementRows}
                     columns={statementColumns}
                     getRowId={(row) => row.payment_entry}
-                    className="min-h-0 flex-1"
-                    maxHeight="none"
-                    scrollAreaClassName="flex-1"
+                    maxHeight="min(70vh, 640px)"
                     emptyState={_("No entries with a payment document in this list.")}
                 />
             </div>

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

@@ -1,6 +1,7 @@
 import { useAtomValue, useSetAtom } from "jotai"
 import { MissingFiltersBanner } from "./MissingFiltersBanner"
 import { bankRecDateAtom, bankRecUnreconcileModalAtom, selectedBankAccountAtom } from "./bankRecAtoms"
+import { Paragraph } from "@/components/ui/typography"
 import { formatDate } from "@/lib/date"
 import { ListView, type ListViewColumnMeta } from "@/components/ui/list-view"
 import { formatCurrency, getCurrencyFormatInfo } from "@/lib/numbers"
@@ -22,7 +23,6 @@ import { useCallback, useMemo, useState } from "react"
 import { Link } from "react-router"
 import { Empty, EmptyTitle, EmptyHeader, EmptyMedia, EmptyDescription, EmptyContent } from "@/components/ui/empty"
 import { InputGroup, InputGroupAddon } from "@/components/ui/input-group"
-import MarkdownRenderer from "@/components/ui/markdown"
 
 const BankTransactions = () => {
     const selectedBank = useAtomValue(selectedBankAccountAtom)
@@ -176,7 +176,7 @@ const BankTransactionListView = () => {
                 ),
             },
         ],
-        [accountCurrency, onUndo],
+        [_, accountCurrency, onUndo],
     )
 
     const [search, setSearch] = useDebounceValue('', 250)
@@ -243,14 +243,14 @@ const BankTransactionListView = () => {
 
     }, [data, search, amountFilter, typeFilter, status])
 
-    const content = _("Below is a list of all bank transactions imported in the system for the bank account {0} between {1} and {2}.", [`<strong>${bankAccount?.account_name}</strong>`, `<strong>${formattedFromDate}</strong>`, `<strong>${formattedToDate}</strong>`])
+    return <div className="space-y-2 py-2">
 
-    return <div className="flex min-h-0 flex-1 flex-col space-y-2 py-2">
-
-        <div className="flex shrink-0 gap-2 justify-between items-center">
-            <span className="text-p-sm">
-                <MarkdownRenderer content={content} />
-            </span>
+        <div className="flex gap-2 justify-between items-center">
+            <Paragraph className="text-sm">
+                <span dangerouslySetInnerHTML={{
+                    __html: _("Below is a list of all bank transactions imported in the system for the bank account {0} between {1} and {2}.", [`<strong>${bankAccount?.account_name}</strong>`, `<strong>${formattedFromDate}</strong>`, `<strong>${formattedToDate}</strong>`])
+                }} />
+            </Paragraph>
 
             <Button size='md' variant='subtle' asChild>
                 <Link to="/statement-importer">
@@ -278,9 +278,8 @@ const BankTransactionListView = () => {
             data={filteredResults}
             columns={transactionColumns}
             getRowId={(row) => row.name}
-            className="min-h-0 flex-1"
-            maxHeight="none"
-            scrollAreaClassName="flex-1"
+            maxHeight="calc(100vh - 200px)"
+            scrollAreaClassName="min-h-[calc(100vh-200px)]"
             emptyState={<Empty>
                 <EmptyMedia>
                     <ListIcon />

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

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

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

@@ -1,109 +0,0 @@
-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/CompanySelector.tsx

@@ -19,22 +19,13 @@ import {
 import { cn } from "@/lib/utils"
 import _ from "@/lib/translate"
 import { selectedBankAccountAtom } from "./bankRecAtoms"
-import { useFrappeGetDocList } from "frappe-react-sdk"
-import ErrorBanner from "@/components/ui/error-banner"
 
 const CompanySelector = ({ onChange }: { onChange?: (company: string) => void }) => {
     const [open, setOpen] = useState(false)
     const [searchQuery, setSearchQuery] = useState("")
 
-    const { data: companies, error } = useFrappeGetDocList("Company", {
-        limit: 0,
-        fields: ["name"],
-    }, 'company_list', {
-        revalidateOnFocus: false,
-        revalidateOnReconnect: false,
-    })
-
-    const options = companies?.map((company: { name: string }) => company.name) || []
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const options = window.frappe?.boot?.docs?.filter((doc: Record<string, any>) => doc.doctype === ":Company").map((company: Record<string, any>) => company.name) || []
 
     const setSelectedCompany = useSetAtom(selectedCompanyAtom)
     const setSelectedBankAccount = useSetAtom(selectedBankAccountAtom)
@@ -51,10 +42,6 @@ const CompanySelector = ({ onChange }: { onChange?: (company: string) => void })
         }
     }
 
-    if (error) {
-        return <ErrorBanner error={error} />
-    }
-
     return (<Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
             <Button

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

@@ -2,6 +2,7 @@ import { useAtomValue } from "jotai"
 import { MissingFiltersBanner } from "./MissingFiltersBanner"
 import { bankRecDateAtom, selectedBankAccountAtom } from "./bankRecAtoms"
 import { useCurrentCompany } from "@/hooks/useCurrentCompany"
+import { Paragraph } from "@/components/ui/typography"
 import type { ColumnDef } from "@tanstack/react-table"
 import { useCallback, useMemo } from "react"
 import { useFrappeGetCall, useFrappePostCall } from "frappe-react-sdk"
@@ -17,7 +18,6 @@ import { PartyPopper } from "lucide-react"
 import ErrorBanner from "@/components/ui/error-banner"
 import _ from "@/lib/translate"
 import { Empty, EmptyTitle, EmptyDescription, EmptyMedia, EmptyHeader } from "@/components/ui/empty"
-import MarkdownRenderer from "@/components/ui/markdown"
 
 const IncorrectlyClearedEntries = () => {
     const companyID = useCurrentCompany()
@@ -91,7 +91,7 @@ const IncorrectlyClearedEntriesView = () => {
                     })
                 })
         },
-        [clearClearingDate, mutate],
+        [clearClearingDate, mutate, _],
     )
 
     const accountCurrency = useMemo(
@@ -174,39 +174,37 @@ const IncorrectlyClearedEntriesView = () => {
                 ),
             },
         ],
-        [accountCurrency, onClearClick],
+        [_, accountCurrency, onClearClick],
     )
 
-    const content = _("This report shows all entries in the system where the <strong>clearance date is before the posting date</strong> which is incorrect.")
+    return <div className="space-y-4 py-2">
 
-    const entriesContent = _("Entries below have a posting date after {0} but the clearance date is before {1}.", [`<strong>${formattedToDate}</strong>`, `<strong>${formattedToDate}</strong>`])
-
-    return <div className="flex min-h-0 flex-1 flex-col space-y-4 py-2">
-
-        <div className="shrink-0">
-            <span className="text-p-sm">
-                <MarkdownRenderer content={content} />
+        <div>
+            <Paragraph className="text-sm">
+                <span dangerouslySetInnerHTML={{
+                    __html: _("This report shows all entries in the system where the <strong>clearance date is before the posting date</strong> which is incorrect.")
+                }} />
                 <br />
                 {data && data.message.result.length > 0 && <span>
-                    <MarkdownRenderer content={entriesContent} />
+                    <span dangerouslySetInnerHTML={{
+                        __html: _("Entries below have a posting date after {0} but the clearance date is before {1}.", [`<strong>${formattedToDate}</strong>`, `<strong>${formattedToDate}</strong>`])
+                    }} />
                     <br />
                     {_("You can reset the clearing dates of these entries here.")}
                 </span>}
-            </span>
+            </Paragraph>
         </div>
 
         {error && <ErrorBanner error={error} />}
 
         {data && data.message.result.length > 0 && (
-            <div className="flex min-h-0 flex-1 flex-col space-y-2">
-                <p className="shrink-0 text-ink-gray-5 text-sm">{_("Incorrectly cleared entries as per the report.")}</p>
+            <div className="space-y-2">
+                <p className="text-ink-gray-5 text-sm">{_("Incorrectly cleared entries as per the report.")}</p>
                 <ListView
                     data={data.message.result}
                     columns={incorrectlyClearedColumns}
                     getRowId={(row) => `${row.payment_entry}-${row.posting_date}`}
-                    className="min-h-0 flex-1"
-                    maxHeight="none"
-                    scrollAreaClassName="flex-1"
+                    maxHeight="min(70vh, 640px)"
                     emptyState={_("No rows to display.")}
                 />
             </div>

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 { useVirtualizer } from '@tanstack/react-virtual'
+import { Virtuoso } from 'react-virtuoso'
 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"
@@ -37,7 +37,7 @@ import { Link } from "react-router"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { InputGroup, InputGroupAddon, InputGroupText } from "@/components/ui/input-group"
 
-const MatchAndReconcile = () => {
+const MatchAndReconcile = ({ contentHeight }: { contentHeight: number }) => {
     const selectedBank = useAtomValue(selectedBankAccountAtom)
 
     if (!selectedBank) {
@@ -52,15 +52,15 @@ const MatchAndReconcile = () => {
     }
 
     return <>
-        <div className="flex min-h-0 flex-1 items-stretch space-x-2" >
-            <div className="flex min-h-0 flex-1 flex-col">
-                <H4 className="shrink-0 text-sm font-medium">{_("Unreconciled Transactions")}</H4>
-                <UnreconciledTransactions />
+        <div className={`flex items-start space-x-2`} >
+            <div className="flex-1">
+                <H4 className="text-sm font-medium">{_("Unreconciled Transactions")}</H4>
+                <UnreconciledTransactions contentHeight={contentHeight} />
             </div>
-            <Separator orientation="vertical" className="self-stretch" />
-            <div className="flex min-h-0 flex-1 flex-col px-1">
-                <H4 className="shrink-0 text-sm font-medium">{_("Match or Create")}</H4>
-                <VouchersSection />
+            <Separator orientation="vertical" style={{ minHeight: `${contentHeight}px` }} />
+            <div className="flex-1 px-1">
+                <H4 className="text-sm font-medium">{_("Match or Create")}</H4>
+                <VouchersSection contentHeight={contentHeight} />
             </div>
         </div>
         <TransferModal />
@@ -69,63 +69,8 @@ const MatchAndReconcile = () => {
     </>
 }
 
-/**
- * TanStack requires `estimateSize` for initial scroll range; `measureElement` on each row sets
- * the real height. The scroll container fills its flex parent rather than taking a pixel
- * height - the virtualizer observes its own rect, so it stays correct across resizes and any
- * layout change above it.
- */
-function VirtualizedListBody<T>({
-    items,
-    getItemKey,
-    children,
-    estimateSize = 74,
-}: {
-    items: T[]
-    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="min-h-0 flex-1 overflow-auto contain-strict"
-        >
-            <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 = () => {
+const UnreconciledTransactions = ({ contentHeight }: { contentHeight: number }) => {
     const bankAccount = useAtomValue(selectedBankAccountAtom)
 
     const currency = bankAccount?.account_currency ?? getCompanyCurrency(bankAccount?.company ?? '')
@@ -194,8 +139,8 @@ const UnreconciledTransactions = () => {
         return <UnreconciledTransactionsLoadingState />
     }
 
-    return <div className="flex min-h-0 flex-1 flex-col space-y-1">
-        <div className="flex py-2 w-full gap-2 shrink-0">
+    return <div className="space-y-1">
+        <div className="flex py-2 w-full gap-2">
 
             <InputGroup variant='outline'>
                 <label className="sr-only">{_("Search transactions")}</label>
@@ -277,13 +222,14 @@ const UnreconciledTransactions = () => {
             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.")} />}
 
-        <VirtualizedListBody
-            items={results}
-            estimateSize={74}
-            getItemKey={(transaction) => transaction.name}
-        >
-            {(transaction) => <UnreconciledTransactionItem transaction={transaction} />}
-        </VirtualizedListBody>
+        <Virtuoso
+            data={results}
+            itemContent={(_index, transaction) => (
+                <UnreconciledTransactionItem transaction={transaction} />
+            )}
+            style={{ minHeight: Math.max(contentHeight - 80, 400) }}
+            totalCount={results?.length}
+        />
 
     </div>
 }
@@ -381,7 +327,7 @@ const UnreconciledTransactionItem = ({ transaction }: { transaction: Unreconcile
 }
 
 
-const VouchersSection = () => {
+const VouchersSection = ({ contentHeight }: { contentHeight: number }) => {
 
     const selectedBank = useAtomValue(selectedBankAccountAtom)
     const selectedTransactions = useAtomValue(bankRecSelectedTransactionAtom(selectedBank?.name || ''))
@@ -402,8 +348,8 @@ const VouchersSection = () => {
         return <OptionsForMultipleTransactions transactions={selectedTransactions} />
     }
 
-    return <div className="mt-2 flex min-h-0 flex-1 flex-col">
-        <OptionsForSingleTransaction transaction={selectedTransactions[0]} />
+    return <div style={{ minHeight: contentHeight }} className="mt-2">
+        <OptionsForSingleTransaction transaction={selectedTransactions[0]} contentHeight={contentHeight} />
     </div>
 }
 
@@ -535,11 +481,11 @@ const OptionsForMultipleTransactions = ({ transactions }: { transactions: Unreco
 }
 
 
-const OptionsForSingleTransaction = ({ transaction }: { transaction: UnreconciledTransaction }) => {
+const OptionsForSingleTransaction = ({ transaction, contentHeight }: { transaction: UnreconciledTransaction, contentHeight: number }) => {
 
     const { setTransferModalOpen, setRecordPaymentModalOpen, setRecordJournalEntryModalOpen } = useKeyboardShortcuts()
 
-    return <div className="flex min-h-0 flex-1 flex-col gap-3">
+    return <div className="flex flex-col gap-3">
         <TooltipProvider>
             <div className="flex items-center justify-between pt-2">
                 <div className="flex gap-4 justify-center">
@@ -602,7 +548,7 @@ const OptionsForSingleTransaction = ({ transaction }: { transaction: Unreconcile
             </div>
         </TooltipProvider>
         {transaction.matched_transaction_rule && <RuleAction transaction={transaction} />}
-        <VouchersForTransaction transaction={transaction} />
+        <VouchersForTransaction transaction={transaction} contentHeight={contentHeight} />
     </div>
 }
 
@@ -613,8 +559,11 @@ 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 />
@@ -628,7 +577,6 @@ const RuleAction = ({ transaction }: { transaction: UnreconciledTransaction }) =
     }
 
     const getActionStyles = () => {
-        if (!rule) return {}
         switch (rule.classify_as) {
             case "Bank Entry":
                 return {
@@ -662,7 +610,6 @@ const RuleAction = ({ transaction }: { transaction: UnreconciledTransaction }) =
     }
 
     const handleActionClick = () => {
-        if (!rule) return
         switch (rule.classify_as) {
             case "Bank Entry":
                 setRecordJournalEntryModalOpen(true)
@@ -677,7 +624,6 @@ 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")
@@ -690,7 +636,8 @@ const RuleAction = ({ transaction }: { transaction: UnreconciledTransaction }) =
         }
     }
 
-    useHotkeys('alt+r', () => {
+    useHotkeys('meta+r', () => {
+        // 
         handleActionClick()
     }, {
         enabled: true,
@@ -700,10 +647,6 @@ 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">
@@ -774,12 +717,10 @@ const RuleAction = ({ transaction }: { transaction: UnreconciledTransaction }) =
     )
 }
 
-const VouchersForTransaction = ({ transaction }: { transaction: UnreconciledTransaction }) => {
+const VouchersForTransaction = ({ transaction, contentHeight }: { transaction: UnreconciledTransaction, contentHeight: number }) => {
 
     const { data: vouchers, isLoading, error } = useGetVouchersForTransaction(transaction)
 
-    const voucherList = vouchers?.message ?? []
-
     if (error) {
         return <ErrorBanner error={error} />
     }
@@ -800,13 +741,13 @@ const VouchersForTransaction = ({ transaction }: { transaction: UnreconciledTran
         </div>
     }
 
-    return <div className="relative flex min-h-0 flex-1 flex-col space-y-2">
-        <div className="flex shrink-0 items-center gap-2 text-sm text-ink-gray-5">
+    return <div className="relative space-y-2">
+        <div className="flex items-center gap-2 text-sm text-ink-gray-5">
             <Separator className="flex-1" />
             <span>or</span>
             <Separator className="flex-1" />
         </div>
-        {voucherList.length === 0 && <Empty className="my-4">
+        {vouchers?.message.length === 0 && <Empty className="my-4">
             <EmptyMedia>
                 <ReceiptIcon />
             </EmptyMedia>
@@ -815,13 +756,14 @@ const VouchersForTransaction = ({ transaction }: { transaction: UnreconciledTran
                 <EmptyTitle>{_("No vouchers found for this transaction")}</EmptyTitle>
             </EmptyHeader>
         </Empty>}
-        <VirtualizedListBody
-            items={voucherList}
-            estimateSize={121}
-            getItemKey={(voucher) => voucher.name}
-        >
-            {(voucher, index) => <VoucherItem voucher={voucher} index={index} />}
-        </VirtualizedListBody>
+        <Virtuoso
+            data={vouchers?.message}
+            itemContent={(index, voucher) => (
+                <VoucherItem voucher={voucher} index={index} />
+            )}
+            style={{ height: contentHeight }}
+            totalCount={vouchers?.message.length}
+        />
     </div >
 }
 

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

@@ -11,7 +11,6 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { H4, Paragraph } from "@/components/ui/typography"
 import { today } from "@/lib/date"
-import { evaluateAmountFormula } from "@/lib/amountFormula"
 import _ from "@/lib/translate"
 import { cn } from "@/lib/utils"
 import { BankTransactionRule } from "@/types/Accounts/BankTransactionRule"
@@ -446,10 +445,11 @@ const AmountFormulaRenderer = ({ value }: { value?: string }) => {
     // If it's a string and cannot be a number, then show it as a formula
 
     if (isNaN(Number(value))) {
+
         let calculatedValue = "";
 
         try {
-            calculatedValue = String(evaluateAmountFormula(value ?? "", 200));
+            calculatedValue = window.eval(`const transaction_amount = 200; ${value}`);
         } catch (error: unknown) {
             console.error(error);
             calculatedValue = "Error";

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

@@ -59,8 +59,8 @@ const SelectedTransactionDetails = ({ transaction, showAccount = false, account
                         </div>
                     </div>
                     <div className='flex flex-col gap-1'>
-                        <span className='text-p-sm'>{transaction.description}</span>
-                        {transaction.reference_number ? <span className='text-p-sm text-ink-gray-5'>{_("Ref")}: {transaction.reference_number}</span> : null}
+                        <span className='text-sm'>{transaction.description}</span>
+                        {transaction.reference_number ? <span className='text-sm text-ink-gray-5'>{_("Ref")}: {transaction.reference_number}</span> : null}
                         {showAccount && account ? <span className='text-sm text-ink-gray-5'>{_("GL Account")}: {account}</span> : null}
                     </div>
 

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

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

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

@@ -1,530 +0,0 @@
-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-p-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/BankReconciliation/logos.ts

@@ -231,7 +231,7 @@ export const BANK_LOGOS: { keywords: string[], logo: string, locale?: string[],
     {
         keywords: ['Federal Bank'],
         logo: 'Federal_Bank.png',
-        logoDark: 'Federal_Bank-Dark.png',
+        logoDark: 'Federal_Bank-dark.png',
         locale: ['India']
     },
     {

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

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

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

@@ -1,104 +1,151 @@
-import { useEffect, useRef, useState } from "react"
-import { toast } from "sonner"
+import { Table, TableBody, TableCell, TableHead, TableRow } from "@/components/ui/table"
+import { cn } from "@/lib/utils"
+import { ArrowDownRightIcon, ArrowUpDownIcon, ArrowUpRightIcon, BanknoteIcon, CalendarIcon, DollarSignIcon, FileTextIcon, ListIcon, ReceiptIcon } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import _ from "@/lib/translate"
-import RawTableGrid from "../RawTableGrid"
-import {
-    applyColumnMappingChange,
-    ColumnMapsTo,
-    GetStatementDetailsResponse,
-    useSetHeaderIndex,
-    useUpdateColumnMapping,
-} from "../import_utils"
+import { GetStatementDetailsResponse } from "../import_utils"
+import { useMemo } from "react"
 import { BankStatementImportLogColumnMap } from "@/types/Accounts/BankStatementImportLogColumnMap"
 
-type Mapping = Pick<BankStatementImportLogColumnMap, "index" | "maps_to" | "header_text" | "variable">
 
-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 CSVRawDataPreview = ({ data }: { data: GetStatementDetailsResponse }) => {
 
-const headerToState = (index?: number) => (index != null && index >= 0 ? index : null)
+    const column_mapping: Record<StandardColumnTypes, number> = useMemo(() => {
 
-const CSVRawDataPreview = ({
-    data,
-    mutate,
-}: {
-    data: GetStatementDetailsResponse
-    mutate: () => void
-}) => {
-    const isCompleted = data.doc.status === "Completed"
+        const col_map: Record<string, number> = {}
 
-    const [mapping, setMapping] = useState<Mapping[]>(() => toMapping(data.doc.column_mapping))
-    const [headerIndex, setHeaderIndex] = useState<number | null>(() =>
-        headerToState(data.doc.detected_header_index),
-    )
+        data.doc.column_mapping?.forEach(col => {
+            if (col.maps_to && col.maps_to !== "Do not import") {
+                col_map[col.maps_to] = col.index;
+            }
+        })
 
-    const { call: updateMapping, loading: savingMapping } = useUpdateColumnMapping()
-    const { call: setHeader, loading: savingHeader } = useSetHeaderIndex()
+        return col_map
 
-    const mappingRef = useRef(mapping)
-    const saveTimer = useRef<ReturnType<typeof setTimeout>>(undefined)
+    }, [data])
 
-    useEffect(() => () => clearTimeout(saveTimer.current), [])
+    const validColumns = Object.values(column_mapping)
 
-    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.")))
-    }
+    // Reverse the column mapping to get a map of column index to variable name
+    const columnIndexMap: Record<number, StandardColumnTypes> = Object.fromEntries(Object.entries(column_mapping).map(([variable, columnIndex]) => [columnIndex, variable as StandardColumnTypes]))
 
+    // Loop over the contents of the CSV file and show a preview - highlight the header row and the transaction rows
     return (
-        <RawTableGrid
-            rows={data.raw_data}
-            columnMapping={columnMappingRecord}
-            headerIndex={headerIndex}
-            editable={!isCompleted}
-            disabled={isCompleted || savingMapping || savingHeader}
-            onChangeMapping={onChangeMapping}
-            onSetHeader={onSetHeader}
-        />
+        <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 >
     )
 }
 
-export default CSVRawDataPreview
+type StandardColumnTypes = BankStatementImportLogColumnMap['maps_to'];
+
+const ColumnHeaderIcon = ({ columnType }: { columnType?: StandardColumnTypes }) => {
+    if (!columnType) {
+        return null
+    }
+
+    if (columnType === 'Amount') {
+        return <DollarSignIcon className="w-4 h-4" />
+    }
+
+    if (columnType === 'Withdrawal') {
+        return <ArrowUpRightIcon className="w-4 h-4 text-ink-red-3" />
+    }
+
+    if (columnType === 'Deposit') {
+        return <ArrowDownRightIcon className="w-4 h-4 text-ink-green-3" />
+    }
+
+    if (columnType === 'Balance') {
+        return <BanknoteIcon className="w-4 h-4" />
+    }
+
+    if (columnType === 'Date') {
+        return <CalendarIcon className="w-4 h-4" />
+    }
+
+    if (columnType === 'Description') {
+        return <FileTextIcon className="w-4 h-4" />
+    }
+
+    if (columnType === 'Reference') {
+        return <ReceiptIcon className="w-4 h-4" />
+    }
+
+    if (columnType === 'Transaction Type') {
+        return <ListIcon className="w-4 h-4" />
+    }
+
+    if (columnType === 'Debit/Credit') {
+        return <ArrowUpDownIcon className="w-4 h-4" />
+    }
+
+    return null
+}
+
+export default CSVRawDataPreview

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

@@ -14,7 +14,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
 import { useFrappeEventListener, useFrappePostCall } from 'frappe-react-sdk'
 import { toast } from 'sonner'
 import ErrorBanner from '@/components/ui/error-banner'
-import { Link, useNavigate } from 'react-router'
+import { Link, useNavigate } from 'react-router-dom'
 import { useMemo, useState } from 'react'
 import { Progress } from '@/components/ui/progress'
 import { useSetAtom } from 'jotai'
@@ -83,13 +83,10 @@ const StatementDetails = ({ data }: Props) => {
 
     }
 
-    // `progress` is a percentage (drives the bar); `current`/`total` are actual counts.
     const [progress, setProgress] = useState(0)
-    const [imported, setImported] = useState({ current: 0, total: 0 })
 
     useFrappeEventListener("bank-rec-statement-import-progress", (event) => {
         setProgress(event.progress)
-        setImported({ current: event.current ?? 0, total: event.total ?? 0 })
     })
 
     const file_name = data.doc.file.split("/").pop() ?? ""
@@ -115,9 +112,7 @@ const StatementDetails = ({ data }: Props) => {
                     {data.doc.status === 'Completed' ? <Badge theme='green'>{_("Completed")}</Badge> :
                         <Button onClick={onImport} disabled={loading || data.final_transactions?.length === 0} size='sm' type='button'>
                             {loading ? <Loader2Icon className='size-4 animate-spin' /> : null}
-                            {loading ? _("Importing...") : data.final_transactions?.length === 1
-                                ? _("Import 1 transaction")
-                                : _("Import {0} transactions", [data.final_transactions?.length?.toString() || "0"])}</Button>
+                            {loading ? _("Importing...") : _("Import {0} transactions", [data.final_transactions?.length?.toString() || "0"])}</Button>
                     }
                 </div>
                 <div className='flex items-start gap-4'>
@@ -134,9 +129,7 @@ const StatementDetails = ({ data }: Props) => {
                 </div>
 
                 {progress > 0 && <div className='flex flex-col gap-2'><Progress value={progress} max={100} size="lg" />
-                    <span className='text-sm'>{imported.total === 1
-                        ? _("Importing 1 transaction")
-                        : _("Importing {0} of {1} transactions", [imported.current.toString(), imported.total.toString()])}
+                    <span className='text-sm'>{_("Importing {0} transactions", [progress.toString()])}
                     </span>
                 </div>}
 
@@ -149,16 +142,11 @@ const StatementDetails = ({ data }: Props) => {
                             <TableCell>
                                 <div className='flex items-center gap-2'>
                                     <BankLogo bank={bank} />
-                                    <span className="text-sm">{bank?.account_name}</span>
+                                    <span className="tracking-tight text-sm font-medium">{bank?.account_name}</span>
+                                    <span title="GL Account" className="text-sm">{bank?.account}</span>
                                 </div>
                             </TableCell>
                         </TableRow>
-                        <TableRow>
-                            <TableHead>{_("Account")}</TableHead>
-                            <TableCell>
-                                <span title="GL Account" className="text-sm">{bank?.account}</span>
-                            </TableCell>
-                        </TableRow>
                         <TableRow>
                             <TableHead>{_("Statement File")}</TableHead>
                             <TableCell>
@@ -170,11 +158,7 @@ const StatementDetails = ({ data }: Props) => {
                         </TableRow>
                         <TableRow>
                             <TableHead>{_("Transaction Dates")}</TableHead>
-                            {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>
-                            )}
+                            <TableCell>{_("{0} to {1}", [formatDate(data.doc.start_date, "Do MMMM YYYY"), formatDate(data.doc.end_date, "Do MMMM YYYY")])}</TableCell>
                         </TableRow>
                         <TableRow>
                             <TableHead>{_("Number of Transactions")}</TableHead>

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

@@ -1,129 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,362 +0,0 @@
-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

@@ -1,222 +0,0 @@
-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,97 +1,6 @@
 import { BankStatementImportLog } from "@/types/Accounts/BankStatementImportLog"
-import { useFrappeGetCall, useFrappePostCall } from "frappe-react-sdk"
+import { useFrappeGetCall } 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,
@@ -121,7 +30,6 @@ export interface GetStatementDetailsResponse {
     date_format: string,
     raw_data: Array<Array<string>>,
     currency: string,
-    pdf_tables?: PDFTable[],
 }
 
 export const useGetStatementDetails = (id: string) => {
@@ -131,24 +39,4 @@ 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, OptionIcon, ReceiptIcon, SaveIcon, SettingsIcon, ZapIcon } from 'lucide-react'
+import { ArrowRightLeftIcon, HistoryIcon, LandmarkIcon, ReceiptIcon, SaveIcon, SettingsIcon, ZapIcon } from 'lucide-react'
 
 const Shortcuts = [
     {
@@ -32,7 +32,7 @@ const Shortcuts = [
         }
     },
     {
-        shortcut: <KbdGroup><Kbd><OptionIcon /></Kbd><Kbd>R</Kbd></KbdGroup>,
+        shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></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 = <K extends keyof AccountsSettings>(field: K, value: AccountsSettings[K]) => {
+    const onUpdate = (field: keyof AccountsSettings, value: any) => {
         mutate(updateDoc("Accounts Settings", "Accounts Settings", {
             [field]: value
         }), {

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

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

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

@@ -1,52 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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} theme={theme} asChild>
+    <Button variant={variant} size={size} asChild>
       <AlertDialogPrimitive.Cancel
         data-slot="alert-dialog-cancel"
         className={cn(className)}

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

@@ -18,7 +18,7 @@ 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
 }
 

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

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

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

@@ -387,7 +387,7 @@ function ListViewInner<TData>({
                                     )}
                                     role="columnheader"
                                 >
-                                    <div className="min-w-0 flex-1 truncate leading-snug">
+                                    <div className="min-w-0 flex-1 truncate">
                                         {header.isPlaceholder
                                             ? null
                                             : flexRender(header.column.columnDef.header, header.getContext())}

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

@@ -1,7 +0,0 @@
-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 leading-4 duration-300 ease-in-out w-auto opacity-100 text-ink-gray-6",
+                            "flex-1 shrink-0 truncate text-sm duration-300 ease-in-out w-auto opacity-100 text-ink-gray-6",
                             icon && "ms-2"
                         )}
                     >

banking/src/hooks/useCurrentCompany.ts

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

banking/src/hooks/useFiscalYear.ts

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

banking/src/hooks/useMultiFileUploadProgress.ts

@@ -1,37 +0,0 @@
-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/hooks/useResetScrollOnSearch.ts

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

banking/src/index.css

@@ -1,6 +1,5 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-@import "./styles/scroll-fade.css";
 
 @font-face {
   font-family: InterVariable;

banking/src/lib/amountFormula.ts

@@ -1,26 +0,0 @@
-import { Parser } from 'safe-expr-eval'
-
-const parser = new Parser()
-
-const PLAIN_NUMBER_PATTERN = /^-?\d+(\.\d+)?$/
-
-export function evaluateAmountFormula(expression: string, transactionAmount: number): number {
-    const trimmed = expression.trim()
-    if (!trimmed) {
-        return 0
-    }
-
-    if (PLAIN_NUMBER_PATTERN.test(trimmed)) {
-        return Number(trimmed)
-    }
-
-    try {
-        const result = parser.parse(trimmed).evaluate({ transaction_amount: transactionAmount })
-        if (typeof result !== 'number' || !Number.isFinite(result)) {
-            return 0
-        }
-        return result
-    } catch {
-        return 0
-    }
-}

banking/src/lib/frappe.ts

@@ -33,16 +33,6 @@ export const getErrorMessages = (error?: FrappeError | null): ParsedErrorMessage
         }
     })
 
-    // @ts-expect-error - some errors have _error_message
-    if (error?._error_message) {
-        eMessages.push({
-            // @ts-expect-error - some errors have _error_message
-            message: error?._error_message,
-            title: "Error",
-            indicator: "red"
-        })
-    }
-
     if (eMessages.length === 0) {
         // Get the message from the exception by removing the exc_type
         const indexOfFirstColon = error?.exception?.indexOf(':')

banking/src/lib/numbers.ts

@@ -1,3 +1,4 @@
+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,36 +1,47 @@
-import BankAccountBalancePanel from "@/components/features/BankReconciliation/BankBalance"
+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 { lazy, Suspense } from "react"
-import { AlertTriangleIcon, CheckCircleIcon, HomeIcon, LandmarkIcon, ListIcon, Loader2Icon, ScrollTextIcon, ShuffleIcon } from "lucide-react"
+import { useLayoutEffect, useRef, useState } from "react"
+import { AlertTriangleIcon, CheckCircleIcon, HomeIcon, LandmarkIcon, ListIcon, 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"
 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 = () => {
 
+    const [headerHeight, setHeaderHeight] = useState(0)
+
+    const ref = useRef<HTMLDivElement>(null)
+
+    useLayoutEffect(() => {
+        if (ref.current) {
+            setHeaderHeight(ref.current.clientHeight)
+        }
+    }, [])
+
+    const remainingHeightAfterTabs = window.innerHeight - headerHeight - 270
+
     return (
         <div>
-            {/* The page owns the viewport height and the tabs/lists below fill what's left, so
-                the virtualizers size themselves from layout instead of a measured pixel value. */}
-            <div className="px-2 pt-1 flex-col gap-4 md:flex hidden h-dvh">
-                <div className="flex flex-col gap-4 shrink-0">
-                    <div className="flex justify-between shrink-0">
+            <div className="p-4 flex-col gap-4 md:flex hidden">
+                <div ref={ref} className="flex flex-col gap-4">
+                    <div className="flex justify-between">
                         <div className="flex items-center gap-6">
                             <Breadcrumb>
                                 <BreadcrumbList>
@@ -43,7 +54,7 @@ const BankReconciliation = () => {
                                     <BreadcrumbItem>
                                         <BreadcrumbPage>
                                             <div className="flex gap-1 items-center">
-                                                {_("Banking")}
+                                                {_("Banking")} <Badge theme="violet" variant="subtle">{_("Beta")}</Badge>
                                             </div>
 
                                         </BreadcrumbPage>
@@ -60,8 +71,10 @@ const BankReconciliation = () => {
                             <BankRecDateFilter />
                         </div>
                     </div>
+                    <BankPicker />
+                    <BankBalance />
                 </div>
-                <BankRecWorkspace />
+                <BankRecTabs remainingHeightAfterTabs={remainingHeightAfterTabs} />
                 <BankTransactionUnreconcileModal />
             </div>
             <div className="md:hidden flex h-screen items-center justify-between">
@@ -91,53 +104,36 @@ const BankReconciliation = () => {
     )
 }
 
-const BankRecWorkspace = () => {
+const BankRecTabs = ({ remainingHeightAfterTabs }: { remainingHeightAfterTabs: number }) => {
     const selectedBankAccount = useAtomValue(selectedBankAccountAtom)
 
-    return <Tabs defaultValue="Match and Reconcile" className="min-h-0 flex-1 gap-4">
-        {/* Picker + tab strip stack on the left, balance panel beside them - the tab strip
-            fills height the panel needs anyway, so it costs no row of its own. The picker
-            scrolls horizontally (`min-w-0` lets it shrink so its overflow-x engages) while
-            the panel stays put, so the figures never scroll away. */}
-        {/* No gap here: the panel's own `border-s ps-4` supplies the separation, and a gap
-            would leave dead space the picker's edge fade can't reach. */}
-        <div className="flex shrink-0 items-stretch">
-            <div className="flex min-w-0 flex-1 flex-col justify-between gap-3">
-                <BankPicker />
-                {selectedBankAccount && <TabsList>
-                    <TabsTrigger value="Match and Reconcile"><ShuffleIcon /> {_("Match and Reconcile")}</TabsTrigger>
-                    <TabsTrigger value="Bank Reconciliation Statement"><ScrollTextIcon /> {_("Reconciliation Statement")}</TabsTrigger>
-                    <TabsTrigger value="Bank Transactions"><ListIcon />{_("Transactions")}</TabsTrigger>
-                    <TabsTrigger value="Bank Clearance Summary"><CheckCircleIcon />{_("Clearance Summary")}</TabsTrigger>
-                    <TabsTrigger value="Incorrectly Cleared Entries"><AlertTriangleIcon /> {_("Incorrectly Cleared")}</TabsTrigger>
-                </TabsList>}
-            </div>
-            {selectedBankAccount && <BankAccountBalancePanel />}
-        </div>
+    if (!selectedBankAccount) {
+        return null
+    }
 
-        {selectedBankAccount && <>
-            <TabsContent value="Match and Reconcile" className="flex min-h-0 flex-col">
-                <MatchAndReconcile />
-            </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" className="flex min-h-0 flex-col">
-                    <BankReconciliationStatement />
-                </TabsContent>
-                <TabsContent value="Bank Transactions" className="flex min-h-0 flex-col">
-                    <BankTransactions />
-                </TabsContent>
-                <TabsContent value="Bank Clearance Summary" className="flex min-h-0 flex-col">
-                    <BankClearanceSummary />
-                </TabsContent>
-                <TabsContent value="Incorrectly Cleared Entries" className="flex min-h-0 flex-col">
-                    <IncorrectlyClearedEntries />
-                </TabsContent>
-            </Suspense>
-        </>}
+    return <Tabs defaultValue="Match and Reconcile">
+        <TabsList>
+            <TabsTrigger value="Match and Reconcile"><ShuffleIcon /> {_("Match and Reconcile")}</TabsTrigger>
+            <TabsTrigger value="Bank Reconciliation Statement"><ScrollTextIcon /> {_("Bank Reconciliation Statement")}</TabsTrigger>
+            <TabsTrigger value="Bank Transactions"><ListIcon />{_("Bank Transactions")}</TabsTrigger>
+            <TabsTrigger value="Bank Clearance Summary"><CheckCircleIcon />{_("Bank Clearance Summary")}</TabsTrigger>
+            <TabsTrigger value="Incorrectly Cleared Entries"><AlertTriangleIcon /> {_("Incorrectly Cleared Entries")}</TabsTrigger>
+        </TabsList>
+        <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>
     </Tabs>
 }
 

banking/src/pages/BankStatementImporter.tsx

@@ -7,7 +7,6 @@ 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"
@@ -17,7 +16,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, useFrappeUpdateDoc } from "frappe-react-sdk"
+import { useFrappeCreateDoc, useFrappeFileUpload, useFrappeGetDocList } from "frappe-react-sdk"
 import { useAtom, useAtomValue } from "jotai"
 import { ListIcon, Loader2Icon } from "lucide-react"
 import { useState } from "react"
@@ -31,15 +30,11 @@ 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 = () => {
 
@@ -49,18 +44,12 @@ const BankStatementImporter = () => {
 
         const id = `new-bank-statement-import-log-${Date.now()}`
 
-        // 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], {
+        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
                 {
@@ -78,7 +67,6 @@ 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>
@@ -101,7 +89,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, XLSX and PDF files.")}
+                                    {_("Upload your bank statement file to start the import process. We support CSV, and XLSX files.")}
                                 </p>
                             </div>
                             <div>
@@ -117,27 +105,10 @@ 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
@@ -166,10 +137,9 @@ const StatementInstructions = () => {
         <DialogContent className="min-w-7xl">
             <DialogHeader>
                 <DialogTitle>{_("Statement Import Instructions")}</DialogTitle>
-                <DialogDescription>{_("We support uploading CSV, XLSX, XLS and PDF files. Please make sure the file contains the correct columns.")}</DialogDescription>
+                <DialogDescription>{_("We support uploading CSV, XLSX and XLS 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>
@@ -226,7 +196,7 @@ const StatementImportLog = () => {
             field: "creation",
             order: "desc"
         },
-        limit: 20
+        limit: 10
     }, bankAccount ? undefined : null, {
         revalidateOnFocus: false
     })
@@ -261,13 +231,7 @@ 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>
-                                    {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>{formatDate(item.start_date, 'Do MMM YYYY')} to {formatDate(item.end_date, 'Do MMM YYYY')}</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,7 +1,6 @@
-import { Suspense } from 'react'
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbList } from '@/components/ui/breadcrumb'
 import _ from '@/lib/translate'
-import { HomeIcon, Loader2Icon } from 'lucide-react'
+import { HomeIcon } from 'lucide-react'
 import { Link, Outlet } from 'react-router'
 
 const BankStatementImporterContainer = () => {
@@ -30,13 +29,7 @@ const BankStatementImporterContainer = () => {
                     </BreadcrumbList>
                 </Breadcrumb>
             </div>
-            <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>
+            <Outlet />
         </div>
     )
 }

banking/src/pages/ViewBankStatementImportLog.tsx

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

banking/src/styles/scroll-fade.css

@@ -1,94 +0,0 @@
-/* Scroll-edge fade mask for horizontal scroll containers (the bank picker strip).
-   Ported from Raven's `scroll-fade-x`; imported by index.css, since Tailwind processes
-   `@utility` in imported files the same as in the entry file.
-
-   The scroll-timeline keyframes reveal each edge's fade only when there IS content to scroll
-   in that direction - no fade on the left edge when scrolled fully left, none on the right at
-   the end. `@property` makes the fade animate smoothly rather than jumping.
-
-   Without scroll-timeline support (Firefox) there is deliberately NO fade at all: the fade
-   vars stay at their 0px initial value and the gradient stops collapse to the edges. A static
-   both-edges fallback was tried in Raven and removed - on a container with nothing to scroll
-   it dimmed the edges anyway, promising content that didn't exist. */
-
-@property --scroll-fade-l {
-  /* length-percentage, NOT length: the fade size is min(12%, …) - a percentage. A <length>
-     property rejects that value and reverts to initial-value (0px), zeroing the fade. */
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0px;
-}
-
-@property --scroll-fade-r {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0px;
-}
-
-@keyframes scroll-fade-reveal-l {
-  from {
-    --scroll-fade-l: 0px;
-  }
-
-  to {
-    --scroll-fade-l: var(--_scroll-fade-size-l);
-  }
-}
-
-@keyframes scroll-fade-reveal-r {
-  from {
-    --scroll-fade-r: var(--_scroll-fade-size-r);
-  }
-
-  to {
-    --scroll-fade-r: 0px;
-  }
-}
-
-@utility scroll-fade-x {
-  --_scroll-fade-size-l: var(--scroll-fade-l-size,
-      var(--scroll-fade-size, min(12%, calc(var(--spacing, 0.25rem) * 10))));
-  --_scroll-fade-size-r: var(--scroll-fade-r-size,
-      var(--scroll-fade-size, min(12%, calc(var(--spacing, 0.25rem) * 10))));
-  /* Eased (smoothstep) alpha ramp, sampled finely so it reads as a smooth curve, NOT fading
-     all the way to transparent: the edge floors at 0.25 (content dims, never vanishes), ramping
-     up to a full 1 for the body. The opaque end MUST be 1 or everything would be permanently
-     dimmed. Stops collapse to the edge when the size animates to 0, so the true first/last card
-     is never dimmed at rest. Tune the floor - higher (~0.4) = subtler, lower (~0.1) = stronger. */
-  --scroll-fade-inline: linear-gradient(to right,
-      rgba(0, 0, 0, 0.25) 0,
-      rgba(0, 0, 0, 0.282) calc(var(--scroll-fade-l, 0px) * 0.125),
-      rgba(0, 0, 0, 0.367) calc(var(--scroll-fade-l, 0px) * 0.25),
-      rgba(0, 0, 0, 0.487) calc(var(--scroll-fade-l, 0px) * 0.375),
-      rgba(0, 0, 0, 0.625) calc(var(--scroll-fade-l, 0px) * 0.5),
-      rgba(0, 0, 0, 0.763) calc(var(--scroll-fade-l, 0px) * 0.625),
-      rgba(0, 0, 0, 0.883) calc(var(--scroll-fade-l, 0px) * 0.75),
-      rgba(0, 0, 0, 0.968) calc(var(--scroll-fade-l, 0px) * 0.875),
-      rgba(0, 0, 0, 1) var(--scroll-fade-l, 0px),
-      rgba(0, 0, 0, 1) calc(100% - var(--scroll-fade-r, 0px)),
-      rgba(0, 0, 0, 0.968) calc(100% - var(--scroll-fade-r, 0px) * 0.875),
-      rgba(0, 0, 0, 0.883) calc(100% - var(--scroll-fade-r, 0px) * 0.75),
-      rgba(0, 0, 0, 0.763) calc(100% - var(--scroll-fade-r, 0px) * 0.625),
-      rgba(0, 0, 0, 0.625) calc(100% - var(--scroll-fade-r, 0px) * 0.5),
-      rgba(0, 0, 0, 0.487) calc(100% - var(--scroll-fade-r, 0px) * 0.375),
-      rgba(0, 0, 0, 0.367) calc(100% - var(--scroll-fade-r, 0px) * 0.25),
-      rgba(0, 0, 0, 0.282) calc(100% - var(--scroll-fade-r, 0px) * 0.125),
-      rgba(0, 0, 0, 0.25) 100%);
-  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
-  mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
-  -webkit-mask-composite: source-in;
-  mask-composite: intersect;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-
-  @supports (animation-timeline: scroll()) {
-    animation:
-      scroll-fade-reveal-l 1ms ease-in-out,
-      scroll-fade-reveal-r 1ms ease-in-out;
-    animation-timeline: scroll(self x), scroll(self x);
-    animation-range:
-      0 var(--scroll-fade-reveal, calc(var(--spacing, 0.25rem) * 24)),
-      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing, 0.25rem) * 24))) 100%;
-    animation-fill-mode: both;
-  }
-}

banking/src/types/Accounts/BankAccount.ts

@@ -38,8 +38,6 @@ 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,6 +47,4 @@ 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,35 +21,5 @@ 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'
-					}
-				},
-			},
-		},
 	},
 });

crowdin.yml

@@ -1,5 +1,14 @@
-preserve_hierarchy: true
-
 files:
   - source: /erpnext/locale/main.pot
     translation: /erpnext/locale/%two_letters_code%.po
+pull_request_title: "fix: sync translations from crowdin"
+pull_request_labels:
+  - translation
+  - skip-release-notes
+pull_request_reviewers:
+  - barredterra # change to your GitHub username if you copied this file
+commit_message: "fix: %language% translations"
+append_commit_message: false
+languages_mapping:
+  two_letters_code:
+    pt-BR: pt_BR

erpnext/__init__.py

@@ -3,6 +3,8 @@ import inspect
 from typing import TypeVar
 
 import frappe
+from frappe.model.document import Document
+from frappe.utils.user import is_website_user
 
 __version__ = "17.0.0-dev"
 
@@ -153,8 +155,6 @@ def allow_regional(fn):
 
 
 def check_app_permission():
-	from frappe.utils.user import is_website_user
-
 	if frappe.session.user == "Administrator":
 		return True
 
@@ -175,16 +175,9 @@ def normalize_ctx_input(T: type) -> callable:
 	- Casting the result to the specified type T
 	"""
 
-	from frappe.model.document import Document
-
 	def decorator(func: callable):
 		# conserve annotations for frappe.utils.typing_validations
-		@functools.wraps(
-			func,
-			assigned=(
-				a for a in functools.WRAPPER_ASSIGNMENTS if a not in ("__annotations__", "__annotate__")
-			),
-		)
+		@functools.wraps(func, assigned=(a for a in functools.WRAPPER_ASSIGNMENTS if a != "__annotations__"))
 		def wrapper(ctx: T | Document | dict | str, *args, **kwargs):
 			if isinstance(ctx, Document):
 				ctx = T(**ctx.as_dict())

erpnext/accounts/bulk_payment.py

@@ -1,190 +0,0 @@
-import frappe
-from frappe import _
-from frappe.utils import flt
-
-from erpnext.accounts.doctype.payment_entry.payment_entry import (
-	get_outstanding_reference_documents,
-	get_payment_entry,
-)
-
-
-@frappe.whitelist(methods=["POST"])
-def create_payment_entries(invoices: str | list | None = None):
-	"""Create draft Payment Entries from AP report invoice selection."""
-	frappe.has_permission("Payment Entry", "create", throw=True)
-
-	names = [d["voucher_no"] for d in frappe.parse_json(invoices or "[]") if d.get("voucher_no")]
-	if not names:
-		frappe.throw(_("No Purchase Invoices selected"))
-
-	payable, excluded = _partition_payable_invoices(names)
-	if not payable:
-		frappe.throw(_("None of the selected invoices are payable"))
-
-	# invoices sharing a (supplier, payable account) are combined into one Payment Entry
-	groups = {}
-	for d in payable:
-		key = (d["supplier"], d["party_account"])
-		groups.setdefault(
-			key, {"supplier": d["supplier"], "party_account": d["party_account"], "vouchers": []}
-		)["vouchers"].append(d["voucher_no"])
-
-	created, failed = 0, 0
-	for group in groups.values():
-		if _create_payment_entry(group):
-			created += 1
-		else:
-			failed += 1
-
-	message = _("Created {0} draft Payment Entries").format(created)
-	if excluded:
-		message += " — " + _("{0} excluded (not payable)").format(len(excluded))
-	if failed:
-		message += " — " + _("{0} failed (see Error Log)").format(failed)
-	frappe.msgprint(message, title=_("Bulk Payment Entries"), indicator="green")
-
-
-@frappe.whitelist()
-def get_payable_invoices(invoices: str | list | None = None):
-	"""Return the live payable subset of the selected invoices for the report dialog."""
-	frappe.has_permission("Payment Entry", "create", throw=True)
-
-	names = [d["voucher_no"] for d in frappe.parse_json(invoices or "[]") if d.get("voucher_no")]
-	payable, excluded = _partition_payable_invoices(names)
-
-	currency = None
-	if payable:
-		company = frappe.get_cached_value("Purchase Invoice", payable[0]["voucher_no"], "company")
-		currency = frappe.get_cached_value("Company", company, "default_currency")
-
-	return {"payable": payable, "excluded": excluded, "currency": currency}
-
-
-def _partition_payable_invoices(names):
-	"""Split submitted Purchase Invoices into payable ones and excluded ones (with reason).
-
-	Returns are debit notes, internal transfers are inter-company, and non-positive
-	outstanding means already settled — none are valid targets for a supplier payment.
-	"""
-	if not names:
-		return [], []
-
-	rows = frappe.get_list(
-		"Purchase Invoice",
-		filters={"name": ["in", names], "docstatus": 1},
-		fields=[
-			"name",
-			"supplier",
-			"credit_to",
-			"outstanding_amount",
-			"conversion_rate",
-			"is_return",
-			"is_internal_supplier",
-		],
-		limit_page_length=0,
-	)
-
-	payable, excluded = [], []
-	for r in rows:
-		if r.is_return:
-			excluded.append({"voucher_no": r.name, "reason": _("Debit Note")})
-		elif r.is_internal_supplier:
-			excluded.append({"voucher_no": r.name, "reason": _("Internal Transfer")})
-		elif flt(r.outstanding_amount) <= 0:
-			excluded.append({"voucher_no": r.name, "reason": _("Already Paid")})
-		else:
-			payable.append(
-				{
-					"voucher_no": r.name,
-					"supplier": r.supplier,
-					"party_account": r.credit_to,
-					"outstanding": flt(r.outstanding_amount) * flt(r.conversion_rate or 1),
-				}
-			)
-
-	# names not returned were cancelled/deleted or no longer readable after the report loaded
-	found = {r.name for r in rows}
-	for name in names:
-		if name not in found:
-			excluded.append({"voucher_no": name, "reason": _("Not available")})
-
-	return payable, excluded
-
-
-def _create_payment_entry(group):
-	supplier = group["supplier"]
-	try:
-		frappe.db.savepoint("bulk_pe")
-		if len(group["vouchers"]) == 1:
-			pe = _build_single_payment_entry(group["vouchers"][0])
-		else:
-			pe = _build_grouped_payment_entry(supplier, group["party_account"], group["vouchers"])
-
-		if not pe:
-			frappe.db.rollback(save_point="bulk_pe")
-			frappe.log_error(
-				title=_("Bulk Payment Entry skipped for {0}").format(supplier),
-				message=_("No outstanding amount for the selected invoice(s)."),
-			)
-			return False
-
-		pe.flags.ignore_validate = True
-		pe.set_title_field()
-		pe.insert(ignore_mandatory=True)
-		return True
-	except Exception:
-		frappe.db.rollback(save_point="bulk_pe")
-		frappe.log_error(title=_("Bulk Payment Entry creation failed for {0}").format(supplier))
-		return False
-
-
-def _build_single_payment_entry(name):
-	pe = get_payment_entry("Purchase Invoice", name)
-	# guard against a stale report row: nothing to allocate means the invoice is already settled
-	if not pe.references or not any(flt(r.allocated_amount) for r in pe.references):
-		return None
-	return pe
-
-
-def _build_grouped_payment_entry(supplier, party_account, names):
-	name_set = set(names)
-	pe = get_payment_entry("Purchase Invoice", names[0])
-	pe.set("references", [])
-
-	refs = get_outstanding_reference_documents(
-		{
-			"party_type": "Supplier",
-			"party": supplier,
-			"party_account": party_account,
-			"company": pe.company,
-			"vouchers": [frappe._dict(voucher_type="Purchase Invoice", voucher_no=n) for n in names],
-		}
-	)
-
-	# get_negative_outstanding_invoices ignores the vouchers filter, so bound refs to the selection
-	for r in refs:
-		if r.voucher_type != "Purchase Invoice" or r.voucher_no not in name_set:
-			continue
-		pe.append(
-			"references",
-			{
-				"reference_doctype": r.voucher_type,
-				"reference_name": r.voucher_no,
-				"bill_no": r.get("bill_no"),
-				"due_date": r.get("due_date"),
-				"payment_term": r.get("payment_term"),
-				"total_amount": r.invoice_amount,
-				"outstanding_amount": r.outstanding_amount,
-				"allocated_amount": r.outstanding_amount,
-				"exchange_rate": r.get("exchange_rate") or 1,
-			},
-		)
-
-	if not pe.references:
-		return None
-
-	# received_amount is in paid_to account currency; convert to paid_from account currency for paid_amount
-	pe.received_amount = sum(r.allocated_amount for r in pe.references)
-	pe.paid_amount = flt(pe.received_amount * pe.target_exchange_rate, pe.precision("paid_amount"))
-	pe.set_amounts()
-	return pe

erpnext/accounts/custom/address.py

@@ -17,7 +17,7 @@ class ERPNextAddress(Address):
 
 	def link_address(self):
 		"""Link address based on owner"""
-		if self.get("is_your_company_address"):
+		if self.is_your_company_address:
 			return
 
 		return super().link_address()
@@ -28,9 +28,7 @@ class ERPNextAddress(Address):
 				self.is_your_company_address = 1
 
 	def validate_reference(self):
-		if self.get("is_your_company_address") and not [
-			row for row in self.links if row.link_doctype == "Company"
-		]:
+		if self.is_your_company_address and not [row for row in self.links if row.link_doctype == "Company"]:
 			frappe.throw(
 				_(
 					"Address needs to be linked to a Company. Please add a row for Company in the Links table."
@@ -71,6 +69,4 @@ def get_shipping_address(company: str, address: str | None = None):
 	if address:
 		address_as_dict = address[0]
 		name, address_template = get_address_templates(address_as_dict)
-		return address_as_dict.get("name"), frappe.render_template(
-			address_template, address_as_dict, restrict_globals=True
-		)
+		return address_as_dict.get("name"), frappe.render_template(address_template, address_as_dict)

erpnext/accounts/dashboard_chart/profit_and_loss/profit_and_loss.json

@@ -9,7 +9,7 @@
  "idx": 0,
  "is_public": 1,
  "is_standard": 1,
- "modified": "2026-09-04 12:37:31.673782",
+ "modified": "2025-12-19 12:37:31.673782",
  "modified_by": "Administrator",
  "module": "Accounts",
  "name": "Profit and Loss",
@@ -17,6 +17,7 @@
  "owner": "Administrator",
  "report_name": "Profit and Loss Statement",
  "roles": [],
+ "show_values_over_chart": 1,
  "timeseries": 0,
  "type": "Line",
  "use_report_chart": 1,

erpnext/accounts/deferred_revenue.py

@@ -1,7 +1,6 @@
 import frappe
 from frappe import _
 from frappe.email import sendmail_to_system_managers
-from frappe.query_builder.functions import IfNull, Sum
 from frappe.utils import (
 	add_days,
 	add_months,
@@ -54,24 +53,20 @@ def validate_service_stop_date(doc):
 
 
 def build_conditions(process_type, account, company):
-	if process_type == "Income":
-		item = frappe.qb.DocType("Sales Invoice Item")
-		parent = frappe.qb.DocType("Sales Invoice")
-		deferred_account = item.deferred_revenue_account
-	else:
-		item = frappe.qb.DocType("Purchase Invoice Item")
-		parent = frappe.qb.DocType("Purchase Invoice")
-		deferred_account = item.deferred_expense_account
+	conditions = ""
+	deferred_account = (
+		"item.deferred_revenue_account" if process_type == "Income" else "item.deferred_expense_account"
+	)
 
 	if account:
-		return deferred_account == account
+		conditions += f"AND {deferred_account}={frappe.db.escape(account)}"
 	elif company:
-		return parent.company == company
+		conditions += f"AND p.company = {frappe.db.escape(company)}"
 
-	return None
+	return conditions
 
 
-def convert_deferred_expense_to_expense(deferred_process, start_date=None, end_date=None, conditions=None):
+def convert_deferred_expense_to_expense(deferred_process, start_date=None, end_date=None, conditions=""):
 	# book the expense/income on the last day, but it will be trigger on the 1st of month at 12:00 AM
 
 	if not start_date:
@@ -80,25 +75,17 @@ def convert_deferred_expense_to_expense(deferred_process, start_date=None, end_d
 		end_date = add_days(today(), -1)
 
 	# check for the purchase invoice for which GL entries has to be done
-	item = frappe.qb.DocType("Purchase Invoice Item")
-	parent = frappe.qb.DocType("Purchase Invoice")
-	query = (
-		frappe.qb.from_(item)
-		.inner_join(parent)
-		.on(item.parent == parent.name)
-		.select(item.parent)
-		.distinct()
-		.where(
-			(item.service_start_date <= end_date)
-			& (item.service_end_date >= start_date)
-			& (item.enable_deferred_expense == 1)
-			& (item.docstatus == 1)
-			& (IfNull(item.amount, 0) > 0)
-		)
-	)
-	if conditions is not None:
-		query = query.where(conditions)
-	invoices = query.run(pluck=True)
+	invoices = frappe.db.sql_list(
+		f"""
+		select distinct item.parent
+		from `tabPurchase Invoice Item` item, `tabPurchase Invoice` p
+		where item.service_start_date<=%s and item.service_end_date>=%s
+		and item.enable_deferred_expense = 1 and item.parent=p.name
+		and item.docstatus = 1 and ifnull(item.amount, 0) > 0
+		{conditions}
+	""",
+		(end_date, start_date),
+	)  # nosec
 
 	# For each invoice, book deferred expense
 	for invoice in invoices:
@@ -109,7 +96,7 @@ def convert_deferred_expense_to_expense(deferred_process, start_date=None, end_d
 		send_mail(deferred_process)
 
 
-def convert_deferred_revenue_to_income(deferred_process, start_date=None, end_date=None, conditions=None):
+def convert_deferred_revenue_to_income(deferred_process, start_date=None, end_date=None, conditions=""):
 	# book the expense/income on the last day, but it will be trigger on the 1st of month at 12:00 AM
 
 	if not start_date:
@@ -118,25 +105,17 @@ def convert_deferred_revenue_to_income(deferred_process, start_date=None, end_da
 		end_date = add_days(today(), -1)
 
 	# check for the sales invoice for which GL entries has to be done
-	item = frappe.qb.DocType("Sales Invoice Item")
-	parent = frappe.qb.DocType("Sales Invoice")
-	query = (
-		frappe.qb.from_(item)
-		.inner_join(parent)
-		.on(item.parent == parent.name)
-		.select(item.parent)
-		.distinct()
-		.where(
-			(item.service_start_date <= end_date)
-			& (item.service_end_date >= start_date)
-			& (item.enable_deferred_revenue == 1)
-			& (item.docstatus == 1)
-			& (IfNull(item.amount, 0) > 0)
-		)
-	)
-	if conditions is not None:
-		query = query.where(conditions)
-	invoices = query.run(pluck=True)
+	invoices = frappe.db.sql_list(
+		f"""
+		select distinct item.parent
+		from `tabSales Invoice Item` item, `tabSales Invoice` p
+		where item.service_start_date<=%s and item.service_end_date>=%s
+		and item.enable_deferred_revenue = 1 and item.parent=p.name
+		and item.docstatus = 1 and ifnull(item.amount, 0) > 0
+		{conditions}
+	""",
+		(end_date, start_date),
+	)  # nosec
 
 	for invoice in invoices:
 		doc = frappe.get_doc("Sales Invoice", invoice)
@@ -157,39 +136,26 @@ def get_booking_dates(doc, item, posting_date=None, prev_posting_date=None):
 	)
 
 	if not prev_posting_date:
-		prev_gl_entry = frappe.get_all(
-			"GL Entry",
-			filters={
-				"company": doc.company,
-				"account": item.get(deferred_account),
-				"voucher_type": doc.doctype,
-				"voucher_no": doc.name,
-				"voucher_detail_no": item.name,
-				"is_cancelled": 0,
-			},
-			fields=["name", "posting_date"],
-			order_by="posting_date desc",
-			limit=1,
+		prev_gl_entry = frappe.db.sql(
+			"""
+			select name, posting_date from `tabGL Entry` where company=%s and account=%s and
+			voucher_type=%s and voucher_no=%s and voucher_detail_no=%s
+			and is_cancelled = 0
+			order by posting_date desc limit 1
+		""",
+			(doc.company, item.get(deferred_account), doc.doctype, doc.name, item.name),
+			as_dict=True,
 		)
 
-		je = frappe.qb.DocType("Journal Entry")
-		jea = frappe.qb.DocType("Journal Entry Account")
-		prev_gl_via_je = (
-			frappe.qb.from_(je)
-			.inner_join(jea)
-			.on(je.name == jea.parent)
-			.select(je.name, je.posting_date)
-			.where(
-				(je.company == doc.company)
-				& (jea.account == item.get(deferred_account))
-				& (jea.reference_type == doc.doctype)
-				& (jea.reference_name == doc.name)
-				& (jea.reference_detail_no == item.name)
-				& (jea.docstatus < 2)
-			)
-			.orderby(je.posting_date, order=frappe.qb.desc)
-			.limit(1)
-			.run(as_dict=True)
+		prev_gl_via_je = frappe.db.sql(
+			"""
+			SELECT p.name, p.posting_date FROM `tabJournal Entry` p, `tabJournal Entry Account` c
+			WHERE p.name = c.parent and p.company=%s and c.account=%s
+			and c.reference_type=%s and c.reference_name=%s
+			and c.reference_detail_no=%s and c.docstatus < 2 order by posting_date desc limit 1
+		""",
+			(doc.company, item.get(deferred_account), doc.doctype, doc.name, item.name),
+			as_dict=True,
 		)
 
 		if prev_gl_via_je:
@@ -311,47 +277,26 @@ def get_already_booked_amount(doc, item):
 		total_credit_debit, total_credit_debit_currency = "credit", "credit_in_account_currency"
 		deferred_account = "deferred_expense_account"
 
-	gle = frappe.qb.DocType("GL Entry")
-	gl_entries_details = (
-		frappe.qb.from_(gle)
-		.select(
-			Sum(gle[total_credit_debit]).as_("total_credit"),
-			Sum(gle[total_credit_debit_currency]).as_("total_credit_in_account_currency"),
-			gle.voucher_detail_no,
-		)
-		.where(
-			(gle.company == doc.company)
-			& (gle.account == item.get(deferred_account))
-			& (gle.voucher_type == doc.doctype)
-			& (gle.voucher_no == doc.name)
-			& (gle.voucher_detail_no == item.name)
-			& (gle.is_cancelled == 0)
-		)
-		.groupby(gle.voucher_detail_no)
-		.run(as_dict=True)
+	gl_entries_details = frappe.db.sql(
+		"""
+		select sum({}) as total_credit, sum({}) as total_credit_in_account_currency, voucher_detail_no
+		from `tabGL Entry` where company=%s and account=%s and voucher_type=%s and voucher_no=%s and voucher_detail_no=%s
+		and is_cancelled = 0
+		group by voucher_detail_no
+	""".format(total_credit_debit, total_credit_debit_currency),
+		(doc.company, item.get(deferred_account), doc.doctype, doc.name, item.name),
+		as_dict=True,
 	)
 
-	je = frappe.qb.DocType("Journal Entry")
-	jea = frappe.qb.DocType("Journal Entry Account")
-	journal_entry_details = (
-		frappe.qb.from_(je)
-		.inner_join(jea)
-		.on(je.name == jea.parent)
-		.select(
-			Sum(jea[total_credit_debit]).as_("total_credit"),
-			Sum(jea[total_credit_debit_currency]).as_("total_credit_in_account_currency"),
-			jea.reference_detail_no,
-		)
-		.where(
-			(je.company == doc.company)
-			& (jea.account == item.get(deferred_account))
-			& (jea.reference_type == doc.doctype)
-			& (jea.reference_name == doc.name)
-			& (jea.reference_detail_no == item.name)
-			& (je.docstatus < 2)
-		)
-		.groupby(jea.reference_detail_no)
-		.run(as_dict=True)
+	journal_entry_details = frappe.db.sql(
+		"""
+		SELECT sum(c.{}) as total_credit, sum(c.{}) as total_credit_in_account_currency, reference_detail_no
+		FROM `tabJournal Entry` p , `tabJournal Entry Account` c WHERE p.name = c.parent and
+		p.company = %s and c.account=%s and c.reference_type=%s and c.reference_name=%s and c.reference_detail_no=%s
+		and p.docstatus < 2 group by reference_detail_no
+	""".format(total_credit_debit, total_credit_debit_currency),
+		(doc.company, item.get(deferred_account), doc.doctype, doc.name, item.name),
+		as_dict=True,
 	)
 
 	already_booked_amount = gl_entries_details[0].total_credit if gl_entries_details else 0
@@ -582,7 +527,6 @@ def make_gl_entries(
 				frappe.db.commit()
 		except Exception as e:
 			if frappe.in_test:
-				frappe.db.rollback()
 				doc.log_error(f"Error while processing deferred accounting for Invoice {doc.name}")
 				raise e
 			else:

erpnext/accounts/doctype/account/account.json

@@ -122,7 +122,6 @@
    "description": "Setting Account Type helps in selecting this Account in transactions.",
    "fieldname": "account_type",
    "fieldtype": "Select",
-   "in_preview": 1,
    "in_standard_filter": 1,
    "label": "Account Type",
    "oldfieldname": "account_type",
@@ -204,7 +203,7 @@
  "idx": 1,
  "is_tree": 1,
  "links": [],
- "modified": "2026-09-03 12:59:42.190900",
+ "modified": "2026-04-14 18:14:42.202065",
  "modified_by": "Administrator",
  "module": "Accounts",
  "name": "Account",
@@ -265,46 +264,6 @@
   {
    "role": "HR Manager",
    "select": 1
-  },
-  {
-   "role": "Delivery Manager",
-   "select": 1
-  },
-  {
-   "role": "Delivery User",
-   "select": 1
-  },
-  {
-   "role": "Maintenance Manager",
-   "select": 1
-  },
-  {
-   "role": "Maintenance User",
-   "select": 1
-  },
-  {
-   "role": "Manufacturing Manager",
-   "select": 1
-  },
-  {
-   "role": "Manufacturing User",
-   "select": 1
-  },
-  {
-   "role": "Purchase Master Manager",
-   "select": 1
-  },
-  {
-   "role": "Quality Manager",
-   "select": 1
-  },
-  {
-   "role": "Sales Master Manager",
-   "select": 1
-  },
-  {
-   "role": "Stock Manager",
-   "select": 1
   }
  ],
  "row_format": "Dynamic",

erpnext/accounts/doctype/account/account.py

@@ -121,7 +121,6 @@ class Account(NestedSet):
 		self.validate_account_currency()
 		self.validate_root_company_and_sync_account_to_children()
 		self.validate_receivable_payable_account_type()
-		self.validate_stock_account_type_change()
 
 	def validate_parent_child_account_type(self):
 		if self.parent_account:
@@ -176,19 +175,16 @@ 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:
-					query = query.set(Account.report_type, self.report_type)
-					updated = True
+					frappe.db.sql(
+						"update `tabAccount` set report_type=%s where lft > %s and rgt < %s",
+						(self.report_type, self.lft, self.rgt),
+					)
 				if self.root_type != db_value.root_type:
-					query = query.set(Account.root_type, self.root_type)
-					updated = True
-
-				if updated:
-					query.run()
+					frappe.db.sql(
+						"update `tabAccount` set root_type=%s where lft > %s and rgt < %s",
+						(self.root_type, self.lft, self.rgt),
+					)
 
 		if self.root_type and not self.report_type:
 			self.report_type = (
@@ -213,36 +209,6 @@ class Account(NestedSet):
 				frappe.msgprint(msg)
 				self.add_comment("Comment", msg)
 
-	def validate_stock_account_type_change(self):
-		doc_before_save = self.get_doc_before_save()
-		if not (doc_before_save and doc_before_save.account_type == "Stock"):
-			return
-
-		if self.account_type == "Stock":
-			return
-
-		if self.stock_ledger_entry_exists():
-			frappe.throw(
-				_(
-					"The account type of {0} cannot be changed from {1} because stock ledger entries exist against it."
-				).format(frappe.bold(self.name), frappe.bold(_("Stock")))
-			)
-
-	def stock_ledger_entry_exists(self):
-		from erpnext.stock import get_warehouse_account_map
-
-		warehouse_account = get_warehouse_account_map(self.company)
-		warehouses = [wh for wh, details in warehouse_account.items() if details.account == self.name]
-		if not warehouses:
-			return False
-
-		return bool(
-			frappe.db.count(
-				"Stock Ledger Entry",
-				filters={"warehouse": ("in", warehouses), "is_cancelled": 0},
-			)
-		)
-
 	def validate_root_details(self):
 		doc_before_save = self.get_doc_before_save()
 
@@ -265,7 +231,7 @@ class Account(NestedSet):
 			if not frappe.db.get_value(
 				"Account", {"account_name": self.account_name, "company": ancestors[0]}, "name"
 			):
-				frappe.throw(_("Please add the account to root level Company - {0}").format(ancestors[0]))
+				frappe.throw(_("Please add the account to root level Company - {}").format(ancestors[0]))
 		elif self.parent_account:
 			descendants = get_descendants_of("Company", self.company)
 			if not descendants:
@@ -483,7 +449,11 @@ class Account(NestedSet):
 		return frappe.db.get_value("GL Entry", {"account": self.name})
 
 	def check_if_child_exists(self):
-		return frappe.db.exists("Account", {"parent_account": self.name, "docstatus": ["!=", 2]})
+		return frappe.db.sql(
+			"""select name from `tabAccount` where parent_account = %s
+			and docstatus != 2""",
+			self.name,
+		)
 
 	def validate_mandatory(self):
 		if not self.root_type:
@@ -503,24 +473,14 @@ 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):
-	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 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,
 	)
 
-	return query.run(as_list=1)
-
 
 def get_account_currency(account):
 	"""Helper function to get account currency"""
@@ -561,7 +521,6 @@ def update_account_number(
 ):
 	_ensure_idle_system()
 	account = frappe.get_cached_doc("Account", name)
-	account.check_permission("write")
 	if not account:
 		return
 
@@ -623,12 +582,10 @@ 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))
 
@@ -690,15 +647,8 @@ def _ensure_idle_system():
 
 	last_gl_update = None
 	try:
-		if frappe.db.db_type == "postgres":
-			# The MariaDB branch blocks new GL inserts via the gap lock its for_update read takes;
-			# a postgres row lock never blocks inserts, so take an EXCLUSIVE table lock instead --
-			# writers block until the rename commits, readers don't. NOWAIT mirrors wait=False.
-			frappe.db.sql("LOCK TABLE `tabGL Entry` IN EXCLUSIVE MODE NOWAIT")
-			last_gl_update = frappe.db.get_value("GL Entry", {}, "modified")
-		else:
-			# We also lock inserts to GL entry table with for_update here.
-			last_gl_update = frappe.db.get_value("GL Entry", {}, "modified", for_update=True, wait=False)
+		# We also lock inserts to GL entry table with for_update here.
+		last_gl_update = frappe.db.get_value("GL Entry", {}, "modified", for_update=True, wait=False)
 	except frappe.QueryTimeoutError:
 		# wait=False fails immediately if there's an active transaction.
 		last_gl_update = add_to_date(None, seconds=-1)
@@ -709,7 +659,7 @@ def _ensure_idle_system():
 	if last_gl_update > add_to_date(None, minutes=-5):
 		frappe.throw(
 			_(
-				"Last GL Entry update was done {0}. This operation is not allowed while system is actively being used. Please wait for 5 minutes before retrying."
+				"Last GL Entry update was done {}. This operation is not allowed while system is actively being used. Please wait for 5 minutes before retrying."
 			).format(pretty_date(last_gl_update)),
 			title=_("System In Use"),
 		)
@@ -727,12 +677,9 @@ def get_company_default_account_fields():
 		"stock_delivered_but_not_billed": "Stock Delivered But Not Billed Account",
 		"stock_adjustment_account": "Stock Adjustment Account",
 		"write_off_account": "Write Off Account",
-		"bank_charges_account": "Bank Charges Account",
 		"default_discount_account": "Default Payment Discount Account",
 		"unrealized_profit_loss_account": "Unrealized Profit / Loss Account",
 		"exchange_gain_loss_account": "Exchange Gain / Loss Account",
-		"exchange_gain_account": "Exchange Gain Account",
-		"exchange_loss_account": "Exchange Loss Account",
 		"unrealized_exchange_gain_loss_account": "Unrealized Exchange Gain / Loss Account",
 		"round_off_account": "Round Off Account",
 		"default_deferred_revenue_account": "Default Deferred Revenue Account",

erpnext/accounts/doctype/account/account_tree.js

@@ -52,42 +52,6 @@ frappe.treeview_settings["Account"] = {
 	],
 	root_label: "Accounts",
 	get_tree_nodes: "erpnext.accounts.utils.get_children",
-	get_label: function (node) {
-		// clean display name — the account number renders as a badge (see
-		// onrender) instead of being glued into the name
-		return frappe.utils.escape_html(node.data.account_name || node.title || node.label);
-	},
-	onrender: function (node) {
-		if (node.is_root || !node.data) return;
-
-		const flags = [];
-		if (node.data.account_number) {
-			flags.push(frappe.ui.badge({ label: node.data.account_number }));
-		}
-
-		const company = frappe.treeview_settings["Account"].treeview?.page?.fields_dict?.company?.get_value();
-		const company_currency = company && erpnext.get_currency(company);
-		if (
-			node.data.account_currency &&
-			company_currency &&
-			node.data.account_currency !== company_currency
-		) {
-			flags.push(frappe.ui.badge({ label: node.data.account_currency, theme: "blue" }));
-		}
-
-		if (node.data.freeze_account === "Yes") {
-			flags.push(
-				frappe.ui.badge({
-					label: __("Frozen"),
-					icon: "lock",
-					title: __("Frozen - entries restricted"),
-					theme: "orange",
-				})
-			);
-		}
-
-		erpnext.utils.render_tree_node_flags(node, flags);
-	},
 	on_node_render: function (node, deep) {
 		const render_balances = () => {
 			for (let account of cur_tree.account_balance_data) {
@@ -268,25 +232,24 @@ frappe.treeview_settings["Account"] = {
 		frappe.treeview_settings["Account"].treeview["tree"] = treeview.tree;
 		if (treeview.can_create) {
 			treeview.page.set_primary_action(
-				{ label: __("Add Account"), short_label: __("Add") },
+				__("New"),
 				function () {
 					let root_company = treeview.page.fields_dict.root_company.get_value();
 					if (root_company) {
-						frappe.throw(
-							__("Please add the account to root level Company - {0}", [root_company])
-						);
+						frappe.throw(__("Please add the account to root level Company - {0}"), [
+							root_company,
+						]);
 					} else {
 						treeview.new_node();
 					}
 				},
-				"plus"
+				"add"
 			);
 		}
 	},
 	toolbar: [
 		{
 			label: __("Add Child"),
-			icon: "plus",
 			condition: function (node) {
 				return (
 					frappe.boot.user.can_create.indexOf("Account") !== -1 &&
@@ -309,7 +272,6 @@ frappe.treeview_settings["Account"] = {
 				return !node.root && frappe.boot.user.can_read.indexOf("GL Entry") !== -1;
 			},
 			label: __("View Ledger"),
-			icon: "book-open",
 			click: function (node, btn) {
 				frappe.route_options = {
 					from_date: erpnext.utils.get_fiscal_year(frappe.datetime.get_today(), true)[1],
@@ -324,106 +286,6 @@ frappe.treeview_settings["Account"] = {
 			},
 			btnClass: "hidden-xs",
 		},
-		{
-			// same label and mechanism as the Account form's Actions button:
-			// NOT frappe's generic rename (Allow Rename stays off) — this is
-			// ERPNext's controlled update that rebuilds the derived
-			// "number - name - abbr" document name
-			label: __("Update Account Name / Number"),
-			icon: "text-cursor-input",
-			condition: function (node) {
-				return !node.is_root && frappe.model.can_write("Account");
-			},
-			click: function (node) {
-				const dialog = new frappe.ui.Dialog({
-					title: __("Update Account Number / Name"),
-					fields: [
-						{
-							fieldtype: "Data",
-							fieldname: "account_name",
-							label: __("Account Name"),
-							reqd: 1,
-							default: node.data.account_name,
-						},
-						{
-							fieldtype: "Data",
-							fieldname: "account_number",
-							label: __("Account Number"),
-							default: node.data.account_number,
-						},
-					],
-					primary_action_label: __("Update"),
-					primary_action(values) {
-						dialog.hide();
-						frappe.dom.freeze(__("Updating {0}", [node.label]));
-						frappe.call({
-							method: "erpnext.accounts.doctype.account.account.update_account_number",
-							args: {
-								name: node.label,
-								account_name: values.account_name,
-								account_number: values.account_number,
-							},
-							callback: function (r) {
-								if (r.exc) return;
-								const treeview = frappe.views.trees["Account"];
-								node.parent_node && treeview.tree.load_children(node.parent_node);
-							},
-							always: function () {
-								frappe.dom.unfreeze();
-							},
-						});
-					},
-				});
-				dialog.show();
-			},
-		},
-		{
-			label: __("Convert to Group"),
-			icon: "folder-tree",
-			condition: function (node) {
-				return !node.is_root && !node.expandable && frappe.model.can_write("Account");
-			},
-			click: function (node) {
-				erpnext.accounts.convert_tree_node("Account", node, "convert_ledger_to_group");
-			},
-		},
-		{
-			label: __("Convert to Non-Group"),
-			icon: "file-text",
-			condition: function (node) {
-				// only on groups the user has opened and found empty — a
-				// group with children can't convert, so don't offer it
-				return (
-					!node.is_root &&
-					node.expandable &&
-					node.loaded &&
-					!node.$ul.children().length &&
-					frappe.model.can_write("Account")
-				);
-			},
-			click: function (node) {
-				erpnext.accounts.convert_tree_node("Account", node, "convert_group_to_ledger");
-			},
-		},
 	],
 	extend_toolbar: true,
 };
-
-frappe.provide("erpnext.accounts");
-// shared by the Account and Cost Center tree views (defined in both files,
-// whichever loads first wins): run the doctype's whitelisted convert method,
-// then re-render the branch so the node's group/leaf state updates
-erpnext.accounts.convert_tree_node =
-	erpnext.accounts.convert_tree_node ||
-	function (doctype, node, method) {
-		frappe.call({
-			method: "run_doc_method",
-			args: { dt: doctype, dn: node.label, method: method },
-			callback: function (r) {
-				if (r.exc) return;
-				const treeview = frappe.views.trees[doctype];
-				node.parent_node && treeview.tree.load_children(node.parent_node);
-				frappe.show_alert({ message: __("{0} converted", [node.label]), indicator: "green" });
-			},
-		});
-	};

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

@@ -102,8 +102,6 @@ def identify_is_group(child):
 def get_chart(chart_template: str | None, existing_company: str | None = None):
 	chart = {}
 	if existing_company:
-		frappe.has_permission("Company", doc=existing_company, throw=True)
-
 		return get_account_tree_from_existing_company(existing_company)
 
 	elif chart_template == "Standard":
@@ -139,7 +137,7 @@ def get_charts_for_country(country: str, with_standard: bool = False):
 
 	def _get_chart_name(content):
 		if content:
-			content = frappe.parse_json(content)
+			content = json.loads(content)
 			if (
 				content and content.get("disabled", "No") == "No"
 			) or frappe.local.flags.allow_unverified_charts: