From a63193c8fe7c53ba63195a4b56a89bb9bf7dce77 Mon Sep 17 00:00:00 2001
From: Gil Gardosh <gilgardosh@gmail.com>
Date: Tue, 21 Apr 2026 15:29:39 +0300
Subject: [PATCH 1/4] docs

---
 docs/dynamic-report-refactor/blueprint.md | 1535 +++++++++++++++++++++
 docs/dynamic-report-refactor/spec.md      |  239 ++++
 2 files changed, 1774 insertions(+)
 create mode 100644 docs/dynamic-report-refactor/blueprint.md
 create mode 100644 docs/dynamic-report-refactor/spec.md

diff --git a/docs/dynamic-report-refactor/blueprint.md b/docs/dynamic-report-refactor/blueprint.md
new file mode 100644
index 0000000000..20ce302702
--- /dev/null
+++ b/docs/dynamic-report-refactor/blueprint.md
@@ -0,0 +1,1535 @@
+# Dynamic Report Refactor — Implementation Blueprint & LLM Prompts
+
+## High-Level Blueprint
+
+### Phase 1 — Backend contract
+
+Update the server-side GraphQL type and Zod validation schema to match the new explicit-node format,
+add the in-memory legacy-migration helper, then regenerate types.
+
+### Phase 2 — Client types & pure utilities
+
+Update the client-side `CustomData` type and extract the tree-building logic (bank tree, report
+tree) into pure, testable functions before any UI work starts.
+
+### Phase 3 — Legacy migration (client)
+
+Write a client-side helper that detects the old template format and converts it into the new
+explicit-leaf format using live entity data.
+
+### Phase 4 — Split state + two-panel layout
+
+Replace the single combined tree with two separate state slices (`bankTree` / `reportTree`) and
+render them side-by-side, initially without cross-tree drag.
+
+### Phase 5 — Single-presence drop handler
+
+Implement the cross-tree drop logic that enforces "entity exists in exactly one place" including
+whole-branch moves.
+
+### Phase 6 — Edit mode + dirty state
+
+Add the edit-mode toggle, dirty-state tracking, unsaved-changes indicator, and the confirmation
+dialog that guards template switches.
+
+### Phase 7 — Node rendering (nodeType-aware)
+
+Update `CustomNode` to branch on `nodeType`, show edit controls only in edit mode, and pass the
+edit-mode prop through the tree.
+
+### Phase 8 — Cross-tree `canDrop` rules
+
+Tighten the `canDrop` predicate: no dropping a branch inside a financial-entity leaf, etc.
+
+### Phase 9 — Delete branch → move to bank
+
+Swap the current "delete removes nodes" behaviour for "delete moves branch intact to bank root" with
+a confirmation dialog.
+
+### Phase 10 — Template management
+
+Refactor the save/manage UX: save-as, resave, rename, duplicate, locked-template enforcement, and
+the legacy-format prompt.
+
+### Phase 11 — Integration pass & CSV
+
+Wire all pieces in `index.tsx`, preserve filter/URL-param behaviour, confirm CSV export operates on
+the report tree only.
+
+---
+
+## Iterative Chunks (right-sized)
+
+```
+Chunk A  Backend schema + Zod + migration helper + tests
+Chunk B  Client CustomData type + node-type predicate utilities
+Chunk C  buildInitialBankTree pure function + tests
+Chunk D  buildReportTree pure function + tests
+Chunk E  Client-side legacy-migration helper + tests
+Chunk F  Split bank/report state + two-panel layout (no drag yet)
+Chunk G  Cross-tree single-presence drop handler + tests
+Chunk H  Edit mode + dirty state + confirmation dialog
+Chunk I  CustomNode — nodeType-aware rendering + edit-mode prop
+Chunk J  TreeView — cross-tree canDrop rules
+Chunk K  Delete branch → confirmation + move-to-bank
+Chunk L  Template management (save-as, resave, rename, duplicate)
+Chunk M  Legacy template detection banner
+Chunk N  Integration wiring (index.tsx) + filter persistence + locked-template guard
+Chunk O  CSV export — report tree only
+```
+
+---
+
+## LLM Prompts
+
+---
+
+### Prompt 1 — Backend: GraphQL schema + Zod schema + legacy migration helper
+
+````text
+We are working in the monorepo at `packages/server/src/modules/reports/`.
+
+## Context
+
+The existing `DynamicReportNodeData` GraphQL type (in
+`packages/server/src/modules/reports/typeDefs/dynamic-report.graphql.ts`) is:
+
+```graphql
+type DynamicReportNodeData {
+  descendantSortCodes: [Int!]
+  descendantFinancialEntities: [UUID!]
+  mergedSortCodes: [Int!]
+  isOpen: Boolean!
+  hebrewText: String
+}
+````
+
+The existing Zod schema (in `packages/server/src/modules/reports/helpers/dynamic-report.helper.ts`)
+mirrors these fields.
+
+## Task
+
+### 1. Update the GraphQL type
+
+In `packages/server/src/modules/reports/typeDefs/dynamic-report.graphql.ts`, replace the
+`DynamicReportNodeData` type with:
+
+```graphql
+type DynamicReportNodeData {
+  nodeType: String!
+  isOpen: Boolean!
+  hebrewText: String
+}
+```
+
+Remove the `descendantSortCodes`, `descendantFinancialEntities`, and `mergedSortCodes` fields
+entirely.
+
+### 2. Update the Zod schema
+
+In `packages/server/src/modules/reports/helpers/dynamic-report.helper.ts`:
+
+- Replace `dynamicReportNodeData` with a new Zod object that has:
+  - `nodeType`: `z.enum(['synthetic-branch', 'sort-code-branch', 'financial-entity'])`
+  - `isOpen`: `z.boolean()`
+  - `hebrewText`: `z.string().optional()`
+- Keep the `.strict()` modifier.
+- Keep `parseTemplate`, `validateTemplate`, and the exported type aliases `DynamicReportNodeType`
+  and `DynamicReportNodeDataType`.
+
+### 3. Add a legacy format detector and migrator
+
+Still in `dynamic-report.helper.ts`, export two new functions:
+
+```typescript
+/**
+ * Returns true when the raw parsed node array contains at least one node
+ * whose `data` object has a `descendantSortCodes` key — the hallmark of the
+ * old implicit-membership format.
+ */
+export function isLegacyTemplate(nodes: unknown[]): boolean
+
+/**
+ * Converts a legacy template (implicit-membership format) to the new
+ * explicit-leaf format given the set of live financial entity IDs that belong
+ * to each sort code.
+ *
+ * @param nodes          Parsed legacy node array (validated against the old schema)
+ * @param entityBySortCode  Map<sortCodeId, string[]> — entity UUIDs that belong to that sort code
+ * @returns              Node array in the new explicit format (no hint arrays, explicit leaf nodes)
+ */
+export function migrateLegacyTemplate(
+  nodes: LegacyDynamicReportNode[],
+  entityBySortCode: Map<string | number, string[]>
+): DynamicReportNodeType[]
+```
+
+For `migrateLegacyTemplate`:
+
+- Copy all branch nodes (droppable === true) as-is, mapping `data` to new format:
+  - Synthetic branches (no `sortCode` in old data): `nodeType: 'synthetic-branch'`
+  - Sort-code branches (`sortCode` present in old data): `nodeType: 'sort-code-branch'`
+  - Strip `descendantSortCodes`, `descendantFinancialEntities`, `mergedSortCodes`
+- For every entity UUID in `descendantFinancialEntities` on each branch node, if the UUID is not
+  already present as an explicit leaf, insert a leaf node:
+  `{ id: uuid, parent: branchId, text: uuid, droppable: false, data: { nodeType: 'financial-entity', isOpen: false } }`
+  (the caller will patch `text` to the entity name after loading — the UUID placeholder is fine for
+  persistence purposes)
+- Add a `LegacyDynamicReportNode` type (internal, not exported) that mirrors the old Zod shape so
+  TypeScript is happy inside the function.
+
+### 4. Write unit tests
+
+Create `packages/server/src/modules/reports/helpers/__tests__/dynamic-report.helper.test.ts`.
+
+Use `vitest`. Import from `../dynamic-report.helper.js`.
+
+Test cases required:
+
+- `parseTemplate` succeeds with a valid new-format JSON string
+- `parseTemplate` throws on a JSON string missing `nodeType`
+- `isLegacyTemplate` returns `true` for an array where at least one node's `data` has
+  `descendantSortCodes`
+- `isLegacyTemplate` returns `false` for an array where no node has that key
+- `migrateLegacyTemplate` with a two-level legacy tree (one sort-code branch + two entities in
+  `descendantFinancialEntities`) produces:
+  - the branch node with `nodeType: 'sort-code-branch'`
+  - two explicit leaf nodes with `nodeType: 'financial-entity'` and `parent` equal to the branch
+    node's `id`
+- `migrateLegacyTemplate` does not duplicate a leaf that already exists explicitly
+
+After all changes run `yarn workspace @accounter/server generate` and confirm there are no
+TypeScript errors in the helper file or its tests.
+
+````
+
+---
+
+### Prompt 2 — Client: `CustomData` type + node-type predicate utilities
+
+```text
+We are working in:
+  packages/client/src/components/reports/dynamic-report/types.ts
+
+## Context
+
+The current `CustomData` type is:
+```typescript
+export type CustomData = {
+  hebrewText?: string;
+  value?: number | null;
+  sortCode?: number | null;
+  isOpen: boolean;
+  descendantSortCodes?: number[] | null;
+  descendantFinancialEntities?: string[] | null;
+  mergedSortCodes?: number[] | null;
+};
+````
+
+The GraphQL schema now emits `nodeType: String!` on `DynamicReportNodeData` (updated in prompt 1).
+The generated client types will include `nodeType`.
+
+## Task
+
+### 1. Replace `CustomData`
+
+Replace the type entirely with:
+
+```typescript
+export type NodeType = 'synthetic-branch' | 'sort-code-branch' | 'financial-entity'
+
+export type CustomData = {
+  nodeType: NodeType
+  hebrewText?: string
+  /** Local-currency total; populated at runtime from ledger query, never stored */
+  value?: number | null
+  /** Numeric sort-code key; present on sort-code-branch nodes */
+  sortCode?: number | null
+  isOpen: boolean
+}
+```
+
+### 2. Add predicate helpers (same file, exported)
+
+```typescript
+import type { NodeModel } from '@minoru/react-dnd-treeview'
+
+export function isFinancialEntityNode(node: NodeModel<CustomData>): boolean {
+  return node.data?.nodeType === 'financial-entity'
+}
+
+export function isSortCodeBranchNode(node: NodeModel<CustomData>): boolean {
+  return node.data?.nodeType === 'sort-code-branch'
+}
+
+export function isSyntheticBranchNode(node: NodeModel<CustomData>): boolean {
+  return node.data?.nodeType === 'synthetic-branch'
+}
+
+export function isBranchNode(node: NodeModel<CustomData>): boolean {
+  return node.droppable === true
+}
+```
+
+### 3. Fix immediately visible type errors
+
+After changing `CustomData`, TypeScript will produce errors in:
+
+- `custom-node.tsx` — references to `data?.sortCode`, `data?.value` etc. These are still valid
+  fields, but `data?.descendantSortCodes` etc. must be removed. Remove any usage of the removed
+  fields; keep `sortCode` and `value` access.
+- `index.tsx` — same removals for the dropped fields.
+- `dynamic-report-save-template.tsx` — the template serialisation references the old fields; remove
+  `descendantSortCodes`, `descendantFinancialEntities`, `mergedSortCodes` from the serialised
+  object.
+- `tree-view.tsx` — references to `data?.sortCode` in the existing `handleDrop` / `canDrop` logic;
+  update as needed to use the new predicates.
+
+Do NOT restructure any component behaviour yet — only fix TypeScript errors caused by the type
+change.
+
+### 4. Verify
+
+Run `yarn workspace @accounter/client build` (or `tsc --noEmit`) and confirm zero TypeScript errors
+in all files under `packages/client/src/components/reports/dynamic-report/`.
+
+````
+
+---
+
+### Prompt 3 — Bank tree builder (pure function + unit tests)
+
+```text
+We are working in the dynamic-report client component folder:
+  packages/client/src/components/reports/dynamic-report/
+
+## Context
+
+The bank panel displays financial entities grouped by sort-code folders, with
+independent entities (no sort code) listed alphabetically after the folders.
+The bank state is never saved — it is always rebuilt fresh from live data.
+
+The relevant GraphQL query types from `packages/client/src/gql/graphql.ts` are:
+- `AllSortCodesQuery['allSortCodes']` — array of `{ id, key, name }`
+- `BusinessTransactionsSumFromLedgerRecordsSuccessfulResult['businessTransactionsSum']`
+  — array of `{ business: { id, name, sortCode: { id, key, name } | null }, total: { raw } }`
+
+`NodeModel<CustomData>` is from `@minoru/react-dnd-treeview`.
+
+## Task
+
+### 1. Create `bank-tree.ts`
+
+Create `packages/client/src/components/reports/dynamic-report/bank-tree.ts`.
+
+Export one pure function:
+
+```typescript
+import type { NodeModel } from '@minoru/react-dnd-treeview';
+import type { AllSortCodesQuery, DynamicReportQuery } from '../../../gql/graphql.js';
+import type { CustomData } from './types.js';
+
+export const BANK_TREE_ROOT_ID = 'bank';
+
+type BusinessSum = Extract<
+  NonNullable<DynamicReportQuery['businessTransactionsSumFromLedgerRecords']>,
+  { __typename?: 'BusinessTransactionsSumFromLedgerRecordsSuccessfulResult' }
+>['businessTransactionsSum'][number];
+
+/**
+ * Builds the bank tree in its default / initial state.
+ *
+ * Rules:
+ * - One sort-code-branch node per sort code, ordered ascending by sortCode.key
+ * - Node id = sortCode.id, text = `${sortCode.key} — ${sortCode.name}`
+ * - Financial entity nodes whose business.sortCode is non-null become children
+ *   of the matching sort-code-branch node
+ * - Financial entity nodes with no sort code are placed directly under BANK_TREE_ROOT_ID
+ *   and sorted alphabetically by business.name
+ * - Entities with |total.raw| < 0.005 are excluded unless includeZeroed is true
+ * - value on each leaf = total.raw * -1
+ *
+ * @param sortCodes       All sort codes from AllSortCodesQuery
+ * @param businessSums    Sum results from DynamicReport query
+ * @param excludedIds     Set of entity IDs already placed in the report tree (excluded from bank)
+ * @param includeZeroed   When true include entities whose |value| < 0.005
+ */
+export function buildInitialBankTree(
+  sortCodes: AllSortCodesQuery['allSortCodes'],
+  businessSums: BusinessSum[],
+  excludedIds: ReadonlySet<string>,
+  includeZeroed: boolean,
+): NodeModel<CustomData>[]
+````
+
+Implementation notes:
+
+- Sort-code branches:
+  `{ id: sortCode.id, parent: BANK_TREE_ROOT_ID, droppable: true, text: \`${sortCode.key} —
+  ${sortCode.name}\`, data: { nodeType: 'sort-code-branch', sortCode: sortCode.key, isOpen: false }
+  }`
+- Only include sort-code-branch nodes for sort codes that have at least one visible entity
+  (otherwise bank is cluttered with empty folders).
+- Financial entity leaves:
+  `{ id: business.id, parent: sortCodeNodeId | BANK_TREE_ROOT_ID, droppable: false, text: business.name, data: { nodeType: 'financial-entity', value, isOpen: false } }`
+- No sort-code branches are emitted for entities in `excludedIds`.
+- Return value is a flat array (the tree library reconstructs the hierarchy).
+
+### 2. Unit tests
+
+Create `packages/client/src/components/reports/dynamic-report/__tests__/bank-tree.test.ts`.
+
+Use `vitest`. Import from `../bank-tree.js`.
+
+Required test cases:
+
+- Empty inputs → returns empty array
+- Two sort codes, three entities: correct parent assignment, sort-code-branch ids match sortCode.id,
+  ascending sort-code order
+- Entity with no sort code → parent is `BANK_TREE_ROOT_ID`, appears after all sort-code branches,
+  sorted alphabetically when multiple independent entities exist
+- Entity in `excludedIds` → not present in output (and its sort-code branch is omitted if it would
+  be empty)
+- `includeZeroed = false` → entity with `total.raw = 0` excluded
+- `includeZeroed = true` → same entity included
+- `value` on leaf equals `total.raw * -1`
+
+Run `yarn workspace @accounter/client test --run` and confirm all tests pass.
+
+````
+
+---
+
+### Prompt 4 — Report tree builder (pure function + unit tests)
+
+```text
+We are working in:
+  packages/client/src/components/reports/dynamic-report/
+
+## Context
+
+When a template is loaded the report tree is reconstructed from:
+1. The saved template nodes (branches + explicit entity-leaf nodes in new format)
+2. Live `businessTransactionsSum` data (to hydrate `value` and `text` on entity leaves)
+
+Entities referenced in the template that are NOT present in the live data are
+omitted silently (they may have been deleted or have been merged).
+
+Entities present in live data but NOT in the template remain in the bank (handled
+by the bank tree builder via `excludedIds`).
+
+## Task
+
+### 1. Create `report-tree.ts`
+
+Create `packages/client/src/components/reports/dynamic-report/report-tree.ts`.
+
+```typescript
+import type { NodeModel } from '@minoru/react-dnd-treeview';
+import type { DynamicReportQuery } from '../../../gql/graphql.js';
+import type { CustomData } from './types.js';
+
+export const REPORT_TREE_ROOT_ID = 'report';
+
+type TemplateNode = {
+  id: string | number;
+  parent: string | number;
+  text: string;
+  droppable: boolean;
+  data: {
+    nodeType: string;
+    isOpen: boolean;
+    hebrewText?: string | null;
+  };
+};
+
+type BusinessSum = Extract<
+  NonNullable<DynamicReportQuery['businessTransactionsSumFromLedgerRecords']>,
+  { __typename?: 'BusinessTransactionsSumFromLedgerRecordsSuccessfulResult' }
+>['businessTransactionsSum'][number];
+
+/**
+ * Builds the report tree from a saved template and live entity data.
+ *
+ * Rules:
+ * - Branch nodes (synthetic-branch, sort-code-branch) are copied from the template
+ *   with their nesting and order preserved.
+ * - Entity-leaf nodes are copied from the template; their `value` and `text` are
+ *   patched from the matching entry in `businessSums` (matched by id).
+ * - Entity leaves whose id is not found in `businessSums` are dropped (entity no
+ *   longer exists).
+ * - The `isOpen` state per node is taken from the template.
+ *
+ * @returns { reportTree, placedEntityIds }
+ *   reportTree      — flat NodeModel array for the report panel
+ *   placedEntityIds — Set<string> of entity UUIDs placed in the report tree
+ *                     (so the bank builder can exclude them)
+ */
+export function buildReportTree(
+  templateNodes: TemplateNode[],
+  businessSums: BusinessSum[],
+): { reportTree: NodeModel<CustomData>[]; placedEntityIds: Set<string> }
+````
+
+Implementation notes:
+
+- Replace `parent: 0` (old root sentinel) with `REPORT_TREE_ROOT_ID` so the report-tree `rootId`
+  prop is consistent.
+- `sortCode` on branch nodes: if `nodeType === 'sort-code-branch'` and the template node id is a
+  number, set `data.sortCode` to that id; otherwise leave undefined.
+
+### 2. Unit tests
+
+Create `packages/client/src/components/reports/dynamic-report/__tests__/report-tree.test.ts`.
+
+Required test cases:
+
+- Empty template → empty report tree, empty `placedEntityIds`
+- Template with one synthetic branch + two entity leaves:
+  - Both entity leaves present in `businessSums` → both appear with hydrated `value` and `text`,
+    correct parent
+  - `placedEntityIds` contains both entity UUIDs
+- One of the entity leaves is NOT in `businessSums` → that leaf is dropped; `placedEntityIds`
+  contains only the surviving entity
+- Branch node with `nodeType: 'sort-code-branch'` → `data.sortCode` is set
+- Template with nested branches → parent IDs are preserved exactly
+
+Run `yarn workspace @accounter/client test --run` and confirm all tests pass.
+
+````
+
+---
+
+### Prompt 5 — Client-side legacy template migration helper + tests
+
+```text
+We are working in:
+  packages/client/src/components/reports/dynamic-report/
+
+## Context
+
+Old templates use `descendantFinancialEntities` arrays on branch nodes to
+implicitly declare which entities belong there; entities are NOT stored as
+explicit leaf nodes. The new format stores them as explicit leaf nodes.
+
+When the server returns a template whose nodes contain `descendantFinancialEntities`,
+the client must:
+1. Detect the legacy format.
+2. Migrate it in-memory to the new format (no DB write yet).
+3. Show a banner prompting the user to resave.
+
+The migration helper at the server level (`migrateLegacyTemplate`) is the
+reference for the conversion algorithm. Here we need the client-side variant that
+receives richer live data (business names + sort codes).
+
+## Task
+
+### 1. Create `legacy-migration.ts`
+
+Create
+`packages/client/src/components/reports/dynamic-report/legacy-migration.ts`.
+
+```typescript
+import type { NodeModel } from '@minoru/react-dnd-treeview';
+import type { DynamicReportQuery } from '../../../gql/graphql.js';
+import { REPORT_TREE_ROOT_ID } from './report-tree.js';
+import type { CustomData } from './types.js';
+
+/**
+ * Raw node shape as returned by the GraphQL query for a legacy template.
+ * (Old DynamicReportNodeData included the hint arrays.)
+ */
+export type LegacyTemplateNode = {
+  id: string | number;
+  parent: string | number;
+  text: string;
+  droppable: boolean;
+  data: {
+    isOpen: boolean;
+    hebrewText?: string | null;
+    sortCode?: number | null;
+    descendantSortCodes?: number[] | null;
+    descendantFinancialEntities?: string[] | null;
+    mergedSortCodes?: number[] | null;
+  };
+};
+
+type BusinessSum = Extract<
+  NonNullable<DynamicReportQuery['businessTransactionsSumFromLedgerRecords']>,
+  { __typename?: 'BusinessTransactionsSumFromLedgerRecordsSuccessfulResult' }
+>['businessTransactionsSum'][number];
+
+/**
+ * Returns true when the node array is in the legacy implicit-membership format.
+ * Detection: any node whose `data` has a `descendantFinancialEntities` key.
+ */
+export function isLegacyTemplateNodes(nodes: LegacyTemplateNode[]): boolean
+
+/**
+ * Converts a legacy template node array to the new explicit-leaf format.
+ *
+ * Algorithm:
+ * 1. Copy all branch nodes, assigning nodeType:
+ *    - `data.sortCode != null` → 'sort-code-branch'
+ *    - otherwise               → 'synthetic-branch'
+ *    Strip all hint array fields.
+ * 2. For each branch node that had `descendantFinancialEntities`, create explicit
+ *    leaf nodes for each UUID in that array if a matching entry exists in
+ *    `businessSums`. Set `value` from businessSum.total.raw * -1 and `text`
+ *    from businessSum.business.name.
+ * 3. Nodes whose parent is 0 or the old implicit root get parent = REPORT_TREE_ROOT_ID.
+ *
+ * @param nodes        Legacy node array (from GraphQL response)
+ * @param businessSums Live entity data to hydrate names + values
+ */
+export function migrateLegacyTemplateNodes(
+  nodes: LegacyTemplateNode[],
+  businessSums: BusinessSum[],
+): NodeModel<CustomData>[]
+````
+
+### 2. Unit tests
+
+Create `packages/client/src/components/reports/dynamic-report/__tests__/legacy-migration.test.ts`.
+
+Required test cases:
+
+- `isLegacyTemplateNodes` returns `true` for a node with `descendantFinancialEntities`
+- `isLegacyTemplateNodes` returns `false` for new-format nodes (only `nodeType`)
+- Migration of a legacy tree: one sort-code branch with two entity UUIDs in
+  `descendantFinancialEntities` → output has the branch (nodeType='sort-code-branch', no hint
+  arrays) + two explicit leaf nodes with correct parent, name, value
+- Migration: entity UUID in `descendantFinancialEntities` but NOT in `businessSums` → that leaf is
+  silently dropped
+- Migration: synthetic branch (no `sortCode`) → `nodeType: 'synthetic-branch'`
+- Migration: node with `parent: 0` → parent becomes `REPORT_TREE_ROOT_ID`
+
+Run `yarn workspace @accounter/client test --run` and confirm all new tests pass.
+
+````
+
+---
+
+### Prompt 6 — Split bank/report state + two-panel layout
+
+```text
+We are working in:
+  packages/client/src/components/reports/dynamic-report/index.tsx
+
+## Context
+
+The current component stores a single `tree` state that holds both bank and report
+nodes together, distinguished by their `parent` (BANK_TREE_ROOT_ID vs.
+REPORT_TREE_ROOT_ID). We need to split this into two separate state slices and
+render them side-by-side.
+
+The pure helpers we now have:
+- `buildInitialBankTree()` from `./bank-tree.js`  (BANK_TREE_ROOT_ID = 'bank')
+- `buildReportTree()`      from `./report-tree.js` (REPORT_TREE_ROOT_ID = 'report')
+
+## Task
+
+### 1. Replace the single `tree` state
+
+Replace:
+```typescript
+const [tree, setTree] = useState<NodeModel<CustomData>[]>([]);
+````
+
+with:
+
+```typescript
+const [bankTree, setBankTree] = useState<NodeModel<CustomData>[]>([])
+const [reportTree, setReportTree] = useState<NodeModel<CustomData>[]>([])
+```
+
+### 2. Rebuild on data change
+
+Add a `useMemo` / `useEffect` that recomputes `bankTree` whenever `sortCodes`,
+`businessTransactionsSumData`, or `templateData` changes:
+
+- If a template is loaded: call `buildReportTree(templateData.template, businessSums)` to produce
+  `{ reportTree, placedEntityIds }`, then call
+  `buildInitialBankTree(sortCodes, businessSums, placedEntityIds, isShowZeroedAccounts)` for the
+  bank.
+- If no template: call `buildInitialBankTree` with an empty `excludedIds` set, set `reportTree` to
+  `[]`.
+
+Keep the `isShowZeroedAccounts` state wired to the existing filter toggle.
+
+### 3. Two-panel layout
+
+Replace the existing single `<TreeView>` JSX with a two-column layout:
+
+```tsx
+<div className="grid grid-cols-2 gap-4 h-full">
+  <div className="flex flex-col overflow-auto border rounded p-2">
+    <h2 className="text-sm font-semibold mb-2">Bank</h2>
+    <TreeView
+      tree={bankTree}
+      rootId={BANK_TREE_ROOT_ID}
+      onDrop={handleBankDrop}
+      editMode={editMode}
+      handleTextChange={handleTextChange}
+      handleIsOpenChange={handleIsOpenChange}
+      handleDeleteCategory={handleDeleteCategory}
+      filter={filter}
+    />
+  </div>
+  <div className="flex flex-col overflow-auto border rounded p-2">
+    <h2 className="text-sm font-semibold mb-2">Report</h2>
+    <TreeView
+      tree={reportTree}
+      rootId={REPORT_TREE_ROOT_ID}
+      onDrop={handleReportDrop}
+      editMode={editMode}
+      handleTextChange={handleTextChange}
+      handleIsOpenChange={handleIsOpenChange}
+      handleDeleteCategory={handleDeleteCategory}
+      filter={filter}
+    />
+  </div>
+</div>
+```
+
+For now use stub handlers that just call `setBankTree` / `setReportTree` with the new tree passed in
+by the library (no cross-tree logic yet):
+
+```typescript
+const handleBankDrop = useCallback((newTree: NodeModel<CustomData>[]) => setBankTree(newTree), [])
+const handleReportDrop = useCallback(
+  (newTree: NodeModel<CustomData>[]) => setReportTree(newTree),
+  []
+)
+```
+
+### 4. Remove dead code
+
+Remove `buildSortCodeFinancialEntitiesMaps`, `updateSortCodesTreeNodes`,
+`updateFinancialEntitiesTreeNodes`, and the old `handleDrop` that operated on the unified `tree`
+state.
+
+### 5. Remove import of `REPORT_TREE_ROOT_ID` defined inline
+
+`REPORT_TREE_ROOT_ID` and `BANK_TREE_ROOT_ID` are now exported from the utility modules — import
+them from there.
+
+### 6. Smoke test
+
+Add a render test at
+`packages/client/src/components/reports/dynamic-report/__tests__/index.test.tsx` using vitest +
+@testing-library/react. Mock the urql `useQuery` hook to return empty results. Assert that two
+headings "Bank" and "Report" are present in the rendered output.
+
+Run `yarn workspace @accounter/client test --run` and confirm all tests pass.
+
+````
+
+---
+
+### Prompt 7 — Cross-tree single-presence drop handler
+
+```text
+We are working in:
+  packages/client/src/components/reports/dynamic-report/index.tsx
+  packages/client/src/components/reports/dynamic-report/__tests__/index.test.tsx
+
+## Context
+
+After prompt 6 we have two separate tree states and stub drop handlers. Now we
+need the real drop handlers that enforce the single-presence rule.
+
+The rule: every entity exists in exactly one location at all times — the bank OR
+the report tree, never both. The same applies to branches: dragging a branch moves
+the branch AND all its descendants atomically.
+
+`getDescendants(tree, nodeId)` from `@minoru/react-dnd-treeview` returns all
+descendant `NodeModel` entries.
+
+## Task
+
+### 1. Extract `handleCrossTreeDrop` as a pure function
+
+Create
+`packages/client/src/components/reports/dynamic-report/cross-tree-drop.ts`.
+
+```typescript
+import { getDescendants, type NodeModel, type DropOptions } from '@minoru/react-dnd-treeview';
+import type { CustomData } from './types.js';
+
+/**
+ * Handles a drop that may cross tree boundaries (bank ↔ report).
+ *
+ * @param sourceTree    The tree the drag originated from
+ * @param targetTree    The tree the drop target belongs to
+ * @param dropOptions   DropOptions from @minoru/react-dnd-treeview
+ * @param newTargetTree The new target tree array emitted by the library's onDrop
+ *
+ * @returns { nextSourceTree, nextTargetTree }
+ */
+export function handleCrossTreeDrop(
+  sourceTree: NodeModel<CustomData>[],
+  targetTree: NodeModel<CustomData>[],
+  dropOptions: DropOptions<CustomData>,
+  newTargetTree: NodeModel<CustomData>[],
+): { nextSourceTree: NodeModel<CustomData>[]; nextTargetTree: NodeModel<CustomData>[] }
+````
+
+Algorithm:
+
+1. Collect the moved node IDs =
+   `[dragSourceId, ...getDescendants(sourceTree, dragSourceId).map(n => n.id)]`
+2. Remove those IDs from `sourceTree` → `nextSourceTree`
+3. Use `newTargetTree` as `nextTargetTree` (the library already placed the node correctly)
+4. If the drop was within the SAME tree (source and target are the same array reference), return
+   `{ nextSourceTree: newTargetTree, nextTargetTree: newTargetTree }` (no cross-tree move needed).
+
+### 2. Wire into index.tsx
+
+Replace the stub handlers with:
+
+```typescript
+const handleBankDrop = useCallback(
+  (newTree: NodeModel<CustomData>[], dropOptions: DropOptions<CustomData>) => {
+    const { nextSourceTree, nextTargetTree } = handleCrossTreeDrop(
+      reportTree,
+      bankTree,
+      dropOptions,
+      newTree
+    )
+    setReportTree(nextSourceTree)
+    setBankTree(nextTargetTree)
+  },
+  [bankTree, reportTree]
+)
+
+const handleReportDrop = useCallback(
+  (newTree: NodeModel<CustomData>[], dropOptions: DropOptions<CustomData>) => {
+    const { nextSourceTree, nextTargetTree } = handleCrossTreeDrop(
+      bankTree,
+      reportTree,
+      dropOptions,
+      newTree
+    )
+    setBankTree(nextSourceTree)
+    setReportTree(nextTargetTree)
+  },
+  [bankTree, reportTree]
+)
+```
+
+Note: `onDrop` in `@minoru/react-dnd-treeview` receives `(newTree, dropOptions)` — pass both. Update
+the `TreeView` prop type for `onDrop` to match.
+
+### 3. Unit tests
+
+Create `packages/client/src/components/reports/dynamic-report/__tests__/cross-tree-drop.test.ts`.
+
+Required test cases:
+
+- Entity dragged from source tree to target tree → entity absent from source, present in target at
+  drop position
+- Branch with two children dragged across → branch + both children absent from source, present in
+  target
+- Same-tree reorder (sourceTree === targetTree, i.e. same array reference used for both arguments) →
+  returns `newTargetTree` for both (no cross-tree deletion)
+
+Run `yarn workspace @accounter/client test --run`.
+
+````
+
+---
+
+### Prompt 8 — Edit mode, dirty state, and confirmation dialog
+
+```text
+We are working in:
+  packages/client/src/components/reports/dynamic-report/index.tsx
+
+## Context
+
+We need:
+1. An explicit edit-mode toggle that gates all structural changes.
+2. A dirty-state flag set on every tree mutation.
+3. A visual "Unsaved changes" indicator.
+4. A confirmation dialog when the user tries to load a different template while dirty.
+
+## Task
+
+### 1. Add state
+
+In `index.tsx`, add:
+```typescript
+const [editMode, setEditMode]   = useState(false);
+const [isDirty,  setIsDirty]    = useState(false);
+````
+
+### 2. Mark dirty on every mutation
+
+Wrap `setBankTree` and `setReportTree` in helper functions that also set `isDirty`:
+
+```typescript
+const updateBankTree = useCallback(
+  (fn: (prev: NodeModel<CustomData>[]) => NodeModel<CustomData>[]) => {
+    setBankTree(fn)
+    setIsDirty(true)
+  },
+  []
+)
+const updateReportTree = useCallback(
+  (fn: (prev: NodeModel<CustomData>[]) => NodeModel<CustomData>[]) => {
+    setReportTree(fn)
+    setIsDirty(true)
+  },
+  []
+)
+```
+
+Use `updateBankTree` / `updateReportTree` everywhere a structural change occurs (drop handlers,
+handleAddBankNode, handleTextChange, handleDeleteCategory).
+
+Reset `isDirty` to `false` after a successful template save or when a template is freshly loaded.
+
+### 3. Gate edit actions behind `editMode`
+
+Pass `editMode` as a prop to both `TreeView` instances (replacing `enableDnd`). `canDrag` in
+`TreeView` returns `false` when `editMode` is false (keep existing `canDrag={() => enableDnd}` but
+rename `enableDnd` to `editMode` in props). The "Add new category" button in the footer should be
+disabled/hidden when `!editMode`. Rename state/prop from `enableDnd` → `editMode` consistently.
+
+### 4. Visual dirty indicator
+
+In the footer context (the `setFiltersContext` call), add a `Badge` with text "Unsaved changes" when
+`isDirty && !fetching`. Import `Badge` from `../../ui/badge.js`.
+
+### 5. Confirmation dialog on template load
+
+When the user selects a new template via `ManageTemplates`, check `isDirty`. If dirty, show a shadcn
+`AlertDialog`:
+
+- Title: "Unsaved changes"
+- Description: "Loading a template will discard your unsaved changes. Continue?"
+- Cancel button: dismiss without loading
+- Continue button: load the template and reset `isDirty`
+
+Implement this by adding an `onSelectTemplate` callback prop to `ManageTemplates` that `index.tsx`
+provides. The component calls this prop when the user clicks a template row; `index.tsx` intercepts
+it, checks dirty state, shows the dialog if needed, and proceeds to navigate when confirmed.
+
+### 6. Smoke test additions
+
+Extend the render test in `__tests__/index.test.tsx`:
+
+- When `editMode` is false, the "Add new category" button is disabled.
+- When `isDirty` is true, a "Unsaved changes" badge is present. (Simulate by triggering a drop via
+  the drop handler and then checking the DOM.)
+
+Run `yarn workspace @accounter/client test --run`.
+
+````
+
+---
+
+### Prompt 9 — `CustomNode` nodeType-aware rendering + edit-mode prop
+
+```text
+We are working in:
+  packages/client/src/components/reports/dynamic-report/custom-node.tsx
+
+## Context
+
+`CustomNode` currently renders identically for all nodes except a rough check
+(`droppable && !sortCode`) to distinguish "synthetic categories". Now that every
+node carries `data.nodeType`, we can branch precisely.
+
+## Task
+
+### 1. Add `editMode` prop
+
+```typescript
+type Props = {
+  node: NodeModel<CustomData>;
+  depth: number;
+  isOpen: boolean;
+  onToggle: (id: NodeModel['id']) => void;
+  onTextChange: (id: NodeModel['id'], value: string) => void;
+  onDeleteCategory: (id: NodeModel['id']) => void;
+  descendants: NodeModel<CustomData>[];
+  filter: DynamicReportFiltersType;
+  editMode: boolean;       // ← new
+};
+````
+
+### 2. Branch on `nodeType`
+
+**`sort-code-branch` nodes**:
+
+- Show toggle icon (open/close) and descendant count (unchanged)
+- Show `<Badge variant="outline">Sort Code {data.sortCode}</Badge>` (unchanged)
+- Show sum badge (unchanged)
+- No rename or delete controls (sort-code branches are managed by data, not user)
+
+**`synthetic-branch` nodes**:
+
+- Show toggle icon, descendant count, sum badge (unchanged)
+- Show rename inline input and delete dropdown item **only when `editMode` is true**
+- When `editMode` is false, the rename input is hidden and the dropdown is not rendered
+
+**`financial-entity` nodes** (`droppable === false`):
+
+- Show leaf icon
+- Show entity name and value badge
+- Show expand/collapse for the ledger view (`BusinessExtendedInfo`) on click — this is independent
+  of edit mode
+- No rename or delete controls
+
+### 3. Remove `isCategory` derivation
+
+Remove `const isCategory = droppable && !props.node.data?.sortCode` and replace all usages with
+`isSyntheticBranchNode(node)` from `./types.js`.
+
+### 4. Pass `editMode` through `TreeView` → `CustomNode`
+
+In `tree-view.tsx`:
+
+- Add `editMode: boolean` to `Props`
+- Pass it to `CustomNode` in the `render` callback
+
+In `index.tsx`:
+
+- Pass `editMode` to both `TreeView` instances
+
+### 5. Render tests
+
+Create `packages/client/src/components/reports/dynamic-report/__tests__/custom-node.test.tsx`.
+
+Use vitest + @testing-library/react.
+
+Required test cases (use `renderWithProviders` or a minimal wrapper with DndProvider):
+
+- `sort-code-branch` node: rename input is NOT present regardless of `editMode`
+- `synthetic-branch` node, `editMode=false`: rename and delete controls not present
+- `synthetic-branch` node, `editMode=true`: rename input toggle visible, delete menu item visible
+- `financial-entity` node: value badge present, no rename or delete
+
+Run `yarn workspace @accounter/client test --run`.
+
+````
+
+---
+
+### Prompt 10 — `TreeView` cross-tree `canDrop` rules
+
+```text
+We are working in:
+  packages/client/src/components/reports/dynamic-report/tree-view.tsx
+
+## Context
+
+Currently `canDrop` only allows/prevents based on `editMode` and whether the
+source is already a child of the target. We need richer rules that apply to both
+the bank and report panels.
+
+## Task
+
+### 1. Add `treeId` prop
+
+```typescript
+type Props<T> = ... & {
+  treeId: 'bank' | 'report';
+  editMode: boolean;
+};
+````
+
+### 2. Update `canDrop`
+
+```typescript
+canDrop={(_tree, { dragSource, dropTargetId, dropTarget }) => {
+  if (!editMode) return false;
+
+  // Cannot drop anything onto a financial-entity leaf
+  if (dropTarget && isFinancialEntityNode(dropTarget)) return false;
+
+  // Allow dropping onto the root of either tree
+  if (dropTargetId === rootId) return true;
+
+  // Within the same tree: allow reordering among siblings
+  if (dragSource?.parent === dropTargetId) return true;
+
+  return undefined; // let the library decide for other cases
+}}
+```
+
+Import `isFinancialEntityNode` from `./types.js`.
+
+### 3. Unit tests
+
+Create `packages/client/src/components/reports/dynamic-report/__tests__/tree-view.test.tsx`.
+
+Required test cases:
+
+- `editMode=false` → `canDrop` returns false regardless of source/target
+- Dropping onto a `financial-entity` node → returns false
+- Dropping onto a branch node or root → returns true (when `editMode=true`)
+
+Because `canDrop` is an internal prop passed to `Tree`, test the logic via the exported component:
+simulate that the drop is blocked by asserting the resulting tree state does not change when
+dropping on a financial-entity target.
+
+Run `yarn workspace @accounter/client test --run`.
+
+````
+
+---
+
+### Prompt 11 — Delete branch → confirmation dialog + move to bank
+
+```text
+We are working in:
+  packages/client/src/components/reports/dynamic-report/index.tsx
+  packages/client/src/components/reports/dynamic-report/custom-node.tsx
+
+## Context
+
+Currently `handleDeleteCategory` in `index.tsx` removes the branch and re-parents
+its direct children to `BANK_TREE_ROOT_ID`. The spec requires:
+- When a branch is deleted from the **report** tree, the entire branch
+  (structure intact) moves to the bank tree root.
+- A confirmation dialog is shown before the delete is executed.
+- Deleting a branch from the **bank** tree removes it (with confirmation).
+
+## Task
+
+### 1. Create `move-branch-to-bank.ts`
+
+Create
+`packages/client/src/components/reports/dynamic-report/move-branch-to-bank.ts`.
+
+```typescript
+import { getDescendants, type NodeModel } from '@minoru/react-dnd-treeview';
+import { BANK_TREE_ROOT_ID } from './bank-tree.js';
+import type { CustomData } from './types.js';
+
+/**
+ * Removes `branchId` and all its descendants from `reportTree`,
+ * and appends them to `bankTree` with the branch's parent set to
+ * BANK_TREE_ROOT_ID (descendants retain their relative parents).
+ */
+export function moveBranchToBank(
+  branchId: NodeModel['id'],
+  reportTree: NodeModel<CustomData>[],
+  bankTree:   NodeModel<CustomData>[],
+): { nextReportTree: NodeModel<CustomData>[]; nextBankTree: NodeModel<CustomData>[] }
+````
+
+### 2. Update `handleDeleteCategory` in index.tsx
+
+Replace the existing single-tree implementation:
+
+```typescript
+const handleDeleteCategory = useCallback((id: NodeModel['id'], treeSource: 'bank' | 'report') => {
+  setPendingDelete({ id, treeSource })
+  setDeleteConfirmOpen(true)
+}, [])
+
+const confirmDelete = useCallback(() => {
+  if (!pendingDelete) return
+  if (pendingDelete.treeSource === 'report') {
+    const { nextReportTree, nextBankTree } = moveBranchToBank(
+      pendingDelete.id,
+      reportTree,
+      bankTree
+    )
+    updateReportTree(() => nextReportTree)
+    updateBankTree(() => nextBankTree)
+  } else {
+    // Delete from bank: remove branch + descendants entirely
+    const ids = new Set([
+      pendingDelete.id,
+      ...getDescendants(bankTree, pendingDelete.id).map(n => n.id)
+    ])
+    updateBankTree(prev => prev.filter(n => !ids.has(n.id)))
+  }
+  setDeleteConfirmOpen(false)
+  setPendingDelete(null)
+}, [pendingDelete, reportTree, bankTree, updateReportTree, updateBankTree])
+```
+
+Add state: `const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);` Add state:
+`const [pendingDelete, setPendingDelete] = useState<{ id: NodeModel['id']; treeSource: 'bank' | 'report' } | null>(null);`
+
+Render a shadcn `AlertDialog` that is open when `deleteConfirmOpen`:
+
+- Title: "Delete branch"
+- Description: "This branch will be moved to the bank. Continue?" (for report) / "Delete this branch
+  permanently?" (for bank)
+- Cancel + Confirm buttons.
+
+### 3. Thread `treeSource` through `TreeView` → `CustomNode`
+
+Add a `treeSource: 'bank' | 'report'` prop to both `TreeView` and `CustomNode`. Pass it to the
+`onDeleteCategory` callback.
+
+### 4. Unit tests
+
+Create
+`packages/client/src/components/reports/dynamic-report/__tests__/move-branch-to-bank.test.ts`.
+
+Required test cases:
+
+- Branch with two entity children: after `moveBranchToBank`, branch and both children are absent
+  from report tree, present in bank tree
+- Branch root's parent in bank is `BANK_TREE_ROOT_ID`
+- Children's parents are unchanged (still point to the branch id)
+- Bank tree and report tree together still contain the same total count of nodes
+
+Run `yarn workspace @accounter/client test --run`.
+
+````
+
+---
+
+### Prompt 12 — Template management: save-as, resave, rename, duplicate
+
+```text
+We are working in:
+  packages/client/src/components/reports/dynamic-report/dynamic-report-save-template.tsx
+  packages/client/src/components/reports/dynamic-report/dynamic-report-manage-templates.tsx
+  packages/client/src/components/reports/dynamic-report/index.tsx
+
+## Context
+
+### Current state
+- `SaveTemplate` inserts a new template (save-as only).
+- `ManageTemplates` lists templates with delete and unlock actions.
+
+### Required additions
+- **Resave**: overwrite the currently loaded template with the current report tree.
+- **Rename**: rename the currently loaded template.
+- **Duplicate**: save the current report tree as a new template (like save-as, but
+  pre-fills a suggested name).
+
+### Template serialisation rule
+The saved template must contain **only report tree nodes** — bank tree nodes are
+never saved.
+
+Entity leaf nodes must include `nodeType: 'financial-entity'` and omit `value`
+(a runtime-only field).
+
+## Task
+
+### 1. Extract `serializeReportTree` helper
+
+Create `packages/client/src/components/reports/dynamic-report/template-serialization.ts`:
+
+```typescript
+import type { NodeModel } from '@minoru/react-dnd-treeview';
+import type { CustomData } from './types.js';
+
+/**
+ * Converts the report tree state to the JSON string persisted in the DB.
+ * - Strips `value` (runtime only)
+ * - Includes `nodeType`, `isOpen`, `hebrewText`, `sortCode` in data
+ * - Returns a JSON string
+ */
+export function serializeReportTree(reportTree: NodeModel<CustomData>[]): string
+````
+
+### 2. Update `SaveTemplate`
+
+- Rename the internal `template` memo to use `serializeReportTree(reportTree)`.
+- Accept `reportTree` as prop (instead of `tree`).
+- Remove references to old serialization code that included bank-tree nodes.
+
+### 3. Add Resave button
+
+In `index.tsx`, add a "Resave" button to the footer that is only enabled when a `templateName` is
+set and `isDirty` is true. On click it calls
+`updateDynamicReportTemplate({ name: templateName, template: serializeReportTree(reportTree) })` via
+the existing `useUpdateDynamicReportTemplate` hook, then sets `isDirty = false`.
+
+### 4. Update `ManageTemplates`
+
+In the per-row action dropdown in `dynamic-report-manage-templates.tsx`, add:
+
+- **Rename**: opens an inline input in the row (or a modal) with the current name, calls
+  `updateDynamicReportTemplateName({ name, newName })` on submit.
+- **Duplicate**: triggers the save-as modal pre-filled with `"Copy of <name>"`.
+
+For locked templates the only available action remains **duplicate** (not rename, delete, or edit).
+Ensure locked rows disable the other actions.
+
+### 5. Unit tests for serialization
+
+Create
+`packages/client/src/components/reports/dynamic-report/__tests__/template-serialization.test.ts`.
+
+Required test cases:
+
+- `serializeReportTree` output parses back to valid JSON
+- Output does not contain any node whose `data.nodeType` is not one of the three valid values
+- `value` field is absent from all serialized nodes
+- `sortCode` field is present on nodes with `nodeType: 'sort-code-branch'`
+
+Run `yarn workspace @accounter/client test --run`.
+
+````
+
+---
+
+### Prompt 13 — Legacy template detection banner
+
+```text
+We are working in:
+  packages/client/src/components/reports/dynamic-report/index.tsx
+
+## Context
+
+After prompt 5 we have `isLegacyTemplateNodes` and `migrateLegacyTemplateNodes`
+from `./legacy-migration.js`. After prompt 6/7, when a template is loaded the
+component calls `buildReportTree`. We need to intercept legacy templates before
+`buildReportTree` and show a dismissible banner.
+
+## Task
+
+### 1. Detect and migrate on template load
+
+In the `useEffect` / `useMemo` that processes `templateData`:
+1. Check `isLegacyTemplateNodes(templateData.dynamicReport.template)`.
+2. If legacy:
+   a. Call `migrateLegacyTemplateNodes(templateData.dynamicReport.template, businessSums)`
+      to get migrated nodes.
+   b. Pass migrated nodes to `buildReportTree`.
+   c. Set state `isLegacyTemplate = true`.
+3. If not legacy:
+   a. Pass nodes directly to `buildReportTree`.
+   b. Set `isLegacyTemplate = false`.
+
+Add state: `const [isLegacyTemplate, setIsLegacyTemplate] = useState(false);`
+
+### 2. Banner
+
+Render an `Alert` (variant `default`, using the `Info` icon from lucide-react)
+below the toolbar and above the two-panel layout when `isLegacyTemplate` is true:
+
+```tsx
+{isLegacyTemplate && (
+  <Alert className="mb-2">
+    <Info className="h-4 w-4" />
+    <AlertTitle>Legacy template format</AlertTitle>
+    <AlertDescription>
+      This template was saved in an older format and has been automatically
+      migrated. Please resave to update it permanently.
+    </AlertDescription>
+  </Alert>
+)}
+````
+
+The alert is dismissible by clicking the Resave button (which sets `isLegacyTemplate = false` after
+a successful save).
+
+### 3. Render test additions
+
+Extend `__tests__/index.test.tsx`:
+
+- When the template query returns a legacy node array (containing `descendantFinancialEntities`),
+  the "Legacy template format" alert is present.
+- When the template query returns a new-format node array, the alert is absent.
+
+Run `yarn workspace @accounter/client test --run`.
+
+````
+
+---
+
+### Prompt 14 — Integration wiring: filters, URL params, locked template, CSV
+
+```text
+We are working in:
+  packages/client/src/components/reports/dynamic-report/index.tsx
+  packages/client/src/components/reports/dynamic-report/download-csv.tsx
+
+This is the integration pass — wiring all pieces together and ensuring no
+regressions in the existing cross-cutting concerns.
+
+## Task
+
+### 1. Filters and URL params
+
+Verify (and fix if broken) that:
+- `fromDate`, `toDate`, `ownerIds` from the filter state are passed to
+  `DynamicReportDocument` query variables (unchanged).
+- `isShowZeroedAccounts` is passed to `buildInitialBankTree` as `includeZeroed`.
+- On filter change the bank tree is rebuilt (via the dependency on
+  `businessTransactionsSumData` in the `useEffect`).
+- The filter state is read from and written to URL query params via `useUrlQuery`
+  (unchanged from current implementation).
+
+### 2. Locked template enforcement
+
+When the loaded template has `isLocked === true` (from
+`templateData.dynamicReport.isLocked`):
+- Disable the edit-mode toggle (`<Switch disabled>` or hidden).
+- Hide the Resave button.
+- Disable Delete and Rename in `ManageTemplates` for that row.
+- The only available template action is Duplicate.
+
+Add a `isTemplateLocked` derived value:
+```typescript
+const isTemplateLocked = templateData?.dynamicReport?.isLocked ?? false;
+````
+
+Pass it to the edit-mode `<Switch>` as `disabled={isTemplateLocked}`. Pass it to `ManageTemplates`
+as a `currentTemplateLocked` prop so it can disable actions for the currently-active row.
+
+### 3. CSV export — report tree only
+
+In `download-csv.tsx`, verify (or update) that the `tree` prop it receives is the `reportTree`
+state, not the combined tree. In `index.tsx`, change the `DownloadCSV` usage to
+`<DownloadCSV tree={reportTree} filters={filter} />`.
+
+### 4. Reset dirty / isLegacyTemplate after save
+
+After any successful mutation that saves the template (`insertDynamicReportTemplate`,
+`updateDynamicReportTemplate`):
+
+- Set `isDirty = false`
+- Set `isLegacyTemplate = false`
+
+### 5. AddBankNode restricted to bank
+
+`handleAddBankNode` should only add a node to `bankTree`, not `reportTree`. Verify that the newly
+created synthetic branch has `parent: BANK_TREE_ROOT_ID` and `data.nodeType: 'synthetic-branch'`.
+
+### 6. Integration smoke test
+
+Extend `__tests__/index.test.tsx`:
+
+- Mock a locked template; assert the edit-mode switch is disabled.
+- Assert the "Resave" button is absent when the template is locked.
+- Assert `<DownloadCSV>` receives `reportTree` (check prop via a mock or by inspecting the rendered
+  DOM for report-only node names).
+
+Run `yarn workspace @accounter/client test --run` and `yarn lint` and confirm zero errors.
+
+````
+
+---
+
+### Prompt 15 — Final: `yarn generate` + end-to-end type check + lint
+
+```text
+This is the final cleanup prompt. No new features — only verification and fixes.
+
+## Task
+
+### 1. Run codegen
+
+```bash
+yarn generate
+````
+
+This regenerates `packages/client/src/gql/graphql.ts` and server `__generated__/types` from the
+updated GraphQL schema (prompt 1). Some generated types will change because `DynamicReportNodeData`
+no longer has `descendantSortCodes` etc.
+
+### 2. Fix generated-type usages
+
+After codegen, the `TemplateForDynamicReport` query document in `index.tsx` will request fields that
+no longer exist in the schema. Update the inline GraphQL query:
+
+```graphql
+query TemplateForDynamicReport($name: String!) {
+  dynamicReport(name: $name) {
+    id
+    name
+    isLocked
+    template {
+      id
+      parent
+      text
+      droppable
+      data {
+        nodeType
+        isOpen
+        hebrewText
+      }
+    }
+  }
+}
+```
+
+Remove `descendantSortCodes`, `descendantFinancialEntities`, `mergedSortCodes` from this query
+fragment.
+
+For the legacy-migration path, the query that loads legacy templates must still request those fields
+from the old GraphQL endpoint during the transition window. Since the server no longer exposes them,
+the client-side legacy detection will simply never trigger for templates loaded after the schema
+change; the only legacy templates will be those whose raw JSON string (in the DB) was saved in the
+old format. The `isLegacyTemplateNodes` check operates on the raw template JSON returned as
+`template` nodes — if the server parses with the new Zod schema it will strip old fields. To handle
+this cleanly:
+
+- Keep the server-side `parseTemplate` behind a try/catch that falls back to parsing with the old
+  lenient schema (the legacy Zod shape without `.strict()` and with optional old fields). Return the
+  parsed nodes verbatim so the client can detect and migrate.
+- OR (simpler): store and return the raw template JSON as a plain string field `rawTemplate: String`
+  alongside the structured `template: [DynamicReportNode]` field, and let the client parse + detect
+  the legacy format from `rawTemplate`.
+
+Choose the simpler option: add `rawTemplate: String` to `DynamicReportInfo` in the GraphQL typeDef,
+resolve it by returning the raw DB string from the provider. The client uses `rawTemplate` only in
+the legacy-detection path and the structured `template` field for the normal rendering path.
+
+Update `TemplateForDynamicReport` query to also request `rawTemplate`. Update `DynamicReportInfo`
+resolver to return `rawTemplate`.
+
+### 3. Full type-check
+
+```bash
+yarn workspace @accounter/client tsc --noEmit
+yarn workspace @accounter/server tsc --noEmit
+```
+
+Fix any remaining type errors.
+
+### 4. Lint
+
+```bash
+yarn lint
+```
+
+Fix any ESLint warnings or errors.
+
+### 5. Full test run
+
+```bash
+yarn test
+```
+
+All tests must pass.
+
+```
+
+---
+
+## Summary of Prompt Ordering
+
+| # | File(s) touched | What it tests |
+|---|---|---|
+| 1 | server typeDef, Zod helper | Server unit tests for parse/migrate |
+| 2 | client `types.ts` | TypeScript compile check |
+| 3 | `bank-tree.ts` | Pure-function unit tests |
+| 4 | `report-tree.ts` | Pure-function unit tests |
+| 5 | `legacy-migration.ts` | Pure-function unit tests |
+| 6 | `index.tsx` split state | Render smoke test |
+| 7 | `cross-tree-drop.ts` | Drop-handler unit tests |
+| 8 | `index.tsx` edit/dirty | Render + interaction tests |
+| 9 | `custom-node.tsx` | Node render tests |
+| 10 | `tree-view.tsx` | `canDrop` logic tests |
+| 11 | `move-branch-to-bank.ts`, `index.tsx` | Move-to-bank unit tests |
+| 12 | save/manage templates | Serialization unit tests |
+| 13 | `index.tsx` legacy banner | Render tests |
+| 14 | `index.tsx` (integration) | Integration smoke tests |
+| 15 | All (codegen + types) | Compile + lint + full test run |
+```
diff --git a/docs/dynamic-report-refactor/spec.md b/docs/dynamic-report-refactor/spec.md
new file mode 100644
index 0000000000..3dc6d85a34
--- /dev/null
+++ b/docs/dynamic-report-refactor/spec.md
@@ -0,0 +1,239 @@
+# Dynamic Report Refactor — Specification
+
+## Overview
+
+Refactor the dynamic report screen from its current implicit-membership model (sort codes as parent
+hints, entities inferred by membership) to an explicit-node model where every entity appears exactly
+once, both the bank and the report are full freeform trees, and templates save the report tree with
+explicit entity leaf nodes.
+
+---
+
+## Existing implementation (context)
+
+- **DB table**: `accounter_schema.dynamic_report_templates` — columns: `name`, `owner_id`,
+  `template` (JSON text), `created_at`, `updated_at`, `is_locked`
+- **Template JSON node shape**: `{ id, parent, text, droppable, data }` where
+  `data = { descendantSortCodes, descendantFinancialEntities, mergedSortCodes, isOpen, hebrewText }`
+- `descendantSortCodes` / `descendantFinancialEntities` are "hint" arrays on branch nodes — entities
+  are **not** stored as explicit leaf nodes in the current format
+- **GraphQL mutations**: `updateDynamicReportTemplate`, `updateDynamicReportTemplateName`,
+  `insertDynamicReportTemplate`, `deleteDynamicReportTemplate`, `lockDynamicReportTemplate`,
+  `unlockDynamicReportTemplate`
+- **Lock**: DB boolean `is_locked`; lock/unlock mutations exist but are not exposed from the dynamic
+  report screen (locked by external flows, e.g. annual audit)
+- **Provider**: `DynamicReportProvider` —
+  `packages/server/src/modules/reports/providers/dynamic-report.provider.ts`
+- **Zod validation**: `dynamicReportTemplate` —
+  `packages/server/src/modules/reports/helpers/dynamic-report.helper.ts`
+- **Leaf expanded view** currently reuses `BusinessExtendedInfo`, which calls
+  `businessTransactionsFromLedgerRecords(businessIDs: [id])`
+
+---
+
+## Required backend changes
+
+### New template node format
+
+| Field                              | Old        | New                                                              |
+| ---------------------------------- | ---------- | ---------------------------------------------------------------- |
+| `data.nodeType`                    | _(absent)_ | `"synthetic-branch" \| "sort-code-branch" \| "financial-entity"` |
+| `data.descendantSortCodes`         | present    | **removed**                                                      |
+| `data.mergedSortCodes`             | present    | **removed**                                                      |
+| `data.descendantFinancialEntities` | present    | **removed**                                                      |
+| `data.isOpen`                      | present    | kept                                                             |
+| `data.hebrewText`                  | present    | kept                                                             |
+
+Financial entities are stored as **explicit leaf nodes** in the template JSON array (not inferred
+from sort code membership). A financial entity leaf has `droppable: false` and
+`data.nodeType: "financial-entity"`.
+
+**Node IDs**:
+
+- Financial entity leaf: entity UUID
+- Sort-code branch: sort code DB id
+- Synthetic branch: generated string id (e.g. `synthetic-<random>`)
+
+**Files to change**:
+
+- `packages/server/src/modules/reports/typeDefs/dynamic-report.graphql.ts` — `DynamicReportNodeData`
+  type: remove `descendantSortCodes`, `mergedSortCodes`, `descendantFinancialEntities`; add
+  `nodeType: String!`
+- `packages/server/src/modules/reports/helpers/dynamic-report.helper.ts` — Update Zod schema to
+  match new shape
+- No DB column changes needed (template is stored as an opaque JSON text column)
+
+### Backward compatibility
+
+On template load, detect old format by checking for presence of `descendantSortCodes` on any node.
+If detected:
+
+1. Migrate the template in-memory to the new explicit-leaf format using the live entity data
+2. Display a prompt informing the user the template is in a legacy format and asking them to resave
+
+---
+
+## Functional specification
+
+### Core data
+
+- Data source: ledger records
+- Each side of a ledger record is a **financial entity** (business or tax category)
+- The server computes the total local-currency amount per entity for a given date range (existing
+  `businessTransactionsSumFromLedgerRecords` query)
+- The report displays all entities with their local currency sum
+
+---
+
+### Layout
+
+Two-panel side-by-side layout:
+
+- **Left panel** — Bank
+- **Right panel** — Report tree
+
+---
+
+### Bank (left panel)
+
+**Initial / default state** (applied on page load and on template load):
+
+- Entities grouped by sort-code folders
+- Sort-code folders ordered ascending by sort code number
+- Each sort-code folder label: `<number> — <name>`
+- Independent entities (no sort code) listed alphabetically **after** all sort-code folders
+
+**User-controlled state**:
+
+- User can reorder branches and leaves freely (drag handles or drag-and-drop)
+- User can create custom synthetic branches in the bank
+- Exact user-controlled order is preserved in the session
+
+**Bank state is never saved** to a template. Loading a template always resets the bank to its
+initial state.
+
+---
+
+### Report tree (right panel)
+
+- Fully user-structured tree of **branches** (synthetic or sort-code) and **leaves** (financial
+  entities)
+- Branches show: name, total sum of all descendant leaves (local currency), leaf count
+- Branches can contain sub-branches, leaves, or both
+- Branches are collapsible/expandable
+- Leaves are expandable (shows the ledger records table — see
+  [Leaf expanded view](#leaf-expanded-view))
+
+---
+
+### Entity placement — single-presence rule
+
+Every entity exists in **exactly one** location at all times: the bank OR the report tree (never
+both).
+
+| Action                                             | Result                                                                                  |
+| -------------------------------------------------- | --------------------------------------------------------------------------------------- |
+| Drag sort-code folder or branch from bank → report | Entire unit (all descendants) moves to report; removed from bank                        |
+| Drag single entity from bank → report              | Entity moves to drop position in report                                                 |
+| Drag single entity from report → bank              | Entity moves to exact drop position in bank                                             |
+| Drag branch from report → bank                     | Branch structure preserved; lands at drop position in bank                              |
+| Delete branch (via delete button)                  | Confirmation dialog → if confirmed, entire branch (structure intact) moves to bank root |
+| Drag branch within report                          | Entire branch + all descendants move as a unit                                          |
+
+---
+
+### Edit mode
+
+- An explicit **"Edit mode" toggle** is required to enable: drag-and-drop, rename, add branch,
+  delete branch
+- When a **locked** template is loaded, the edit mode toggle is **disabled or hidden**
+- Any structural change (drag, rename, add, delete) marks the session as **dirty**
+- Dirty state is visually indicated (e.g. "Unsaved changes" badge in the toolbar)
+
+---
+
+### Templates
+
+**What is saved**: report tree only — branch nodes (synthetic + sort-code), leaf nodes (explicit
+entity UUIDs), nesting, order, and `isOpen` state per node.
+
+**What is NOT saved**: bank state.
+
+**On template load**:
+
+1. Entities listed in the template → placed in the report tree as specified
+2. All other entities → bank, reset to initial state (sort-code groups, default order)
+3. Entities created after the template was saved → always start in the bank
+
+**Dirty-state guard**: if the session has unsaved changes when the user picks a template, show a
+confirmation dialog: _"Unsaved changes will be lost. Continue?"_
+
+**Template management** (all from the dynamic report screen):
+
+| Operation | Description                                |
+| --------- | ------------------------------------------ |
+| Select    | Load a saved template                      |
+| Save as   | Save current state as a new named template |
+| Resave    | Overwrite the currently loaded template    |
+| Rename    | Rename the currently loaded template       |
+| Duplicate | Save a copy under a new name               |
+| Delete    | Delete a template (with confirmation)      |
+
+**Locked templates**:
+
+- Locked by external flows (e.g. annual audit step) — not from this screen
+- When loaded: duplicate only; edit, delete, rename disabled; edit mode toggle hidden
+- The `is_locked` flag is a DB boolean; `lockDynamicReportTemplate` / `unlockDynamicReportTemplate`
+  mutations exist but are not surfaced here
+
+**Sharing**: templates are shared across all users of the same business owner.
+
+---
+
+### Filters
+
+Same as current implementation:
+
+- Date range (from + to)
+- Owner filter
+- "Show zeroed accounts" toggle
+- All filters persisted in URL query params
+
+---
+
+### Leaf expanded view
+
+**Current implementation** (to reuse for now): `BusinessExtendedInfo` component
+(`packages/client/src/components/business-ledger/business-extended-info.tsx`), which calls
+`businessTransactionsFromLedgerRecords` with `businessIDs: [entityId]`.
+
+**Future step** (separate work item): replace `BusinessExtendedInfo` with a purpose-built component
+for this screen:
+
+- Fixed columns: Business, Date, Local Amount, Local Amount Balance, Reference, Details, Counter
+  Account
+- Optional foreign currency column pairs (Amount + Balance) — only currencies actually present in
+  that entity's ledger records are offered
+- Currency toggle state is ephemeral (not saved), defaults to local currency only
+- Each entity independently manages its shown foreign currencies
+
+---
+
+### Export
+
+CSV export button — exports the **report tree only** (same as current behavior).
+
+---
+
+## Files affected
+
+| File                                                                                        | Change                                                             |
+| ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| `packages/server/src/modules/reports/typeDefs/dynamic-report.graphql.ts`                    | Update `DynamicReportNodeData` GraphQL type                        |
+| `packages/server/src/modules/reports/helpers/dynamic-report.helper.ts`                      | Update Zod schema + add backward-compat migration helper           |
+| `packages/client/src/components/reports/dynamic-report/index.tsx`                           | Main component rewrite                                             |
+| `packages/client/src/components/reports/dynamic-report/custom-node.tsx`                     | Node rendering — `nodeType`-aware, edit mode prop                  |
+| `packages/client/src/components/reports/dynamic-report/tree-view.tsx`                       | Drag rules — cross-tree, single-presence enforcement               |
+| `packages/client/src/components/reports/dynamic-report/types.ts`                            | `CustomData` type — add `nodeType`, remove hint arrays             |
+| `packages/client/src/components/reports/dynamic-report/dynamic-report-manage-templates.tsx` | Template management UI (select, resave, rename, duplicate, delete) |
+| `packages/client/src/components/reports/dynamic-report/dynamic-report-save-template.tsx`    | Save-as flow                                                       |

From b962e183fe9f67312f8b4ab3015e224de93ceb24 Mon Sep 17 00:00:00 2001
From: Gil Gardosh <gilgardosh@gmail.com>
Date: Wed, 22 Apr 2026 11:04:57 +0300
Subject: [PATCH 2/4] initial UI + doc update

Co-authored-by: Copilot <copilot@github.com>
---
 docs/dynamic-report-refactor/blueprint.md     | 311 ++++++++------
 docs/dynamic-report-refactor/spec.md          |  39 ++
 packages/client/package.json                  |   4 +
 .../dynamic-report-2/cross-tree-drop.ts       | 140 ++++++
 .../reports/dynamic-report-2/drag-overlay.tsx |  26 ++
 .../reports/dynamic-report-2/index.tsx        | 384 +++++++++++++++++
 .../dynamic-report-2/legacy-banner.tsx        |  28 ++
 .../reports/dynamic-report-2/mock-data.ts     | 251 +++++++++++
 .../dynamic-report-2/template-manager.tsx     | 232 ++++++++++
 .../reports/dynamic-report-2/toolbar.tsx      | 185 ++++++++
 .../reports/dynamic-report-2/tree-node.tsx    | 401 ++++++++++++++++++
 .../reports/dynamic-report-2/tree-panel.tsx   | 111 +++++
 .../reports/dynamic-report-2/types.ts         | 111 +++++
 yarn.lock                                     |  90 +++-
 14 files changed, 2178 insertions(+), 135 deletions(-)
 create mode 100644 packages/client/src/components/reports/dynamic-report-2/cross-tree-drop.ts
 create mode 100644 packages/client/src/components/reports/dynamic-report-2/drag-overlay.tsx
 create mode 100644 packages/client/src/components/reports/dynamic-report-2/index.tsx
 create mode 100644 packages/client/src/components/reports/dynamic-report-2/legacy-banner.tsx
 create mode 100644 packages/client/src/components/reports/dynamic-report-2/mock-data.ts
 create mode 100644 packages/client/src/components/reports/dynamic-report-2/template-manager.tsx
 create mode 100644 packages/client/src/components/reports/dynamic-report-2/toolbar.tsx
 create mode 100644 packages/client/src/components/reports/dynamic-report-2/tree-node.tsx
 create mode 100644 packages/client/src/components/reports/dynamic-report-2/tree-panel.tsx
 create mode 100644 packages/client/src/components/reports/dynamic-report-2/types.ts

diff --git a/docs/dynamic-report-refactor/blueprint.md b/docs/dynamic-report-refactor/blueprint.md
index 20ce302702..5761623e68 100644
--- a/docs/dynamic-report-refactor/blueprint.md
+++ b/docs/dynamic-report-refactor/blueprint.md
@@ -25,7 +25,8 @@ render them side-by-side, initially without cross-tree drag.
 ### Phase 5 — Single-presence drop handler
 
 Implement the cross-tree drop logic that enforces "entity exists in exactly one place" including
-whole-branch moves.
+whole-branch moves. Uses Pragmatic DnD `onDrop` callbacks and the `applyInstruction` utility to
+translate tree-item `Instruction` objects into flat-array mutations.
 
 ### Phase 6 — Edit mode + dirty state
 
@@ -67,7 +68,7 @@ Chunk C  buildInitialBankTree pure function + tests
 Chunk D  buildReportTree pure function + tests
 Chunk E  Client-side legacy-migration helper + tests
 Chunk F  Split bank/report state + two-panel layout (no drag yet)
-Chunk G  Cross-tree single-presence drop handler + tests
+Chunk G  Cross-tree single-presence drop handler (Pragmatic DnD) + tests
 Chunk H  Edit mode + dirty state + confirmation dialog
 Chunk I  CustomNode — nodeType-aware rendering + edit-mode prop
 Chunk J  TreeView — cross-tree canDrop rules
@@ -249,41 +250,72 @@ export type CustomData = {
 }
 ```
 
-### 2. Add predicate helpers (same file, exported)
+### 2. Add `FlatNode` type
+
+Replace the dependency on `NodeModel` from `@minoru/react-dnd-treeview` with a local type that
+retains the same flat-array shape used for DB serialisation:
 
 ```typescript
-import type { NodeModel } from '@minoru/react-dnd-treeview'
+/**
+ * Flat node shape — matches the DB template JSON format exactly.
+ * Replaces @minoru/react-dnd-treeview's NodeModel.
+ */
+export type FlatNode<T = CustomData> = {
+  id: string
+  parent: string // parent id, or BANK_TREE_ROOT_ID / REPORT_TREE_ROOT_ID for root nodes
+  text: string
+  droppable: boolean
+  data: T
+}
+```
 
-export function isFinancialEntityNode(node: NodeModel<CustomData>): boolean {
-  return node.data?.nodeType === 'financial-entity'
+### 3. Add predicate helpers (same file, exported)
+
+```typescript
+export function isFinancialEntityNode(node: FlatNode<CustomData>): boolean {
+  return node.data.nodeType === 'financial-entity'
 }
 
-export function isSortCodeBranchNode(node: NodeModel<CustomData>): boolean {
-  return node.data?.nodeType === 'sort-code-branch'
+export function isSortCodeBranchNode(node: FlatNode<CustomData>): boolean {
+  return node.data.nodeType === 'sort-code-branch'
 }
 
-export function isSyntheticBranchNode(node: NodeModel<CustomData>): boolean {
-  return node.data?.nodeType === 'synthetic-branch'
+export function isSyntheticBranchNode(node: FlatNode<CustomData>): boolean {
+  return node.data.nodeType === 'synthetic-branch'
 }
 
-export function isBranchNode(node: NodeModel<CustomData>): boolean {
+export function isBranchNode(node: FlatNode<CustomData>): boolean {
   return node.droppable === true
 }
+
+/** Returns ids of all descendants in a flat node array. */
+export function getDescendantIds(nodes: FlatNode[], rootId: string): string[] {
+  const result: string[] = []
+  const queue = [rootId]
+  while (queue.length) {
+    const id = queue.shift()!
+    for (const n of nodes) {
+      if (n.parent === id) {
+        result.push(n.id)
+        queue.push(n.id)
+      }
+    }
+  }
+  return result
+}
 ```
 
-### 3. Fix immediately visible type errors
+### 4. Fix immediately visible type errors
 
-After changing `CustomData`, TypeScript will produce errors in:
+After changing `CustomData` and removing `NodeModel`, TypeScript will produce errors in:
 
-- `custom-node.tsx` — references to `data?.sortCode`, `data?.value` etc. These are still valid
-  fields, but `data?.descendantSortCodes` etc. must be removed. Remove any usage of the removed
-  fields; keep `sortCode` and `value` access.
-- `index.tsx` — same removals for the dropped fields.
-- `dynamic-report-save-template.tsx` — the template serialisation references the old fields; remove
-  `descendantSortCodes`, `descendantFinancialEntities`, `mergedSortCodes` from the serialised
-  object.
-- `tree-view.tsx` — references to `data?.sortCode` in the existing `handleDrop` / `canDrop` logic;
-  update as needed to use the new predicates.
+- `custom-node.tsx` — switch `NodeModel<CustomData>` to `FlatNode<CustomData>`; remove
+  `data?.descendantSortCodes` etc.
+- `index.tsx` — same removals for the dropped fields; replace `NodeModel` with `FlatNode`.
+- `dynamic-report-save-template.tsx` — remove `descendantSortCodes`, `descendantFinancialEntities`,
+  `mergedSortCodes` from the serialised object.
+- `tree-view.tsx` — remove `NodeModel` imports; the `handleDrop` / `canDrop` logic will be replaced
+  in Chunk G with Pragmatic DnD callbacks.
 
 Do NOT restructure any component behaviour yet — only fix TypeScript errors caused by the type
 change.
@@ -314,7 +346,8 @@ The relevant GraphQL query types from `packages/client/src/gql/graphql.ts` are:
 - `BusinessTransactionsSumFromLedgerRecordsSuccessfulResult['businessTransactionsSum']`
   — array of `{ business: { id, name, sortCode: { id, key, name } | null }, total: { raw } }`
 
-`NodeModel<CustomData>` is from `@minoru/react-dnd-treeview`.
+`FlatNode<CustomData>` is the local flat-node type defined in `./types.js` (replaces
+`NodeModel<CustomData>` from the old `@minoru/react-dnd-treeview` dependency).
 
 ## Task
 
@@ -325,9 +358,8 @@ Create `packages/client/src/components/reports/dynamic-report/bank-tree.ts`.
 Export one pure function:
 
 ```typescript
-import type { NodeModel } from '@minoru/react-dnd-treeview';
 import type { AllSortCodesQuery, DynamicReportQuery } from '../../../gql/graphql.js';
-import type { CustomData } from './types.js';
+import type { CustomData, FlatNode } from './types.js';
 
 export const BANK_TREE_ROOT_ID = 'bank';
 
@@ -359,15 +391,15 @@ export function buildInitialBankTree(
   businessSums: BusinessSum[],
   excludedIds: ReadonlySet<string>,
   includeZeroed: boolean,
-): NodeModel<CustomData>[]
+): FlatNode<CustomData>[]
 ````
 
 Implementation notes:
 
 - Sort-code branches:
   `{ id: sortCode.id, parent: BANK_TREE_ROOT_ID, droppable: true, text: \`${sortCode.key} —
-  ${sortCode.name}\`, data: { nodeType: 'sort-code-branch', sortCode: sortCode.key, isOpen: false }
-  }`
+  ${sortCode.name}\`,
+  data: { nodeType: 'sort-code-branch', sortCode: sortCode.key, isOpen: false } }`
 - Only include sort-code-branch nodes for sort codes that have at least one visible entity
   (otherwise bank is cluttered with empty folders).
 - Financial entity leaves:
@@ -425,9 +457,8 @@ by the bank tree builder via `excludedIds`).
 Create `packages/client/src/components/reports/dynamic-report/report-tree.ts`.
 
 ```typescript
-import type { NodeModel } from '@minoru/react-dnd-treeview';
 import type { DynamicReportQuery } from '../../../gql/graphql.js';
-import type { CustomData } from './types.js';
+import type { CustomData, FlatNode } from './types.js';
 
 export const REPORT_TREE_ROOT_ID = 'report';
 
@@ -461,14 +492,14 @@ type BusinessSum = Extract<
  * - The `isOpen` state per node is taken from the template.
  *
  * @returns { reportTree, placedEntityIds }
- *   reportTree      — flat NodeModel array for the report panel
+ *   reportTree      — flat FlatNode array for the report panel
  *   placedEntityIds — Set<string> of entity UUIDs placed in the report tree
  *                     (so the bank builder can exclude them)
  */
 export function buildReportTree(
   templateNodes: TemplateNode[],
   businessSums: BusinessSum[],
-): { reportTree: NodeModel<CustomData>[]; placedEntityIds: Set<string> }
+): { reportTree: FlatNode<CustomData>[]; placedEntityIds: Set<string> }
 ````
 
 Implementation notes:
@@ -530,10 +561,9 @@ Create
 `packages/client/src/components/reports/dynamic-report/legacy-migration.ts`.
 
 ```typescript
-import type { NodeModel } from '@minoru/react-dnd-treeview';
 import type { DynamicReportQuery } from '../../../gql/graphql.js';
 import { REPORT_TREE_ROOT_ID } from './report-tree.js';
-import type { CustomData } from './types.js';
+import type { CustomData, FlatNode } from './types.js';
 
 /**
  * Raw node shape as returned by the GraphQL query for a legacy template.
@@ -585,7 +615,7 @@ export function isLegacyTemplateNodes(nodes: LegacyTemplateNode[]): boolean
 export function migrateLegacyTemplateNodes(
   nodes: LegacyTemplateNode[],
   businessSums: BusinessSum[],
-): NodeModel<CustomData>[]
+): FlatNode<CustomData>[]
 ````
 
 ### 2. Unit tests
@@ -633,14 +663,14 @@ The pure helpers we now have:
 
 Replace:
 ```typescript
-const [tree, setTree] = useState<NodeModel<CustomData>[]>([]);
+const [tree, setTree] = useState<FlatNode<CustomData>[]>([]);
 ````
 
 with:
 
 ```typescript
-const [bankTree, setBankTree] = useState<NodeModel<CustomData>[]>([])
-const [reportTree, setReportTree] = useState<NodeModel<CustomData>[]>([])
+const [bankTree, setBankTree] = useState<FlatNode<CustomData>[]>([])
+const [reportTree, setReportTree] = useState<FlatNode<CustomData>[]>([])
 ```
 
 ### 2. Rebuild on data change
@@ -663,44 +693,39 @@ Replace the existing single `<TreeView>` JSX with a two-column layout:
 
 ```tsx
 <div className="grid grid-cols-2 gap-4 h-full">
-  <div className="flex flex-col overflow-auto border rounded p-2">
-    <h2 className="text-sm font-semibold mb-2">Bank</h2>
-    <TreeView
-      tree={bankTree}
-      rootId={BANK_TREE_ROOT_ID}
-      onDrop={handleBankDrop}
-      editMode={editMode}
-      handleTextChange={handleTextChange}
-      handleIsOpenChange={handleIsOpenChange}
-      handleDeleteCategory={handleDeleteCategory}
-      filter={filter}
-    />
-  </div>
-  <div className="flex flex-col overflow-auto border rounded p-2">
-    <h2 className="text-sm font-semibold mb-2">Report</h2>
-    <TreeView
-      tree={reportTree}
-      rootId={REPORT_TREE_ROOT_ID}
-      onDrop={handleReportDrop}
-      editMode={editMode}
-      handleTextChange={handleTextChange}
-      handleIsOpenChange={handleIsOpenChange}
-      handleDeleteCategory={handleDeleteCategory}
-      filter={filter}
-    />
-  </div>
+  <TreePanel
+    id="bank-panel"
+    title="Bank"
+    nodes={bankTree}
+    rootId={BANK_TREE_ROOT_ID}
+    editMode={editMode}
+    onDrop={handleBankDrop}
+    handleTextChange={handleTextChange}
+    handleIsOpenChange={handleIsOpenChange}
+    handleDeleteCategory={handleDeleteCategory}
+    filter={filter}
+  />
+  <TreePanel
+    id="report-panel"
+    title="Report"
+    nodes={reportTree}
+    rootId={REPORT_TREE_ROOT_ID}
+    editMode={editMode}
+    onDrop={handleReportDrop}
+    handleTextChange={handleTextChange}
+    handleIsOpenChange={handleIsOpenChange}
+    handleDeleteCategory={handleDeleteCategory}
+    filter={filter}
+  />
 </div>
 ```
 
-For now use stub handlers that just call `setBankTree` / `setReportTree` with the new tree passed in
-by the library (no cross-tree logic yet):
+`TreePanel` wraps a Pragmatic DnD `dropTargetForElements` drop zone and renders `TreeNodeRow`
+children (each a Pragmatic DnD `draggable`). For now use stub handlers (no cross-tree logic yet):
 
 ```typescript
-const handleBankDrop = useCallback((newTree: NodeModel<CustomData>[]) => setBankTree(newTree), [])
-const handleReportDrop = useCallback(
-  (newTree: NodeModel<CustomData>[]) => setReportTree(newTree),
-  []
-)
+const handleBankDrop = useCallback((nodes: FlatNode<CustomData>[]) => setBankTree(nodes), [])
+const handleReportDrop = useCallback((nodes: FlatNode<CustomData>[]) => setReportTree(nodes), [])
 ```
 
 ### 4. Remove dead code
@@ -754,72 +779,89 @@ Create
 `packages/client/src/components/reports/dynamic-report/cross-tree-drop.ts`.
 
 ```typescript
-import { getDescendants, type NodeModel, type DropOptions } from '@minoru/react-dnd-treeview';
-import type { CustomData } from './types.js';
+import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import type { CustomData, FlatNode } from './types.js';
+import { getDescendantIds } from './types.js';
+
+export type DragPayload = {
+  nodeId: string;
+  sourceTreeId: 'bank' | 'report';
+};
 
 /**
- * Handles a drop that may cross tree boundaries (bank ↔ report).
+ * Applies a Pragmatic DnD tree-item Instruction to the flat node arrays.
  *
- * @param sourceTree    The tree the drag originated from
- * @param targetTree    The tree the drop target belongs to
- * @param dropOptions   DropOptions from @minoru/react-dnd-treeview
- * @param newTargetTree The new target tree array emitted by the library's onDrop
+ * @param bankTree       Current bank flat nodes
+ * @param reportTree     Current report flat nodes
+ * @param payload        Drag payload attached to the draggable element
+ * @param targetNodeId   Id of the node the item was dropped on (or panel root id)
+ * @param targetTreeId   Which panel received the drop ('bank' | 'report')
+ * @param instruction    Tree-item hitbox instruction (reorder-above, reorder-below,
+ *                       make-child, reparent) — or null for panel-root drops
  *
- * @returns { nextSourceTree, nextTargetTree }
+ * @returns { nextBankTree, nextReportTree }
  */
 export function handleCrossTreeDrop(
-  sourceTree: NodeModel<CustomData>[],
-  targetTree: NodeModel<CustomData>[],
-  dropOptions: DropOptions<CustomData>,
-  newTargetTree: NodeModel<CustomData>[],
-): { nextSourceTree: NodeModel<CustomData>[]; nextTargetTree: NodeModel<CustomData>[] }
-````
+  bankTree: FlatNode<CustomData>[],
+  reportTree: FlatNode<CustomData>[],
+  payload: DragPayload,
+  targetNodeId: string,
+  targetTreeId: 'bank' | 'report',
+  instruction: Instruction | null,
+): { nextBankTree: FlatNode<CustomData>[]; nextReportTree: FlatNode<CustomData>[] }
+```
 
 Algorithm:
 
-1. Collect the moved node IDs =
-   `[dragSourceId, ...getDescendants(sourceTree, dragSourceId).map(n => n.id)]`
-2. Remove those IDs from `sourceTree` → `nextSourceTree`
-3. Use `newTargetTree` as `nextTargetTree` (the library already placed the node correctly)
-4. If the drop was within the SAME tree (source and target are the same array reference), return
-   `{ nextSourceTree: newTargetTree, nextTargetTree: newTargetTree }` (no cross-tree move needed).
+1. Determine `sourceTree` = bank or report based on `payload.sourceTreeId`.
+2. Collect moved node IDs = `[payload.nodeId, ...getDescendantIds(sourceTree, payload.nodeId)]`.
+3. Remove those IDs from the source tree → `nextSourceTree`.
+4. If `instruction` is `null` or the drop is on the panel root: append moved nodes to the end of
+   the target tree root (parent = target root id).
+5. If `instruction.type === 'make-child'`: set `parent = targetNodeId` on the dragged node.
+6. If `instruction.type === 'reorder-above'` / `'reorder-below'`: insert moved nodes before/after
+   `targetNodeId` in the flat array, preserving their original parent (or setting parent to
+   `targetNode.parent` if crossing trees).
+7. If `instruction.type === 'reparent'`: set `parent` of the dragged node according to
+   `instruction.desiredLevel` (walk up ancestors of `targetNodeId` by level).
+8. `canDrop` guard — return unchanged trees if:
+   - Target node is a `financial-entity` leaf and instruction is `make-child`.
+   - Source and target are the same node.
 
 ### 2. Wire into index.tsx
 
-Replace the stub handlers with:
+Replace the stub handlers with a single `onDrop` callback attached to the
+`monitorForElements` global monitor from Pragmatic DnD (set up once in a `useEffect`):
 
 ```typescript
-const handleBankDrop = useCallback(
-  (newTree: NodeModel<CustomData>[], dropOptions: DropOptions<CustomData>) => {
-    const { nextSourceTree, nextTargetTree } = handleCrossTreeDrop(
-      reportTree,
-      bankTree,
-      dropOptions,
-      newTree
-    )
-    setReportTree(nextSourceTree)
-    setBankTree(nextTargetTree)
-  },
-  [bankTree, reportTree]
-)
-
-const handleReportDrop = useCallback(
-  (newTree: NodeModel<CustomData>[], dropOptions: DropOptions<CustomData>) => {
-    const { nextSourceTree, nextTargetTree } = handleCrossTreeDrop(
-      bankTree,
-      reportTree,
-      dropOptions,
-      newTree
-    )
-    setBankTree(nextSourceTree)
-    setReportTree(nextTargetTree)
-  },
-  [bankTree, reportTree]
-)
+useEffect(() => {
+  return monitorForElements({
+    onDrop({ source, location }) {
+      const payload = source.data as DragPayload;
+      const target = location.current.dropTargets[0];
+      if (!target) return;
+      const targetNodeId = target.data.nodeId as string;
+      const targetTreeId = target.data.treeId as 'bank' | 'report';
+      const instruction = extractInstruction(target.data) ?? null;
+
+      const { nextBankTree, nextReportTree } = handleCrossTreeDrop(
+        bankTree,
+        reportTree,
+        payload,
+        targetNodeId,
+        targetTreeId,
+        instruction,
+      );
+      setBankTree(nextBankTree);
+      setReportTree(nextReportTree);
+      setIsDirty(true);
+    },
+  });
+}, [bankTree, reportTree]);
 ```
 
-Note: `onDrop` in `@minoru/react-dnd-treeview` receives `(newTree, dropOptions)` — pass both. Update
-the `TreeView` prop type for `onDrop` to match.
+`extractInstruction` is from `@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item`.
+`monitorForElements` is from `@atlaskit/pragmatic-drag-and-drop/element/adapter`.
 
 ### 3. Unit tests
 
@@ -827,12 +869,13 @@ Create `packages/client/src/components/reports/dynamic-report/__tests__/cross-tr
 
 Required test cases:
 
-- Entity dragged from source tree to target tree → entity absent from source, present in target at
-  drop position
-- Branch with two children dragged across → branch + both children absent from source, present in
-  target
-- Same-tree reorder (sourceTree === targetTree, i.e. same array reference used for both arguments) →
-  returns `newTargetTree` for both (no cross-tree deletion)
+- Entity dragged from bank to report (instruction: `null` / panel-root) → entity absent from bank,
+  present in report as root node
+- Branch with two children dragged from report to bank → branch + both children absent from report,
+  present in bank
+- `make-child` instruction → dragged node parent set to `targetNodeId`
+- `reorder-above` / `reorder-below` → dragged node inserted at correct position in flat array
+- `canDrop` guard: `make-child` on a `financial-entity` leaf → trees unchanged
 
 Run `yarn workspace @accounter/client test --run`.
 
@@ -842,7 +885,7 @@ Run `yarn workspace @accounter/client test --run`.
 
 ### Prompt 8 — Edit mode, dirty state, and confirmation dialog
 
-```text
+````text
 We are working in:
   packages/client/src/components/reports/dynamic-report/index.tsx
 
@@ -870,14 +913,14 @@ Wrap `setBankTree` and `setReportTree` in helper functions that also set `isDirt
 
 ```typescript
 const updateBankTree = useCallback(
-  (fn: (prev: NodeModel<CustomData>[]) => NodeModel<CustomData>[]) => {
+  (fn: (prev: FlatNode<CustomData>[]) => FlatNode<CustomData>[]) => {
     setBankTree(fn)
     setIsDirty(true)
   },
   []
 )
 const updateReportTree = useCallback(
-  (fn: (prev: NodeModel<CustomData>[]) => NodeModel<CustomData>[]) => {
+  (fn: (prev: FlatNode<CustomData>[]) => FlatNode<CustomData>[]) => {
     setReportTree(fn)
     setIsDirty(true)
   },
@@ -990,14 +1033,14 @@ Remove `const isCategory = droppable && !props.node.data?.sortCode` and replace
 
 ### 4. Pass `editMode` through `TreeView` → `CustomNode`
 
-In `tree-view.tsx`:
+In `tree-panel.tsx` (Pragmatic DnD version):
 
-- Add `editMode: boolean` to `Props`
-- Pass it to `CustomNode` in the `render` callback
+- Add `editMode: boolean` to `TreePanelProps`
+- Pass it down to each `TreeNodeRow`
 
 In `index.tsx`:
 
-- Pass `editMode` to both `TreeView` instances
+- Pass `editMode` to both `TreePanel` instances
 
 ### 5. Render tests
 
diff --git a/docs/dynamic-report-refactor/spec.md b/docs/dynamic-report-refactor/spec.md
index 3dc6d85a34..d799dfca5a 100644
--- a/docs/dynamic-report-refactor/spec.md
+++ b/docs/dynamic-report-refactor/spec.md
@@ -225,6 +225,42 @@ CSV export button — exports the **report tree only** (same as current behavior
 
 ---
 
+### Drag-and-drop library
+
+The refactored component uses **Pragmatic drag and drop** (`@atlaskit/pragmatic-drag-and-drop`) as
+the DnD engine, replacing the existing `@minoru/react-dnd-treeview` / `react-dnd` stack.
+
+**Rationale**:
+
+- `react-dnd` (used internally by `@minoru/react-dnd-treeview`) is abandoned and has known React 19
+  incompatibilities. The project is on React 19.
+- Pragmatic DnD is actively maintained by Atlassian, powers Trello/Jira/Confluence, is
+  framework-agnostic (no peer dependency on React internals), and ships a dedicated tree-item hitbox
+  package that directly solves the positional drop requirement.
+
+**Packages used**:
+
+| Package                                                           | Purpose                                                                                              |
+| ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `@atlaskit/pragmatic-drag-and-drop`                               | Core draggable / drop-target primitives                                                              |
+| `@atlaskit/pragmatic-drag-and-drop-hitbox`                        | Tree-item hitbox: `instruction` objects (`reorder-above`, `reorder-below`, `make-child`, `reparent`) |
+| `@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration` | _(not used)_                                                                                         |
+
+**Data model**: the flat `{ id, parent, droppable, text, data }` node shape (previously from
+`NodeModel<CustomData>`) is retained as an internal type (`FlatNode<CustomData>`) so the DB
+serialisation format is unchanged. The tree UI builds a nested view from this flat array for
+rendering; mutations update the flat array.
+
+**Drop position**: the `@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item` `Instruction` type
+encodes where a node should land (`reorder-above`, `reorder-below`, `make-child`, `reparent` with
+`desiredLevel`). A shared `applyInstruction` utility translates an `Instruction` into flat-array
+mutations.
+
+**`canDrop` equivalent**: the `canDrop` prop is replaced by a guard inside the `onDrop` callback.
+The same rules apply — no dropping a branch into a financial-entity leaf; single-presence enforced.
+
+---
+
 ## Files affected
 
 | File                                                                                        | Change                                                             |
@@ -237,3 +273,6 @@ CSV export button — exports the **report tree only** (same as current behavior
 | `packages/client/src/components/reports/dynamic-report/types.ts`                            | `CustomData` type — add `nodeType`, remove hint arrays             |
 | `packages/client/src/components/reports/dynamic-report/dynamic-report-manage-templates.tsx` | Template management UI (select, resave, rename, duplicate, delete) |
 | `packages/client/src/components/reports/dynamic-report/dynamic-report-save-template.tsx`    | Save-as flow                                                       |
+| `packages/client/src/components/reports/dynamic-report-2/index.tsx`                         | Prototype main component — Pragmatic DnD wiring                    |
+| `packages/client/src/components/reports/dynamic-report-2/tree-panel.tsx`                    | Prototype panel — Pragmatic DnD drop target                        |
+| `packages/client/src/components/reports/dynamic-report-2/tree-node.tsx`                     | Prototype node row — Pragmatic DnD draggable + tree-item hitbox    |
diff --git a/packages/client/package.json b/packages/client/package.json
index 521767eca3..88a26d4f2c 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -24,7 +24,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "1.8.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@auth0/auth0-react": "2.16.2",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@hookform/resolvers": "5.2.2",
diff --git a/packages/client/src/components/reports/dynamic-report-2/cross-tree-drop.ts b/packages/client/src/components/reports/dynamic-report-2/cross-tree-drop.ts
new file mode 100644
index 0000000000..c7dd25f524
--- /dev/null
+++ b/packages/client/src/components/reports/dynamic-report-2/cross-tree-drop.ts
@@ -0,0 +1,140 @@
+import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import {
+  getDescendantIds,
+  isFinancialEntityNode,
+  type CustomData,
+  type FlatNode,
+} from './types.js';
+
+export type DragPayload = {
+  nodeId: string;
+  sourceTreeId: 'bank' | 'report';
+};
+
+/**
+ * Applies a Pragmatic DnD tree-item Instruction to the flat node arrays.
+ *
+ * @param bankTree       Current bank flat nodes
+ * @param reportTree     Current report flat nodes
+ * @param payload        Drag payload attached to the draggable element
+ * @param targetNodeId   Id of the node the item was dropped on (or tree root id)
+ * @param targetTreeId   Which panel received the drop ('bank' | 'report')
+ * @param instruction    Tree-item hitbox instruction — or null for root-level drops
+ *
+ * @returns { nextBankTree, nextReportTree }
+ */
+export function handleCrossTreeDrop(
+  bankTree: FlatNode<CustomData>[],
+  reportTree: FlatNode<CustomData>[],
+  payload: DragPayload,
+  targetNodeId: string,
+  targetTreeId: 'bank' | 'report',
+  instruction: Instruction | null,
+): { nextBankTree: FlatNode<CustomData>[]; nextReportTree: FlatNode<CustomData>[] } {
+  const sourceTree = payload.sourceTreeId === 'bank' ? bankTree : reportTree;
+  const targetTree = targetTreeId === 'bank' ? bankTree : reportTree;
+
+  const draggedNode = sourceTree.find(n => n.id === payload.nodeId);
+  if (!draggedNode) return { nextBankTree: bankTree, nextReportTree: reportTree };
+
+  // canDrop guard: cannot make a financial-entity a child
+  if (instruction?.type === 'make-child') {
+    const targetNode = targetTree.find(n => n.id === targetNodeId);
+    if (targetNode && isFinancialEntityNode(targetNode)) {
+      return { nextBankTree: bankTree, nextReportTree: reportTree };
+    }
+  }
+
+  // Collect all ids to move (dragged node + all descendants)
+  const movedIds = new Set([payload.nodeId, ...getDescendantIds(sourceTree, payload.nodeId)]);
+  const movedNodes = sourceTree.filter(n => movedIds.has(n.id));
+
+  const isSameTree = payload.sourceTreeId === targetTreeId;
+  // After removing moved nodes from the source, what remains
+  const prunedSourceTree = sourceTree.filter(n => !movedIds.has(n.id));
+  // The base for building the target (deduped: if same tree, use pruned)
+  const baseTarget = isSameTree ? prunedSourceTree : targetTree;
+
+  let nextTargetTree: FlatNode<CustomData>[];
+
+  if (!instruction || instruction.type === 'instruction-blocked') {
+    // Append at root level of the target tree
+    const updatedMoved = movedNodes.map(n =>
+      n.id === payload.nodeId ? { ...n, parent: targetTreeId } : n,
+    );
+    nextTargetTree = [...baseTarget, ...updatedMoved];
+  } else if (instruction.type === 'make-child') {
+    const updatedMoved = movedNodes.map(n =>
+      n.id === payload.nodeId ? { ...n, parent: targetNodeId } : n,
+    );
+    nextTargetTree = [...baseTarget, ...updatedMoved];
+  } else if (instruction.type === 'reorder-above') {
+    const targetNode = baseTarget.find(n => n.id === targetNodeId);
+    const newParent = isSameTree
+      ? (targetNode?.parent ?? targetTreeId)
+      : (targetNode?.parent ?? targetTreeId);
+    const updatedMoved = movedNodes.map(n =>
+      n.id === payload.nodeId ? { ...n, parent: newParent } : n,
+    );
+    const targetIndex = baseTarget.findIndex(n => n.id === targetNodeId);
+    if (targetIndex === -1) {
+      nextTargetTree = [...baseTarget, ...updatedMoved];
+    } else {
+      nextTargetTree = [
+        ...baseTarget.slice(0, targetIndex),
+        ...updatedMoved,
+        ...baseTarget.slice(targetIndex),
+      ];
+    }
+  } else if (instruction.type === 'reorder-below') {
+    const targetNode = baseTarget.find(n => n.id === targetNodeId);
+    const newParent = targetNode?.parent ?? targetTreeId;
+    const updatedMoved = movedNodes.map(n =>
+      n.id === payload.nodeId ? { ...n, parent: newParent } : n,
+    );
+    const targetIndex = baseTarget.findIndex(n => n.id === targetNodeId);
+    if (targetIndex === -1) {
+      nextTargetTree = [...baseTarget, ...updatedMoved];
+    } else {
+      nextTargetTree = [
+        ...baseTarget.slice(0, targetIndex + 1),
+        ...updatedMoved,
+        ...baseTarget.slice(targetIndex + 1),
+      ];
+    }
+  } else if (instruction.type === 'reparent') {
+    // Walk up from targetNodeId by (currentLevel - desiredLevel) steps to find the new parent
+    const levelsUp = instruction.currentLevel - instruction.desiredLevel;
+    let ancestorId: string = targetNodeId;
+    for (let i = 0; i < levelsUp; i++) {
+      const ancestor = baseTarget.find(n => n.id === ancestorId);
+      if (!ancestor) break;
+      ancestorId = ancestor.parent;
+    }
+    const updatedMoved = movedNodes.map(n =>
+      n.id === payload.nodeId ? { ...n, parent: ancestorId } : n,
+    );
+    const targetIndex = baseTarget.findIndex(n => n.id === targetNodeId);
+    nextTargetTree = [
+      ...baseTarget.slice(0, targetIndex + 1),
+      ...updatedMoved,
+      ...baseTarget.slice(targetIndex + 1),
+    ];
+  } else {
+    nextTargetTree = [...baseTarget, ...movedNodes];
+  }
+
+  if (isSameTree) {
+    if (targetTreeId === 'bank') {
+      return { nextBankTree: nextTargetTree, nextReportTree: reportTree };
+    } else {
+      return { nextBankTree: bankTree, nextReportTree: nextTargetTree };
+    }
+  } else {
+    if (payload.sourceTreeId === 'bank') {
+      return { nextBankTree: prunedSourceTree, nextReportTree: nextTargetTree };
+    } else {
+      return { nextBankTree: nextTargetTree, nextReportTree: prunedSourceTree };
+    }
+  }
+}
diff --git a/packages/client/src/components/reports/dynamic-report-2/drag-overlay.tsx b/packages/client/src/components/reports/dynamic-report-2/drag-overlay.tsx
new file mode 100644
index 0000000000..e63fc82d70
--- /dev/null
+++ b/packages/client/src/components/reports/dynamic-report-2/drag-overlay.tsx
@@ -0,0 +1,26 @@
+import { type ReactElement } from 'react';
+import { Building2, Folder, User } from 'lucide-react';
+import { isBranchNode, type CustomData, type FlatNode } from './types.js';
+
+interface DragOverlayContentProps {
+  node: FlatNode<CustomData>;
+}
+
+export function DragOverlayContent({ node }: DragOverlayContentProps): ReactElement {
+  const entityType = node.data.entityType ?? 'business';
+  return (
+    <div className="flex items-center gap-2 bg-background border rounded-md px-3 py-2 shadow-lg">
+      {isBranchNode(node) ? (
+        <Folder className="size-4 text-muted-foreground" />
+      ) : entityType === 'business' ? (
+        <Building2 className="size-4 text-muted-foreground" />
+      ) : (
+        <User className="size-4 text-muted-foreground" />
+      )}
+      <span className="font-medium text-sm">{node.text}</span>
+      <span className="text-xs text-muted-foreground capitalize">
+        ({isBranchNode(node) ? 'branch' : 'entity'})
+      </span>
+    </div>
+  );
+}
diff --git a/packages/client/src/components/reports/dynamic-report-2/index.tsx b/packages/client/src/components/reports/dynamic-report-2/index.tsx
new file mode 100644
index 0000000000..8b90dd67fe
--- /dev/null
+++ b/packages/client/src/components/reports/dynamic-report-2/index.tsx
@@ -0,0 +1,384 @@
+import { useCallback, useEffect, useState } from 'react';
+import { extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog.js';
+import { Button } from '@/components/ui/button.js';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog.js';
+import { Input } from '@/components/ui/input.js';
+import { Label } from '@/components/ui/label.js';
+import { handleCrossTreeDrop, type DragPayload } from './cross-tree-drop.js';
+import { LegacyBanner } from './legacy-banner.js';
+import { mockBankTree, mockOwners, mockReportTree, mockTemplates } from './mock-data.js';
+import { TemplateManager } from './template-manager.js';
+import { Toolbar } from './toolbar.js';
+import { TreePanel } from './tree-panel.js';
+import { type CustomData, type FlatNode, type Template } from './types.js';
+
+export function DynamicReport() {
+  // State
+  const [fromDate, setFromDate] = useState('2024-01-01');
+  const [toDate, setToDate] = useState('2024-12-31');
+  const [selectedOwner, setSelectedOwner] = useState(mockOwners[0].id);
+  const [showZeroed, setShowZeroed] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [isDirty, setIsDirty] = useState(false);
+  const [showLegacyBanner, setShowLegacyBanner] = useState(true);
+
+  const [currentTemplate, setCurrentTemplate] = useState<Template | null>(
+    mockTemplates.find(t => t.isLegacy) || null,
+  );
+  const [templateManagerOpen, setTemplateManagerOpen] = useState(false);
+
+  const [bankTree, setBankTree] = useState<FlatNode<CustomData>[]>(mockBankTree);
+  const [reportTree, setReportTree] = useState<FlatNode<CustomData>[]>(mockReportTree);
+
+  // Dialogs
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
+  const [renameNodeId, setRenameNodeId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleteNodeId, setDeleteNodeId] = useState<string | null>(null);
+
+  const [newBranchDialogOpen, setNewBranchDialogOpen] = useState(false);
+  const [newBranchName, setNewBranchName] = useState('');
+  const [newBranchTarget, setNewBranchTarget] = useState<'bank' | 'report'>('bank');
+
+  const [deleteTemplateDialogOpen, setDeleteTemplateDialogOpen] = useState(false);
+  const [templateToDelete, setTemplateToDelete] = useState<Template | null>(null);
+
+  // DnD monitor: handle cross-tree and same-tree drops
+  useEffect(() => {
+    return monitorForElements({
+      onDrop({ source, location }) {
+        const payload = source.data as DragPayload;
+        const target = location.current.dropTargets[0];
+        if (!target) return;
+        const targetNodeId = target.data.nodeId as string;
+        const targetTreeId = target.data.treeId as 'bank' | 'report';
+        const instruction = extractInstruction(target.data);
+
+        const { nextBankTree, nextReportTree } = handleCrossTreeDrop(
+          bankTree,
+          reportTree,
+          payload,
+          targetNodeId,
+          targetTreeId,
+          instruction,
+        );
+        setBankTree(nextBankTree);
+        setReportTree(nextReportTree);
+        setIsDirty(true);
+      },
+    });
+  }, [bankTree, reportTree]);
+
+  const handleToggleBankExpand = useCallback((nodeId: string) => {
+    setBankTree(prev =>
+      prev.map(n => (n.id === nodeId ? { ...n, data: { ...n.data, isOpen: !n.data.isOpen } } : n)),
+    );
+  }, []);
+
+  const handleToggleReportExpand = useCallback((nodeId: string) => {
+    setReportTree(prev =>
+      prev.map(n => (n.id === nodeId ? { ...n, data: { ...n.data, isOpen: !n.data.isOpen } } : n)),
+    );
+  }, []);
+
+  const handleRename = useCallback((nodeId: string, currentName: string) => {
+    setRenameNodeId(nodeId);
+    setRenameValue(currentName);
+    setRenameDialogOpen(true);
+  }, []);
+
+  const handleRenameSubmit = useCallback(() => {
+    if (!renameNodeId || !renameValue.trim()) return;
+    const newText = renameValue.trim();
+    const updateName = (nodes: FlatNode<CustomData>[]) =>
+      nodes.map(n => (n.id === renameNodeId ? { ...n, text: newText } : n));
+    setBankTree(updateName);
+    setReportTree(updateName);
+    setIsDirty(true);
+    setRenameDialogOpen(false);
+    setRenameNodeId(null);
+    setRenameValue('');
+  }, [renameNodeId, renameValue]);
+
+  const handleDelete = useCallback((nodeId: string) => {
+    setDeleteNodeId(nodeId);
+    setDeleteDialogOpen(true);
+  }, []);
+
+  const handleDeleteConfirm = useCallback(() => {
+    if (!deleteNodeId) return;
+
+    const allNodes = [...bankTree, ...reportTree];
+    const node = allNodes.find(n => n.id === deleteNodeId);
+
+    if (node?.droppable) {
+      // Move direct children to bank root; remove the branch itself and its deeper descendants
+      const directChildren = allNodes.filter(n => n.parent === deleteNodeId);
+      const rerootedChildren = directChildren.map(c => ({ ...c, parent: 'bank' }));
+      const removeNode = (nodes: FlatNode<CustomData>[]) =>
+        nodes.filter(n => n.id !== deleteNodeId && n.parent !== deleteNodeId);
+      setBankTree(prev => [
+        ...removeNode(prev),
+        ...rerootedChildren.filter(c => !bankTree.some(n => n.id === c.id)),
+      ]);
+      setReportTree(prev => removeNode(prev));
+    } else {
+      setBankTree(prev => prev.filter(n => n.id !== deleteNodeId));
+      setReportTree(prev => prev.filter(n => n.id !== deleteNodeId));
+    }
+
+    setIsDirty(true);
+    setDeleteDialogOpen(false);
+    setDeleteNodeId(null);
+  }, [deleteNodeId, bankTree, reportTree]);
+
+  const handleAddBranch = useCallback((target: 'bank' | 'report') => {
+    setNewBranchTarget(target);
+    setNewBranchName('');
+    setNewBranchDialogOpen(true);
+  }, []);
+
+  const handleAddBranchSubmit = useCallback(() => {
+    if (!newBranchName.trim()) return;
+
+    const newBranch: FlatNode<CustomData> = {
+      id: `branch-${Date.now()}`,
+      parent: newBranchTarget,
+      text: newBranchName.trim(),
+      droppable: true,
+      data: { nodeType: 'synthetic-branch', isOpen: true },
+    };
+
+    if (newBranchTarget === 'bank') {
+      setBankTree(prev => [...prev, newBranch]);
+    } else {
+      setReportTree(prev => [...prev, newBranch]);
+    }
+
+    setIsDirty(true);
+    setNewBranchDialogOpen(false);
+    setNewBranchName('');
+  }, [newBranchName, newBranchTarget]);
+
+  // Template handlers
+  const handleLoadTemplate = useCallback((template: Template) => {
+    setCurrentTemplate(template);
+    setShowLegacyBanner(template.isLegacy || false);
+    setIsDirty(false);
+  }, []);
+
+  const handleDuplicateTemplate = useCallback((template: Template) => {
+    const newTemplate: Template = {
+      ...template,
+      id: `tpl-${Date.now()}`,
+      name: `${template.name} (Copy)`,
+      lastUpdated: new Date(),
+      isLocked: false,
+      isLegacy: false,
+    };
+    // In real app, this would save to backend
+    void newTemplate;
+  }, []);
+
+  const handleDeleteTemplate = useCallback((template: Template) => {
+    setTemplateToDelete(template);
+    setDeleteTemplateDialogOpen(true);
+  }, []);
+
+  const handleDeleteTemplateConfirm = useCallback(() => {
+    if (templateToDelete?.id === currentTemplate?.id) {
+      setCurrentTemplate(null);
+    }
+    setDeleteTemplateDialogOpen(false);
+    setTemplateToDelete(null);
+  }, [templateToDelete, currentTemplate]);
+
+  const handleDownloadCSV = useCallback(() => {
+    // In real app, this would generate and download CSV
+  }, []);
+
+  return (
+    <div className="flex flex-col h-screen bg-background">
+      <Toolbar
+        fromDate={fromDate}
+        toDate={toDate}
+        onFromDateChange={setFromDate}
+        onToDateChange={setToDate}
+        owners={mockOwners}
+        selectedOwner={selectedOwner}
+        onOwnerChange={setSelectedOwner}
+        showZeroed={showZeroed}
+        onShowZeroedChange={setShowZeroed}
+        editMode={editMode}
+        onEditModeChange={setEditMode}
+        isDirty={isDirty}
+        currentTemplate={currentTemplate}
+        onSelectTemplate={() => setTemplateManagerOpen(true)}
+        onSaveAsNew={() => {
+          /* stub */
+        }}
+        onResave={() => {
+          setIsDirty(false);
+          setShowLegacyBanner(false);
+        }}
+        onRename={() => {
+          /* stub */
+        }}
+        onDuplicate={() => currentTemplate && handleDuplicateTemplate(currentTemplate)}
+        onDelete={() => currentTemplate && handleDeleteTemplate(currentTemplate)}
+        onDownloadCSV={handleDownloadCSV}
+      />
+
+      {showLegacyBanner && currentTemplate?.isLegacy && (
+        <LegacyBanner onDismiss={() => setShowLegacyBanner(false)} />
+      )}
+
+      <div className="flex-1 p-4 overflow-hidden">
+        <div className="grid grid-cols-2 gap-4 h-full">
+          <TreePanel
+            treeId="bank"
+            title="Bank"
+            nodes={bankTree}
+            editMode={editMode}
+            emptyMessage="No entities remaining"
+            onAddBranch={() => handleAddBranch('bank')}
+            onToggleExpand={handleToggleBankExpand}
+            onRename={handleRename}
+            onDelete={handleDelete}
+          />
+
+          <TreePanel
+            treeId="report"
+            title="Report"
+            nodes={reportTree}
+            editMode={editMode}
+            emptyMessage="Drop entities here to build your report"
+            onAddBranch={() => handleAddBranch('report')}
+            onToggleExpand={handleToggleReportExpand}
+            onRename={handleRename}
+            onDelete={handleDelete}
+          />
+        </div>
+      </div>
+
+      {/* Template Manager Modal */}
+      <TemplateManager
+        open={templateManagerOpen}
+        onOpenChange={setTemplateManagerOpen}
+        templates={mockTemplates}
+        onLoad={handleLoadTemplate}
+        onDuplicate={handleDuplicateTemplate}
+        onDelete={handleDeleteTemplate}
+      />
+
+      {/* Rename Dialog */}
+      <Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Rename Branch</DialogTitle>
+            <DialogDescription>Enter a new name for this branch.</DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <Label htmlFor="rename-input">Name</Label>
+            <Input
+              id="rename-input"
+              value={renameValue}
+              onChange={e => setRenameValue(e.target.value)}
+              className="mt-2"
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRenameDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleRenameSubmit}>Save</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Branch Confirmation */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Branch</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will delete the branch and move all its contents to the bank root. This action
+              cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* New Branch Dialog */}
+      <Dialog open={newBranchDialogOpen} onOpenChange={setNewBranchDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add New Branch</DialogTitle>
+            <DialogDescription>
+              Create a new branch in the {newBranchTarget === 'bank' ? 'Bank' : 'Report'} panel.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <Label htmlFor="new-branch-name">Branch Name</Label>
+            <Input
+              id="new-branch-name"
+              value={newBranchName}
+              onChange={e => setNewBranchName(e.target.value)}
+              className="mt-2"
+              placeholder="Enter branch name..."
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setNewBranchDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleAddBranchSubmit} disabled={!newBranchName.trim()}>
+              Create
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Template Confirmation */}
+      <AlertDialog open={deleteTemplateDialogOpen} onOpenChange={setDeleteTemplateDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Template</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete &quot;{templateToDelete?.name}&quot;? This action
+              cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDeleteTemplateConfirm}>Delete</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
diff --git a/packages/client/src/components/reports/dynamic-report-2/legacy-banner.tsx b/packages/client/src/components/reports/dynamic-report-2/legacy-banner.tsx
new file mode 100644
index 0000000000..8483e908df
--- /dev/null
+++ b/packages/client/src/components/reports/dynamic-report-2/legacy-banner.tsx
@@ -0,0 +1,28 @@
+import { AlertTriangle, X } from 'lucide-react';
+import { Button } from '@/components/ui/button.js';
+
+interface LegacyBannerProps {
+  onDismiss: () => void;
+}
+
+export function LegacyBanner({ onDismiss }: LegacyBannerProps) {
+  return (
+    <div className="flex items-center justify-between px-4 py-3 bg-amber-50 border-b border-amber-200">
+      <div className="flex items-center gap-3">
+        <AlertTriangle className="size-5 text-amber-600" />
+        <p className="text-sm text-amber-800">
+          This template was saved in a legacy format. Please review and resave to upgrade.
+        </p>
+      </div>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={onDismiss}
+        className="text-amber-700 hover:text-amber-900 hover:bg-amber-100"
+      >
+        <X className="size-4 mr-1" />
+        Dismiss
+      </Button>
+    </div>
+  );
+}
diff --git a/packages/client/src/components/reports/dynamic-report-2/mock-data.ts b/packages/client/src/components/reports/dynamic-report-2/mock-data.ts
new file mode 100644
index 0000000000..3c1a559f38
--- /dev/null
+++ b/packages/client/src/components/reports/dynamic-report-2/mock-data.ts
@@ -0,0 +1,251 @@
+import type { CustomData, FlatNode, LedgerRecord, Owner, Template } from './types.js';
+
+export const mockOwners: Owner[] = [
+  { id: 'owner-1', name: 'John Smith' },
+  { id: 'owner-2', name: 'Sarah Johnson' },
+  { id: 'owner-3', name: 'Michael Chen' },
+];
+
+export const mockTemplates: Template[] = [
+  { id: 'tpl-1', name: 'Q1 2024 Report', lastUpdated: new Date('2024-03-15'), isLocked: false },
+  { id: 'tpl-2', name: 'Annual Summary', lastUpdated: new Date('2024-01-10'), isLocked: true },
+  {
+    id: 'tpl-3',
+    name: 'Tax Report Template',
+    lastUpdated: new Date('2024-02-20'),
+    isLocked: false,
+  },
+  {
+    id: 'tpl-4',
+    name: 'Legacy Format Report',
+    lastUpdated: new Date('2023-06-01'),
+    isLocked: false,
+    isLegacy: true,
+  },
+  { id: 'tpl-5', name: 'Standard Audit', lastUpdated: new Date('2024-04-01'), isLocked: true },
+];
+
+export const mockBankTree: FlatNode<CustomData>[] = [
+  {
+    id: 'sc-100',
+    parent: 'bank',
+    text: '100 — Assets',
+    droppable: true,
+    data: { nodeType: 'sort-code-branch', sortCode: 100, isOpen: false },
+  },
+  {
+    id: 'entity-1',
+    parent: 'sc-100',
+    text: 'Cash & Equivalents Ltd',
+    droppable: false,
+    data: {
+      nodeType: 'financial-entity',
+      value: 125_000,
+      entityType: 'business',
+      sortCode: 100,
+      isOpen: false,
+    },
+  },
+  {
+    id: 'entity-2',
+    parent: 'sc-100',
+    text: 'Bank Deposits Corp',
+    droppable: false,
+    data: {
+      nodeType: 'financial-entity',
+      value: 340_000,
+      entityType: 'business',
+      sortCode: 100,
+      isOpen: false,
+    },
+  },
+  {
+    id: 'entity-3',
+    parent: 'sc-100',
+    text: 'Investment Holdings',
+    droppable: false,
+    data: {
+      nodeType: 'financial-entity',
+      value: -45_000,
+      entityType: 'business',
+      sortCode: 100,
+      isOpen: false,
+    },
+  },
+  {
+    id: 'sc-200',
+    parent: 'bank',
+    text: '200 — Liabilities',
+    droppable: true,
+    data: { nodeType: 'sort-code-branch', sortCode: 200, isOpen: false },
+  },
+  {
+    id: 'entity-4',
+    parent: 'sc-200',
+    text: 'Accounts Payable Inc',
+    droppable: false,
+    data: {
+      nodeType: 'financial-entity',
+      value: -89_000,
+      entityType: 'business',
+      sortCode: 200,
+      isOpen: false,
+    },
+  },
+  {
+    id: 'entity-5',
+    parent: 'sc-200',
+    text: 'Long-term Debt Services',
+    droppable: false,
+    data: {
+      nodeType: 'financial-entity',
+      value: -250_000,
+      entityType: 'business',
+      sortCode: 200,
+      isOpen: false,
+    },
+  },
+  {
+    id: 'sc-300',
+    parent: 'bank',
+    text: '300 — Revenue',
+    droppable: true,
+    data: { nodeType: 'sort-code-branch', sortCode: 300, isOpen: false },
+  },
+  {
+    id: 'entity-6',
+    parent: 'sc-300',
+    text: 'Sales Revenue Co',
+    droppable: false,
+    data: {
+      nodeType: 'financial-entity',
+      value: 780_000,
+      entityType: 'business',
+      sortCode: 300,
+      isOpen: false,
+    },
+  },
+  {
+    id: 'entity-7',
+    parent: 'sc-300',
+    text: 'Service Income LLC',
+    droppable: false,
+    data: {
+      nodeType: 'financial-entity',
+      value: 156_000,
+      entityType: 'business',
+      sortCode: 300,
+      isOpen: false,
+    },
+  },
+  {
+    id: 'sc-400',
+    parent: 'bank',
+    text: '400 — Expenses',
+    droppable: true,
+    data: { nodeType: 'sort-code-branch', sortCode: 400, isOpen: false },
+  },
+  {
+    id: 'entity-8',
+    parent: 'sc-400',
+    text: 'Operating Costs Ltd',
+    droppable: false,
+    data: {
+      nodeType: 'financial-entity',
+      value: -320_000,
+      entityType: 'business',
+      sortCode: 400,
+      isOpen: false,
+    },
+  },
+  {
+    id: 'entity-ind-1',
+    parent: 'bank',
+    text: 'Freelance Consultant',
+    droppable: false,
+    data: { nodeType: 'financial-entity', value: 45_000, entityType: 'person', isOpen: false },
+  },
+  {
+    id: 'entity-ind-2',
+    parent: 'bank',
+    text: 'Miscellaneous Holdings',
+    droppable: false,
+    data: { nodeType: 'financial-entity', value: 12_500, entityType: 'business', isOpen: false },
+  },
+];
+
+export const mockReportTree: FlatNode<CustomData>[] = [
+  {
+    id: 'report-branch-1',
+    parent: 'report',
+    text: 'Operating Income',
+    droppable: true,
+    data: { nodeType: 'synthetic-branch', isOpen: true },
+  },
+  {
+    id: 'report-entity-1',
+    parent: 'report-branch-1',
+    text: 'Primary Revenue Stream',
+    droppable: false,
+    data: { nodeType: 'financial-entity', value: 450_000, entityType: 'business', isOpen: false },
+  },
+  {
+    id: 'report-entity-2',
+    parent: 'report-branch-1',
+    text: 'Secondary Income',
+    droppable: false,
+    data: { nodeType: 'financial-entity', value: 125_000, entityType: 'business', isOpen: false },
+  },
+  {
+    id: 'report-branch-2',
+    parent: 'report',
+    text: 'Cost Centers',
+    droppable: true,
+    data: { nodeType: 'synthetic-branch', isOpen: true },
+  },
+  {
+    id: 'nested-branch',
+    parent: 'report-branch-2',
+    text: 'Administrative',
+    droppable: true,
+    data: { nodeType: 'synthetic-branch', isOpen: false },
+  },
+  {
+    id: 'report-entity-3',
+    parent: 'nested-branch',
+    text: 'Office Expenses',
+    droppable: false,
+    data: { nodeType: 'financial-entity', value: -85_000, entityType: 'business', isOpen: false },
+  },
+  {
+    id: 'report-entity-4',
+    parent: 'report-branch-2',
+    text: 'Marketing Budget',
+    droppable: false,
+    data: { nodeType: 'financial-entity', value: -120_000, entityType: 'business', isOpen: false },
+  },
+];
+
+export function generateMockLedgerRecords(entityId: string): LedgerRecord[] {
+  const records: LedgerRecord[] = [];
+  const businesses = ['ABC Corp', 'XYZ Ltd', 'Global Inc', 'Local Services'];
+  const details = ['Invoice payment', 'Monthly fee', 'Service charge', 'Refund', 'Transfer'];
+
+  for (let i = 0; i < 5; i++) {
+    const amount = Math.round((Math.random() * 10_000 - 5000) * 100) / 100;
+    records.push({
+      id: `${entityId}-ledger-${i}`,
+      business: businesses[Math.floor(Math.random() * businesses.length)],
+      date: new Date(2024, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1)
+        .toISOString()
+        .split('T')[0],
+      localAmount: amount,
+      localAmountBalance: Math.round(Math.random() * 50_000 * 100) / 100,
+      reference: `REF-${Math.random().toString(36).substring(2, 8).toUpperCase()}`,
+      details: details[Math.floor(Math.random() * details.length)],
+      counterAccount: `${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`,
+    });
+  }
+
+  return records.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+}
diff --git a/packages/client/src/components/reports/dynamic-report-2/template-manager.tsx b/packages/client/src/components/reports/dynamic-report-2/template-manager.tsx
new file mode 100644
index 0000000000..50de8fb128
--- /dev/null
+++ b/packages/client/src/components/reports/dynamic-report-2/template-manager.tsx
@@ -0,0 +1,232 @@
+import { useMemo, useState } from 'react';
+import { Copy, Lock, Trash2, Upload } from 'lucide-react';
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { Button } from '@/components/ui/button.js';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog.js';
+import { Input } from '@/components/ui/input.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table.js';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip.js';
+import { type Template } from './types.js';
+
+interface TemplateManagerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  templates: Template[];
+  onLoad: (template: Template) => void;
+  onDuplicate: (template: Template) => void;
+  onDelete: (template: Template) => void;
+}
+
+const columnHelper = createColumnHelper<Template>();
+
+export function TemplateManager({
+  open,
+  onOpenChange,
+  templates,
+  onLoad,
+  onDuplicate,
+  onDelete,
+}: TemplateManagerProps) {
+  const [globalFilter, setGlobalFilter] = useState('');
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor('name', {
+        header: 'Name',
+        cell: info => <span className="font-medium">{info.getValue()}</span>,
+      }),
+      columnHelper.accessor('lastUpdated', {
+        header: 'Last Updated',
+        cell: info => {
+          const date = info.getValue();
+          return (
+            <span className="text-muted-foreground text-sm">
+              {date.toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+              })}
+            </span>
+          );
+        },
+      }),
+      columnHelper.accessor('isLocked', {
+        header: 'Locked',
+        cell: info =>
+          info.getValue() ? (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <Lock className="size-4 text-muted-foreground" />
+                </TooltipTrigger>
+                <TooltipContent>This template is locked</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          ) : null,
+      }),
+      columnHelper.display({
+        id: 'actions',
+        header: 'Actions',
+        cell: info => {
+          const template = info.row.original;
+          return (
+            <div className="flex items-center gap-1">
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="size-8 p-0"
+                      onClick={() => {
+                        onLoad(template);
+                        onOpenChange(false);
+                      }}
+                      disabled={template.isLocked}
+                    >
+                      <Upload className="size-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {template.isLocked ? 'Cannot load locked template' : 'Load template'}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="size-8 p-0"
+                      onClick={() => onDuplicate(template)}
+                    >
+                      <Copy className="size-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Duplicate template</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="size-8 p-0 text-destructive hover:text-destructive"
+                      onClick={() => onDelete(template)}
+                      disabled={template.isLocked}
+                    >
+                      <Trash2 className="size-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {template.isLocked ? 'Cannot delete locked template' : 'Delete template'}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+          );
+        },
+      }),
+    ],
+    [onLoad, onDuplicate, onDelete, onOpenChange],
+  );
+
+  const table = useReactTable({
+    data: templates,
+    columns,
+    state: {
+      globalFilter,
+    },
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Template Manager</DialogTitle>
+          <DialogDescription>Select a template to load, duplicate, or delete.</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <Input
+            placeholder="Filter templates..."
+            value={globalFilter}
+            onChange={e => setGlobalFilter(e.target.value)}
+            className="max-w-sm"
+          />
+
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map(headerGroup => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map(header => (
+                      <TableHead key={header.id}>
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(header.column.columnDef.header, header.getContext())}
+                      </TableHead>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows.length ? (
+                  table.getRowModel().rows.map(row => (
+                    <TableRow key={row.id} className={row.original.isLocked ? 'bg-muted/30' : ''}>
+                      {row.getVisibleCells().map(cell => (
+                        <TableCell key={cell.id}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center text-muted-foreground"
+                    >
+                      No templates found.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/packages/client/src/components/reports/dynamic-report-2/toolbar.tsx b/packages/client/src/components/reports/dynamic-report-2/toolbar.tsx
new file mode 100644
index 0000000000..83b284359c
--- /dev/null
+++ b/packages/client/src/components/reports/dynamic-report-2/toolbar.tsx
@@ -0,0 +1,185 @@
+import { ChevronDown, Copy, Download, Edit2, FileText, Save, Trash2 } from 'lucide-react';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import { Input } from '@/components/ui/input.js';
+import { Label } from '@/components/ui/label.js';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select.js';
+import { Switch } from '@/components/ui/switch.js';
+import { type Owner, type Template } from './types.js';
+
+interface ToolbarProps {
+  fromDate: string;
+  toDate: string;
+  onFromDateChange: (date: string) => void;
+  onToDateChange: (date: string) => void;
+  owners: Owner[];
+  selectedOwner: string;
+  onOwnerChange: (ownerId: string) => void;
+  showZeroed: boolean;
+  onShowZeroedChange: (show: boolean) => void;
+  editMode: boolean;
+  onEditModeChange: (edit: boolean) => void;
+  isDirty: boolean;
+  currentTemplate: Template | null;
+  onSelectTemplate: () => void;
+  onSaveAsNew: () => void;
+  onResave: () => void;
+  onRename: () => void;
+  onDuplicate: () => void;
+  onDelete: () => void;
+  onDownloadCSV: () => void;
+}
+
+export function Toolbar({
+  fromDate,
+  toDate,
+  onFromDateChange,
+  onToDateChange,
+  owners,
+  selectedOwner,
+  onOwnerChange,
+  showZeroed,
+  onShowZeroedChange,
+  editMode,
+  onEditModeChange,
+  isDirty,
+  currentTemplate,
+  onSelectTemplate,
+  onSaveAsNew,
+  onResave,
+  onRename,
+  onDuplicate,
+  onDelete,
+  onDownloadCSV,
+}: ToolbarProps) {
+  const hasTemplate = currentTemplate !== null;
+
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-4 p-4 border-b bg-muted/30">
+      {/* Left side: Filters */}
+      <div className="flex flex-wrap items-center gap-4">
+        <div className="flex items-center gap-2">
+          <Label htmlFor="from-date" className="text-sm text-muted-foreground">
+            From
+          </Label>
+          <Input
+            id="from-date"
+            type="date"
+            value={fromDate}
+            onChange={e => onFromDateChange(e.target.value)}
+            className="w-36"
+          />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Label htmlFor="to-date" className="text-sm text-muted-foreground">
+            To
+          </Label>
+          <Input
+            id="to-date"
+            type="date"
+            value={toDate}
+            onChange={e => onToDateChange(e.target.value)}
+            className="w-36"
+          />
+        </div>
+
+        <Select value={selectedOwner} onValueChange={onOwnerChange}>
+          <SelectTrigger className="w-40">
+            <SelectValue placeholder="Select owner" />
+          </SelectTrigger>
+          <SelectContent>
+            {owners.map(owner => (
+              <SelectItem key={owner.id} value={owner.id}>
+                {owner.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <div className="flex items-center gap-2">
+          <Switch id="show-zeroed" checked={showZeroed} onCheckedChange={onShowZeroedChange} />
+          <Label htmlFor="show-zeroed" className="text-sm cursor-pointer">
+            Show zeroed accounts
+          </Label>
+        </div>
+      </div>
+
+      {/* Right side: Template controls */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2">
+          <Switch id="edit-mode" checked={editMode} onCheckedChange={onEditModeChange} />
+          <Label htmlFor="edit-mode" className="text-sm cursor-pointer font-medium">
+            Edit Mode
+          </Label>
+        </div>
+
+        {isDirty && (
+          <Badge variant="outline" className="bg-amber-100 text-amber-800 border-amber-300">
+            Unsaved changes
+          </Badge>
+        )}
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="gap-2">
+              <FileText className="size-4" />
+              {currentTemplate?.name || 'No template'}
+              <ChevronDown className="size-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuItem onClick={onSelectTemplate}>
+              <FileText className="size-4 mr-2" />
+              Select template
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={onSaveAsNew}>
+              <Save className="size-4 mr-2" />
+              Save as new
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={onResave} disabled={!hasTemplate}>
+              <Save className="size-4 mr-2" />
+              Resave
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={onRename} disabled={!hasTemplate}>
+              <Edit2 className="size-4 mr-2" />
+              Rename
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={onDuplicate} disabled={!hasTemplate}>
+              <Copy className="size-4 mr-2" />
+              Duplicate
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={onDelete}
+              disabled={!hasTemplate}
+              className="text-destructive focus:text-destructive"
+            >
+              <Trash2 className="size-4 mr-2" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <Button variant="outline" onClick={onDownloadCSV}>
+          <Download className="size-4 mr-2" />
+          Download CSV
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/client/src/components/reports/dynamic-report-2/tree-node.tsx b/packages/client/src/components/reports/dynamic-report-2/tree-node.tsx
new file mode 100644
index 0000000000..77f00ea64e
--- /dev/null
+++ b/packages/client/src/components/reports/dynamic-report-2/tree-node.tsx
@@ -0,0 +1,401 @@
+import { useEffect, useRef, useState, type ReactElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import {
+  Building2,
+  ChevronDown,
+  ChevronRight,
+  Folder,
+  FolderOpen,
+  GripVertical,
+  MoreHorizontal,
+  PanelTopClose,
+  PanelTopOpen,
+  User,
+} from 'lucide-react';
+import {
+  attachInstruction,
+  extractInstruction,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import {
+  draggable,
+  dropTargetForElements,
+} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import { Skeleton } from '@/components/ui/skeleton.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table.js';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip.js';
+import { cn } from '@/lib/utils.js';
+import type { DragPayload } from './cross-tree-drop.js';
+import { DragOverlayContent } from './drag-overlay.js';
+import { generateMockLedgerRecords } from './mock-data.js';
+import {
+  calculateBranchSum,
+  countLeaves,
+  formatCurrency,
+  isBranchNode,
+  isFinancialEntityNode,
+  type CustomData,
+  type FlatNode,
+  type LedgerRecord,
+} from './types.js';
+
+interface TreeNodeProps {
+  node: FlatNode<CustomData>;
+  depth: number;
+  treeId: 'bank' | 'report';
+  allNodes: FlatNode<CustomData>[];
+  editMode: boolean;
+  onToggleExpand: (nodeId: string) => void;
+  onRename?: (nodeId: string, currentName: string) => void;
+  onDelete?: (nodeId: string) => void;
+}
+
+function instructionToIndicator(
+  instruction: Instruction | null,
+): 'top' | 'bottom' | 'child' | null {
+  if (!instruction || instruction.type === 'instruction-blocked') return null;
+  if (instruction.type === 'reorder-above') return 'top';
+  if (instruction.type === 'reorder-below' || instruction.type === 'reparent') return 'bottom';
+  if (instruction.type === 'make-child') return 'child';
+  return null;
+}
+
+export function TreeNodeRow({
+  node,
+  depth,
+  treeId,
+  allNodes,
+  editMode,
+  onToggleExpand,
+  onRename,
+  onDelete,
+}: TreeNodeProps): ReactElement {
+  const [ledgerRecords, setLedgerRecords] = useState<LedgerRecord[] | null>(null);
+  const [isLoadingLedger, setIsLoadingLedger] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dropIndicator, setDropIndicator] = useState<'top' | 'bottom' | 'child' | null>(null);
+
+  const rowRef = useRef<HTMLDivElement>(null);
+  const dragHandleRef = useRef<HTMLButtonElement>(null);
+
+  const isExpanded = node.data.isOpen;
+  const isBranch = isBranchNode(node);
+  const isLeaf = isFinancialEntityNode(node);
+
+  // Attach draggable
+  useEffect(() => {
+    const el = rowRef.current;
+    if (!el || !editMode) return undefined;
+    return draggable({
+      element: el,
+      dragHandle: dragHandleRef.current ?? undefined,
+      getInitialData: (): DragPayload => ({ nodeId: node.id, sourceTreeId: treeId }),
+      onGenerateDragPreview({ nativeSetDragImage }) {
+        setCustomNativeDragPreview({
+          nativeSetDragImage,
+          getOffset: pointerOutsideOfPreview({ x: '16px', y: '8px' }),
+          render({ container }) {
+            const root = createRoot(container);
+            root.render(<DragOverlayContent node={node} />);
+            return () => root.unmount();
+          },
+        });
+      },
+      onDragStart: () => setIsDragging(true),
+      onDrop: () => setIsDragging(false),
+    });
+  }, [editMode, node, treeId]);
+
+  // Attach drop target
+  useEffect(() => {
+    const el = rowRef.current;
+    if (!el || !editMode) return undefined;
+    return dropTargetForElements({
+      element: el,
+      getData: ({ input, element: el }) =>
+        attachInstruction(
+          { nodeId: node.id, treeId },
+          {
+            input,
+            element: el,
+            currentLevel: depth,
+            indentPerLevel: 24,
+            mode: isExpanded ? 'expanded' : 'standard',
+            block: !node.droppable ? ['make-child'] : [],
+          },
+        ),
+      onDragEnter: ({ self }) =>
+        setDropIndicator(instructionToIndicator(extractInstruction(self.data))),
+      onDrag: ({ self }) => setDropIndicator(instructionToIndicator(extractInstruction(self.data))),
+      onDragLeave: () => setDropIndicator(null),
+      onDrop: () => setDropIndicator(null),
+    });
+  }, [depth, editMode, isExpanded, node.droppable, node.id, treeId]);
+
+  // Load ledger records for expanded entity leaves
+  useEffect(() => {
+    if (isLeaf && isExpanded && !ledgerRecords) {
+      setIsLoadingLedger(true);
+      const timer = setTimeout(() => {
+        setLedgerRecords(generateMockLedgerRecords(node.id));
+        setIsLoadingLedger(false);
+      }, 800);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [isLeaf, isExpanded, ledgerRecords, node.id]);
+
+  const indentPx = depth * 24;
+
+  if (isBranch) {
+    const sum = calculateBranchSum(allNodes, node.id);
+    const leafCount = countLeaves(allNodes, node.id);
+
+    return (
+      <div
+        ref={rowRef}
+        className={cn(
+          'flex flex-col',
+          isDragging && 'opacity-50',
+          dropIndicator === 'top' && 'border-t-2 border-primary',
+          dropIndicator === 'bottom' && 'border-b-2 border-primary',
+          dropIndicator === 'child' && 'bg-accent/30',
+        )}
+      >
+        <div
+          className="flex items-center h-10 px-2 hover:bg-muted/50 border-b border-border/50 group"
+          style={{ paddingInlineStart: `${indentPx + 8}px` }}
+        >
+          {editMode && (
+            <button
+              ref={dragHandleRef}
+              className="cursor-grab p-1 text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity"
+            >
+              <GripVertical className="size-4" />
+            </button>
+          )}
+
+          <Button
+            variant="ghost"
+            size="sm"
+            className="size-6 p-0"
+            onClick={() => onToggleExpand(node.id)}
+          >
+            {isExpanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
+          </Button>
+
+          {isExpanded ? (
+            <FolderOpen className="size-4 text-muted-foreground ml-1" />
+          ) : (
+            <Folder className="size-4 text-muted-foreground ml-1" />
+          )}
+
+          <span className="ml-2 font-medium truncate">{node.text}</span>
+
+          {node.data.nodeType === 'sort-code-branch' && node.data.sortCode && (
+            <Badge variant="outline" className="ml-2 text-xs">
+              Sort Code {node.data.sortCode}
+            </Badge>
+          )}
+
+          <div className="flex items-center gap-2 ml-auto">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Badge
+                    variant="secondary"
+                    className={cn(
+                      'text-xs font-mono',
+                      sum >= 0 ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800',
+                    )}
+                  >
+                    {formatCurrency(sum)}
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent>Total of all descendants</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            {!isExpanded && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Badge variant="outline" className="text-xs">
+                      {leafCount}
+                    </Badge>
+                  </TooltipTrigger>
+                  <TooltipContent>{leafCount} entities</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+
+            {editMode && node.data.nodeType === 'synthetic-branch' && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="size-6 p-0 opacity-0 group-hover:opacity-100"
+                  >
+                    <MoreHorizontal className="size-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={() => onRename?.(node.id, node.text)}>
+                    Rename
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    className="text-destructive"
+                    onClick={() => onDelete?.(node.id)}
+                  >
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Financial entity leaf
+  const value = node.data.value ?? 0;
+  const entityType = node.data.entityType ?? 'business';
+
+  return (
+    <div
+      ref={rowRef}
+      className={cn(
+        'flex flex-col',
+        isDragging && 'opacity-50',
+        dropIndicator === 'top' && 'border-t-2 border-primary',
+        dropIndicator === 'bottom' && 'border-b-2 border-primary',
+      )}
+    >
+      <div
+        className="flex items-center h-10 px-2 hover:bg-muted/50 border-b border-border/50 group"
+        style={{ paddingInlineStart: `${indentPx + 8}px` }}
+      >
+        {editMode && (
+          <button
+            ref={dragHandleRef}
+            className="cursor-grab p-1 text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity"
+          >
+            <GripVertical className="size-4" />
+          </button>
+        )}
+
+        <div className="size-6 flex items-center justify-center">
+          {entityType === 'business' ? (
+            <Building2 className="size-4 text-muted-foreground" />
+          ) : (
+            <User className="size-4 text-muted-foreground" />
+          )}
+        </div>
+
+        <span className="ml-2 truncate">{node.text}</span>
+
+        <div className="flex items-center gap-2 ml-auto">
+          <Badge
+            variant="secondary"
+            className={cn(
+              'text-xs font-mono',
+              value >= 0 ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800',
+            )}
+          >
+            {formatCurrency(value)}
+          </Badge>
+
+          <Button
+            variant="ghost"
+            size="sm"
+            className="size-6 p-0"
+            onClick={() => onToggleExpand(node.id)}
+          >
+            {isExpanded ? (
+              <PanelTopClose className="size-4" />
+            ) : (
+              <PanelTopOpen className="size-4" />
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {isExpanded && (
+        <div
+          className="bg-muted/30 border-b border-border/50 py-2"
+          style={{ paddingInlineStart: `${indentPx + 32}px`, paddingInlineEnd: '8px' }}
+        >
+          {isLoadingLedger ? (
+            <div className="space-y-2 p-2">
+              <Skeleton className="h-8 w-full" />
+              <Skeleton className="h-8 w-full" />
+              <Skeleton className="h-8 w-full" />
+            </div>
+          ) : ledgerRecords ? (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="text-xs">Business</TableHead>
+                  <TableHead className="text-xs">Date</TableHead>
+                  <TableHead className="text-xs text-right">Local Amount</TableHead>
+                  <TableHead className="text-xs text-right">Balance</TableHead>
+                  <TableHead className="text-xs">Reference</TableHead>
+                  <TableHead className="text-xs">Details</TableHead>
+                  <TableHead className="text-xs">Counter Account</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {ledgerRecords.map(record => (
+                  <TableRow key={record.id}>
+                    <TableCell className="text-xs py-1">{record.business}</TableCell>
+                    <TableCell className="text-xs py-1">{record.date}</TableCell>
+                    <TableCell
+                      className={cn(
+                        'text-xs py-1 text-right font-mono',
+                        record.localAmount >= 0 ? 'text-emerald-600' : 'text-red-600',
+                      )}
+                    >
+                      {formatCurrency(record.localAmount)}
+                    </TableCell>
+                    <TableCell className="text-xs py-1 text-right font-mono">
+                      {formatCurrency(record.localAmountBalance)}
+                    </TableCell>
+                    <TableCell className="text-xs py-1 font-mono">{record.reference}</TableCell>
+                    <TableCell className="text-xs py-1">{record.details}</TableCell>
+                    <TableCell className="text-xs py-1 font-mono">
+                      {record.counterAccount}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/client/src/components/reports/dynamic-report-2/tree-panel.tsx b/packages/client/src/components/reports/dynamic-report-2/tree-panel.tsx
new file mode 100644
index 0000000000..df6d549f2e
--- /dev/null
+++ b/packages/client/src/components/reports/dynamic-report-2/tree-panel.tsx
@@ -0,0 +1,111 @@
+import { Fragment, useEffect, useRef, useState, type ReactElement } from 'react';
+import { FolderPlus } from 'lucide-react';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { Button } from '@/components/ui/button.js';
+import { ScrollArea } from '@/components/ui/scroll-area.js';
+import { cn } from '@/lib/utils.js';
+import { TreeNodeRow } from './tree-node.js';
+import { type CustomData, type FlatNode } from './types.js';
+
+interface TreePanelProps {
+  treeId: 'bank' | 'report';
+  title: string;
+  nodes: FlatNode<CustomData>[];
+  editMode: boolean;
+  emptyMessage: string;
+  onAddBranch: () => void;
+  onToggleExpand: (nodeId: string) => void;
+  onRename?: (nodeId: string, currentName: string) => void;
+  onDelete?: (nodeId: string) => void;
+}
+
+function renderSubtree(
+  nodes: FlatNode<CustomData>[],
+  parentId: string,
+  depth: number,
+  treeId: 'bank' | 'report',
+  props: Pick<TreePanelProps, 'editMode' | 'onToggleExpand' | 'onRename' | 'onDelete'>,
+): ReactElement[] {
+  return nodes
+    .filter(n => n.parent === parentId)
+    .map(node => (
+      <Fragment key={node.id}>
+        <TreeNodeRow
+          node={node}
+          depth={depth}
+          treeId={treeId}
+          allNodes={nodes}
+          editMode={props.editMode}
+          onToggleExpand={props.onToggleExpand}
+          onRename={props.onRename}
+          onDelete={props.onDelete}
+        />
+        {node.droppable &&
+          node.data.isOpen &&
+          renderSubtree(nodes, node.id, depth + 1, treeId, props)}
+      </Fragment>
+    ));
+}
+
+export function TreePanel({
+  treeId,
+  title,
+  nodes,
+  editMode,
+  emptyMessage,
+  onAddBranch,
+  onToggleExpand,
+  onRename,
+  onDelete,
+}: TreePanelProps): ReactElement {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [isOver, setIsOver] = useState(false);
+
+  useEffect(() => {
+    const el = panelRef.current;
+    if (!el || !editMode) return undefined;
+    return dropTargetForElements({
+      element: el,
+      getData: () => ({ nodeId: treeId, treeId }),
+      onDragEnter: () => setIsOver(true),
+      onDragLeave: () => setIsOver(false),
+      onDrop: () => setIsOver(false),
+    });
+  }, [editMode, treeId]);
+
+  const hasRootNodes = nodes.some(n => n.parent === treeId);
+
+  return (
+    <div className="flex flex-col h-full border rounded-lg bg-background">
+      <div className="flex items-center justify-between px-4 py-3 border-b bg-muted/30">
+        <h2 className="font-semibold text-lg">{title}</h2>
+        {editMode && (
+          <Button variant="outline" size="sm" onClick={onAddBranch}>
+            <FolderPlus className="size-4 mr-2" />
+            Add Branch
+          </Button>
+        )}
+      </div>
+
+      <ScrollArea className="flex-1 min-h-0">
+        <div
+          ref={panelRef}
+          className={cn('min-h-[300px] transition-colors', isOver && 'bg-accent/50')}
+        >
+          {!hasRootNodes ? (
+            <div className="flex items-center justify-center h-[300px] text-muted-foreground text-sm">
+              {emptyMessage}
+            </div>
+          ) : (
+            renderSubtree(nodes, treeId, 0, treeId, {
+              editMode,
+              onToggleExpand,
+              onRename,
+              onDelete,
+            })
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
diff --git a/packages/client/src/components/reports/dynamic-report-2/types.ts b/packages/client/src/components/reports/dynamic-report-2/types.ts
new file mode 100644
index 0000000000..cc20beca8e
--- /dev/null
+++ b/packages/client/src/components/reports/dynamic-report-2/types.ts
@@ -0,0 +1,111 @@
+export type NodeType = 'sort-code-branch' | 'synthetic-branch' | 'financial-entity';
+
+export type CustomData = {
+  nodeType: NodeType;
+  value?: number | null;
+  sortCode?: number | null;
+  isOpen: boolean;
+  entityType?: 'business' | 'person';
+};
+
+export type FlatNode<T = CustomData> = {
+  id: string;
+  /** Parent node id, or the tree root id ('bank' | 'report') for top-level nodes. */
+  parent: string;
+  text: string;
+  droppable: boolean;
+  data: T;
+};
+
+export interface LedgerRecord {
+  id: string;
+  business: string;
+  date: string;
+  localAmount: number;
+  localAmountBalance: number;
+  reference: string;
+  details: string;
+  counterAccount: string;
+}
+
+export interface Template {
+  id: string;
+  name: string;
+  lastUpdated: Date;
+  isLocked: boolean;
+  isLegacy?: boolean;
+}
+
+export interface Owner {
+  id: string;
+  name: string;
+}
+
+export function isFinancialEntityNode(node: FlatNode<CustomData>): boolean {
+  return node.data.nodeType === 'financial-entity';
+}
+
+export function isSortCodeBranchNode(node: FlatNode<CustomData>): boolean {
+  return node.data.nodeType === 'sort-code-branch';
+}
+
+export function isSyntheticBranchNode(node: FlatNode<CustomData>): boolean {
+  return node.data.nodeType === 'synthetic-branch';
+}
+
+export function isBranchNode(node: FlatNode<CustomData>): boolean {
+  return node.droppable === true;
+}
+
+/** Returns the ids of all descendants of rootId in a flat node array. */
+export function getDescendantIds(nodes: FlatNode[], rootId: string): string[] {
+  const result: string[] = [];
+  const queue = [rootId];
+  while (queue.length) {
+    const id = queue.shift()!;
+    for (const n of nodes) {
+      if (n.parent === id) {
+        result.push(n.id);
+        queue.push(n.id);
+      }
+    }
+  }
+  return result;
+}
+
+export function calculateBranchSum(nodes: FlatNode<CustomData>[], branchId: string): number {
+  let sum = 0;
+  for (const n of nodes) {
+    if (n.parent === branchId) {
+      if (isFinancialEntityNode(n)) {
+        sum += n.data.value ?? 0;
+      } else if (isBranchNode(n)) {
+        sum += calculateBranchSum(nodes, n.id);
+      }
+    }
+  }
+  return sum;
+}
+
+export function countLeaves(nodes: FlatNode<CustomData>[], branchId: string): number {
+  let count = 0;
+  for (const n of nodes) {
+    if (n.parent === branchId) {
+      if (isFinancialEntityNode(n)) {
+        count += 1;
+      } else if (isBranchNode(n)) {
+        count += countLeaves(nodes, n.id);
+      }
+    }
+  }
+  return count;
+}
+
+export function formatCurrency(value: number): string {
+  return new Intl.NumberFormat('he-IL', {
+    style: 'currency',
+    currency: 'ILS',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value);
+}
diff --git a/yarn.lock b/yarn.lock
index d30de3c1ab..74281189fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -67,7 +67,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@accounter/client@workspace:packages/client"
   dependencies:
+    "@atlaskit/pragmatic-drag-and-drop": "npm:1.8.0"
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "npm:1.1.0"
     "@auth0/auth0-react": "npm:2.16.2"
+    "@dnd-kit/core": "npm:6.3.1"
+    "@dnd-kit/sortable": "npm:10.0.0"
     "@emotion/react": "npm:11.14.0"
     "@emotion/styled": "npm:11.14.1"
     "@hookform/resolvers": "npm:5.2.2"
@@ -482,6 +486,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@atlaskit/pragmatic-drag-and-drop-hitbox@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@atlaskit/pragmatic-drag-and-drop-hitbox@npm:1.1.0"
+  dependencies:
+    "@atlaskit/pragmatic-drag-and-drop": "npm:^1.6.0"
+    "@babel/runtime": "npm:^7.0.0"
+  checksum: 10c0/65155bc980696abe9600bcf25d7dd9ea520e37f2bb68627a8dc7a3eb1c4f30588c95accbb00dd4720b86c0b15e51cd53d7633de427569a7a67e1cf614e425eee
+  languageName: node
+  linkType: hard
+
+"@atlaskit/pragmatic-drag-and-drop@npm:1.8.0, @atlaskit/pragmatic-drag-and-drop@npm:^1.6.0":
+  version: 1.8.0
+  resolution: "@atlaskit/pragmatic-drag-and-drop@npm:1.8.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.0.0"
+    bind-event-listener: "npm:^3.0.0"
+    raf-schd: "npm:^4.0.3"
+  checksum: 10c0/23d0d05c569db3628c93c5afb3b2f54b83ce3cedb9600635c1324fa0c7f2cd250cbed9f9741bd84b9cc8e0078a25d7739cc0f79748ba11f63fdcf34c0eff7c29
+  languageName: node
+  linkType: hard
+
 "@auth0/auth0-auth-js@npm:1.6.0":
   version: 1.6.0
   resolution: "@auth0/auth0-auth-js@npm:1.6.0"
@@ -696,7 +721,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.28.4, @babel/runtime@npm:^7.28.6, @babel/runtime@npm:^7.29.2, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.28.4, @babel/runtime@npm:^7.28.6, @babel/runtime@npm:^7.29.2, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.29.2
   resolution: "@babel/runtime@npm:7.29.2"
   checksum: 10c0/30b80a0140d16467792e1bbeb06f655b0dab70407da38dfac7fedae9c859f9ae9d846ef14ad77bd3814c064295fe9b1bc551f1541ea14646ae9f22b71a8bc17a
@@ -1023,6 +1048,55 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@dnd-kit/accessibility@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "@dnd-kit/accessibility@npm:3.1.1"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 10c0/be0bf41716dc58f9386bc36906ec1ce72b7b42b6d1d0e631d347afe9bd8714a829bd6f58a346dd089b1519e93918ae2f94497411a61a4f5e4d9247c6cfd1fef8
+  languageName: node
+  linkType: hard
+
+"@dnd-kit/core@npm:6.3.1":
+  version: 6.3.1
+  resolution: "@dnd-kit/core@npm:6.3.1"
+  dependencies:
+    "@dnd-kit/accessibility": "npm:^3.1.1"
+    "@dnd-kit/utilities": "npm:^3.2.2"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 10c0/196db95d81096d9dc248983533eab91ba83591770fa5c894b1ac776f42af0d99522b3fd5bb3923411470e4733fcfa103e6ee17adc17b9b7eb54c7fbec5ff7c52
+  languageName: node
+  linkType: hard
+
+"@dnd-kit/sortable@npm:10.0.0":
+  version: 10.0.0
+  resolution: "@dnd-kit/sortable@npm:10.0.0"
+  dependencies:
+    "@dnd-kit/utilities": "npm:^3.2.2"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@dnd-kit/core": ^6.3.0
+    react: ">=16.8.0"
+  checksum: 10c0/37ee48bc6789fb512dc0e4c374a96d19abe5b2b76dc34856a5883aaa96c3297891b94cc77bbc409e074dcce70967ebcb9feb40cd9abadb8716fc280b4c7f99af
+  languageName: node
+  linkType: hard
+
+"@dnd-kit/utilities@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "@dnd-kit/utilities@npm:3.2.2"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 10c0/9aa90526f3e3fd567b5acc1b625a63177b9e8d00e7e50b2bd0e08fa2bf4dba7e19529777e001fdb8f89a7ce69f30b190c8364d390212634e0afdfa8c395e85a0
+  languageName: node
+  linkType: hard
+
 "@emnapi/core@npm:1.9.2":
   version: 1.9.2
   resolution: "@emnapi/core@npm:1.9.2"
@@ -11472,6 +11546,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bind-event-listener@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "bind-event-listener@npm:3.0.0"
+  checksum: 10c0/08eadf1c7d3a58633f25c2bbd8dc066f77ef4e5df1049e81ff2f43a40c00f6581aba37387caa4878782b1f1f7c337b827757f52b637052a465ad74a7e1db8def
+  languageName: node
+  linkType: hard
+
 "bl@npm:^4.0.3":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
@@ -21005,6 +21086,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"raf-schd@npm:^4.0.3":
+  version: 4.0.3
+  resolution: "raf-schd@npm:4.0.3"
+  checksum: 10c0/ecabf0957c05fad059779bddcd992f1a9d3a35dfea439a6f0935c382fcf4f7f7fa60489e467b4c2db357a3665167d2a379782586b59712bb36c766e02824709b
+  languageName: node
+  linkType: hard
+
 "raf@npm:^3.4.1":
   version: 3.4.1
   resolution: "raf@npm:3.4.1"

From 79aaae0daaad20484fc2fd6fbd25558e6d0cea4c Mon Sep 17 00:00:00 2001
From: Gil Gardosh <gilgardosh@gmail.com>
Date: Wed, 22 Apr 2026 11:05:04 +0300
Subject: [PATCH 3/4] temp2

---
 packages/client/src/router/config.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/router/config.tsx b/packages/client/src/router/config.tsx
index 69d4a62676..6aaa6860eb 100644
--- a/packages/client/src/router/config.tsx
+++ b/packages/client/src/router/config.tsx
@@ -96,7 +96,9 @@ const TrialBalanceReport = lazy(() =>
   })),
 );
 const DynamicReport = lazy(() =>
-  import('../components/reports/dynamic-report/index.js').then(m => ({ default: m.DynamicReport })),
+  import('../components/reports/dynamic-report-2/index.js').then(m => ({
+    default: m.DynamicReport,
+  })),
 );
 const VatMonthlyReport = lazy(() =>
   import('../components/reports/vat-monthly-report/index.js').then(m => ({

From c6ae2502060415204056c18192fc07ec55c1373a Mon Sep 17 00:00:00 2001
From: Gil Gardosh <gilgardosh@gmail.com>
Date: Wed, 22 Apr 2026 11:05:57 +0300
Subject: [PATCH 4/4] docs

---
 docs/dynamic-report-audit/spec.md | 204 ++++++++++++++++++++++++++++++
 1 file changed, 204 insertions(+)
 create mode 100644 docs/dynamic-report-audit/spec.md

diff --git a/docs/dynamic-report-audit/spec.md b/docs/dynamic-report-audit/spec.md
new file mode 100644
index 0000000000..fd49c92a63
--- /dev/null
+++ b/docs/dynamic-report-audit/spec.md
@@ -0,0 +1,204 @@
+# Dynamic Report — Audit Layer Spec
+
+## Overview
+
+Add a per-node metadata layer to the dynamic report: every node (branch and leaf, in the report
+tree) carries a **status**, an optional **note**, and an optional list of **linked documents**.
+Metadata is stored inside the template JSON, shared across all users of the same business, and
+travels with its node when the node is moved. Changes to metadata mark the template dirty and
+require an explicit resave.
+
+---
+
+## Data shape — additions to `node.data`
+
+Three new optional fields on every node (both branches and leaves):
+
+| Field             | Type                                      | Default        |
+| ----------------- | ----------------------------------------- | -------------- |
+| `status`          | `"unapproved" \| "pending" \| "approved"` | `"unapproved"` |
+| `note`            | `string \| null`                          | `null`         |
+| `linkedDocuments` | `LinkedDocument[]`                        | `[]`           |
+
+`LinkedDocument` shape:
+
+```
+{ type: "uuid" | "url", value: string }
+```
+
+### Status semantics
+
+| Value        | Meaning                                |
+| ------------ | -------------------------------------- |
+| `unapproved` | Default — node has never been reviewed |
+| `pending`    | Reviewed but waiting on something      |
+| `approved`   | Fully reviewed and signed off          |
+
+- Status is **independent** per node — a branch's status is not derived from its children
+- There is no automatic status downgrade on ledger data changes (out of scope for this feature)
+
+---
+
+## Storage
+
+Metadata is stored **inline in the template JSON** as extra fields on each node's `data` object. No
+new DB columns or tables are needed.
+
+Metadata **travels with its node** when the node is dragged or moved — it is part of the node object
+and moves with it.
+
+Metadata is **shared** across all users of the same business owner (same as the template itself).
+
+---
+
+## Inline node indicators
+
+Every node row (in both the bank and report panels) shows the following indicators on its right side
+— **always visible, regardless of edit mode or locked state**:
+
+- **Status badge** — colored pill:
+  - Gray: `unapproved`
+  - Yellow: `pending`
+  - Green: `approved`
+- **Note icon** (`MessageSquare`) — shown only when `note` is non-null and non-empty
+- **Paperclip icon** (`Paperclip`) — shown only when `linkedDocuments.length > 0`
+
+---
+
+## Node metadata modal
+
+### How to open
+
+Clicking any of the inline indicators (status badge, note icon, paperclip icon) opens the modal. A
+dedicated info/edit button on the node row may also open it.
+
+The modal is **always accessible** — not gated on edit mode, and accessible even for locked
+templates.
+
+### Modal contents
+
+1. **Node label** — displayed as the modal title (read-only)
+
+2. **Status selector** — segmented control or radio group with three options: `Unapproved` /
+   `Pending` / `Approved`
+
+3. **Note** — multiline textarea; placeholder "Add a note…"
+
+4. **Linked documents** — list of currently linked items + an add-document input:
+
+   Each existing item shows:
+   - `type: "url"` → raw URL rendered as a clickable external link
+   - `type: "uuid"` → description + link **resolved from the server**:
+     - Show a loading spinner while the resolution query is in flight
+     - On success: render `description` as a clickable link to the document's `url`
+     - On failure (UUID not found or error): fall back to displaying the raw UUID as plain text
+   - A remove (×) button to delete the item from the list
+
+   **Add document input** — a text input + "Add" button:
+   - Accepts either a valid UUID or a full URL (`http://` or `https://`)
+   - Type is auto-detected on submit: UUID format → `type: "uuid"`, otherwise → `type: "url"`
+   - Appends the new item to the list
+
+5. **Footer buttons**:
+   - **Cancel** — discard all unsaved modal edits, close the modal
+   - **Save** — apply changes to the node's data in the tree state, mark the template dirty, close
+     the modal
+
+Changes are **not applied** until "Save" is clicked. Closing the modal or clicking "Cancel" discards
+any in-progress edits.
+
+### Document resolution behavior
+
+Resolution is **lazy** — the `linkedDocumentInfo` query is called when the modal opens (or when a
+new UUID is added), not on template load. Each UUID is resolved independently.
+
+---
+
+## Backend changes
+
+### New GraphQL query — `linkedDocumentInfo`
+
+```graphql
+type LinkedDocumentInfo {
+  id: UUID!
+  description: String! # human-readable label (charge description, invoice number, etc.)
+  url: String! # deep-link to the document within the app
+}
+
+extend type Query {
+  linkedDocumentInfo(id: UUID!): LinkedDocumentInfo # returns null if not found
+}
+```
+
+The resolver should look up the UUID across the relevant document types (charges, invoices, etc.)
+and return the best available description and a direct app URL. Returns `null` if not found.
+
+### `DynamicReportNodeData` GraphQL type additions
+
+```graphql
+type LinkedDocument {
+  type: String!    # "uuid" | "url"
+  value: String!
+}
+
+# additions to DynamicReportNodeData
+status: String!
+note: String
+linkedDocuments: [LinkedDocument!]!
+```
+
+### Zod schema additions (`dynamic-report.helper.ts`)
+
+Add to `dynamicReportNodeData`:
+
+```ts
+status: z.enum(['unapproved', 'pending', 'approved']).default('unapproved'),
+note: z.string().nullable().default(null),
+linkedDocuments: z.array(
+  z.object({ type: z.enum(['uuid', 'url']), value: z.string() })
+).default([]),
+```
+
+---
+
+## Frontend changes
+
+### `types.ts`
+
+Add to `CustomData`:
+
+```ts
+status?: 'unapproved' | 'pending' | 'approved';
+note?: string | null;
+linkedDocuments?: { type: 'uuid' | 'url'; value: string }[];
+```
+
+### `custom-node.tsx`
+
+- Render inline status badge (colored by value; default `unapproved` when absent)
+- Render note icon when `note` is non-empty
+- Render paperclip icon when `linkedDocuments` has items
+- Wire a click handler on any indicator (or a dedicated button) to open the metadata modal
+
+### `node-metadata-modal.tsx` _(new file)_
+
+Full modal component implementing all of the above:
+
+- Status selector
+- Note textarea
+- Linked documents list with resolution + remove
+- Add document input with type auto-detection
+- Cancel / Save footer
+
+---
+
+## Files affected
+
+| File                                                                            | Change                                                                                                                        |
+| ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `packages/server/src/modules/reports/typeDefs/dynamic-report.graphql.ts`        | Add `status`, `note`, `linkedDocuments` to `DynamicReportNodeData`; add `LinkedDocument` type; add `linkedDocumentInfo` query |
+| `packages/server/src/modules/reports/helpers/dynamic-report.helper.ts`          | Extend Zod schema with three new metadata fields                                                                              |
+| `packages/server/src/modules/reports/resolvers/dynamic-report.resolver.ts`      | Implement `linkedDocumentInfo` resolver                                                                                       |
+| `packages/client/src/components/reports/dynamic-report/types.ts`                | Add `status`, `note`, `linkedDocuments` to `CustomData`                                                                       |
+| `packages/client/src/components/reports/dynamic-report/custom-node.tsx`         | Add inline status badge + note/paperclip icons; wire open-modal handler                                                       |
+| `packages/client/src/components/reports/dynamic-report/node-metadata-modal.tsx` | New component — metadata modal (status, note, linked documents)                                                               |