Add Harbor login to deploy step so cross-node pull auth propagates to dev2

- Certificate PDFs, the preview dialog, and both share-certificate list views
  (demo + live) now pull bank name/address/reg no/seal text from the
  Institution Profile instead of a hardcoded "Nexora" identity.
- Certificate preview dialog print CSS was clipped to the dialog's on-screen
  scroll viewport (maxHeight config); switched to position:fixed + unclipped
  overlay ancestors so the full certificate prints, not just a border sliver.
- Global print stylesheet now also hides the app shell's real 2-row nav menu
  (.main-header/.kpi-ticker, not routed through <mifosx-toolbar>) and frees
  the CDK sidenav/tab-body scroll clipping, so printing any page no longer
  captures the nav chrome or gets cut off to one screen's height.

.drone.yml

@@ -0,0 +1,302 @@
+kind: pipeline
+type: docker
+name: auto-deploy
+
+trigger:
+  branch:
+    - dev
+  event:
+    - push
+
+steps:
+
+  # ============================================================
+  # DOCKER BUILD & PUSH
+  #
+  # Angular build (npm ci + ng build) Dockerfile ke andar
+  # multi-stage me hota hai, isliye alag build step nahi chahiye.
+  # ============================================================
+  - name: docker-build-push
+    image: docker
+
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+
+    commands:
+      - |
+        set -e
+
+        # --------------------------------------------------------
+        # Repository name comes from Drone
+        # --------------------------------------------------------
+        REPO="$${DRONE_REPO_NAME}"
+        REPO="$$(echo "$$REPO" | tr '[:upper:]' '[:lower:]')"
+
+        IMAGE="harbor.lincpay:8082/lincpay/$$REPO:$${DRONE_BUILD_NUMBER}"
+
+        echo "=========================================="
+        echo "DOCKER BUILD & PUSH"
+        echo "=========================================="
+        echo "Repository : $$REPO"
+        echo "Build      : $${DRONE_BUILD_NUMBER}"
+        echo "Image      : $$IMAGE"
+        echo "=========================================="
+
+        # --------------------------------------------------------
+        # Harbor login
+        # --------------------------------------------------------
+        echo 'QVgW5QbqlKKtBU2dYApTY28Dd6J36GK3' | \
+          docker login harbor.lincpay:8082 \
+          -u 'robot$lincpay+drone' \
+          --password-stdin
+
+        # --------------------------------------------------------
+        # Build
+        # --------------------------------------------------------
+        echo "Building Docker image..."
+
+        docker build \
+          -t "$$IMAGE" \
+          .
+
+        # --------------------------------------------------------
+        # Push
+        # --------------------------------------------------------
+        echo "Pushing Docker image..."
+
+        docker push "$$IMAGE"
+
+        echo "Docker image pushed successfully."
+
+
+  # ============================================================
+  # DEPLOY
+  # ============================================================
+  - name: deploy
+    image: docker
+
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+
+      - name: envfiles
+        path: /platform-env
+
+    commands:
+      - |
+        set -e
+
+        # ========================================================
+        # REPOSITORY / SERVICE / IMAGE
+        # ========================================================
+
+        REPO="$${DRONE_REPO_NAME}"
+        REPO="$$(echo "$$REPO" | tr '[:upper:]' '[:lower:]')"
+
+        SERVICE_NAME="$${REPO}_app"
+
+        IMAGE="harbor.lincpay:8082/lincpay/$$REPO:$${DRONE_BUILD_NUMBER}"
+
+        echo "=========================================="
+        echo "DEPLOYMENT"
+        echo "=========================================="
+        echo "Repository : $$REPO"
+        echo "Service    : $$SERVICE_NAME"
+        echo "Image      : $$IMAGE"
+        echo "Placement  : node.labels.environment == dev2"
+        echo "=========================================="
+
+
+        # ========================================================
+        # VALIDATION
+        # ========================================================
+
+        if [ -z "$$REPO" ]; then
+          echo "ERROR: DRONE_REPO_NAME is empty."
+          exit 1
+        fi
+
+        if [ -z "$$SERVICE_NAME" ]; then
+          echo "ERROR: Service name is empty."
+          exit 1
+        fi
+
+        if [ -z "$$IMAGE" ]; then
+          echo "ERROR: Docker image is empty."
+          exit 1
+        fi
+
+        echo "Repository verified : $$REPO"
+        echo "Service verified    : $$SERVICE_NAME"
+        echo "Image verified      : $$IMAGE"
+
+
+        # ========================================================
+        # HARBOR LOGIN
+        #
+        # Zaroori hai taaki --with-registry-auth worker node (dev2) ko
+        # valid Harbor credentials propagate kare — warna cross-node pull
+        # "No such image" / "no basic auth credentials" se fail hota hai.
+        # ========================================================
+
+        echo 'QVgW5QbqlKKtBU2dYApTY28Dd6J36GK3' | \
+          docker login harbor.lincpay:8082 \
+          -u 'robot$lincpay+drone' \
+          --password-stdin
+
+
+        # ========================================================
+        # EXISTING SERVICE
+        # ========================================================
+
+        if docker service ls --format '{{.Name}}' | grep -Fxq "$$SERVICE_NAME"; then
+
+          echo ""
+          echo "=========================================="
+          echo "EXISTING SERVICE"
+          echo "=========================================="
+          echo "Service: $$SERVICE_NAME"
+
+
+          # ------------------------------------------------------
+          # Check whether dev constraint already exists
+          # ------------------------------------------------------
+
+          CONSTRAINT_EXISTS=$$(docker service inspect "$$SERVICE_NAME" \
+            --format '{{range .Spec.TaskTemplate.Placement.Constraints}}{{println .}}{{end}}' \
+            | grep -Fx 'node.labels.environment == dev2' || true)
+
+
+          # ------------------------------------------------------
+          # Add constraint if missing
+          # ------------------------------------------------------
+
+          if [ -z "$$CONSTRAINT_EXISTS" ]; then
+
+            echo "Constraint missing."
+            echo "Adding: node.labels.environment == dev2"
+
+            docker service update \
+              --constraint-add 'node.labels.environment == dev2' \
+              "$$SERVICE_NAME"
+
+          else
+
+            echo "Constraint already exists."
+
+          fi
+
+
+          # ------------------------------------------------------
+          # Update image
+          # ------------------------------------------------------
+
+          echo "Updating service image..."
+
+          docker service update \
+            --image "$$IMAGE" \
+            --replicas 1 \
+            --with-registry-auth \
+            "$$SERVICE_NAME"
+
+
+        # ========================================================
+        # NEW SERVICE
+        # ========================================================
+
+        else
+
+          echo ""
+          echo "=========================================="
+          echo "NEW SERVICE"
+          echo "=========================================="
+          echo "Creating: $$SERVICE_NAME"
+
+
+          # ------------------------------------------------------
+          # Traefik rule
+          #
+          # Construct it without allowing Drone to consume
+          # the shell backticks.
+          # ------------------------------------------------------
+
+          TRAEFIK_RULE='Host(`'$$REPO'.lincpay`)'
+
+          echo "Traefik rule: $$TRAEFIK_RULE"
+
+
+          # ------------------------------------------------------
+          # Create service
+          # ------------------------------------------------------
+
+          docker service create \
+            --name "$$SERVICE_NAME" \
+            --network edge-network \
+            --replicas 1 \
+            --constraint 'node.labels.environment == dev2' \
+            --with-registry-auth \
+            --env-file /platform-env/global.env \
+            --env-file /platform-env/dev.env \
+            --label traefik.enable=true \
+            --label "traefik.docker.network=edge-network" \
+            --label "traefik.http.routers.$$REPO.rule=$$TRAEFIK_RULE" \
+            --label "traefik.http.services.$$REPO.loadbalancer.server.port=80" \
+            "$$IMAGE"
+
+        fi
+
+
+        # ========================================================
+        # FINAL STATUS
+        # ========================================================
+
+        echo ""
+        echo "=========================================="
+        echo "FINAL SERVICE STATUS"
+        echo "=========================================="
+
+        docker service ls \
+          --filter "name=$$SERVICE_NAME"
+
+
+        echo ""
+        echo "=========================================="
+        echo "PLACEMENT CONSTRAINT"
+        echo "=========================================="
+
+        docker service inspect "$$SERVICE_NAME" \
+          --format '{{json .Spec.TaskTemplate.Placement}}'
+
+
+        echo ""
+        echo "=========================================="
+        echo "SERVICE TASKS"
+        echo "=========================================="
+
+        docker service ps "$$SERVICE_NAME" --no-trunc
+
+
+        echo ""
+        echo "=========================================="
+        echo "DEPLOYMENT COMPLETE"
+        echo "=========================================="
+
+
+volumes:
+
+  # ============================================================
+  # DOCKER SOCKET
+  # ============================================================
+  - name: dockersock
+    host:
+      path: /var/run/docker.sock
+
+
+  # ============================================================
+  # ENVIRONMENT FILES
+  # ============================================================
+  - name: envfiles
+    host:
+      path: /opt/platform/env
+

Dockerfile

@@ -1,3 +1,4 @@
+# syntax=docker/dockerfile:1
 ###############
 ### STAGE 1: Build app
 ###############
@@ -9,10 +10,13 @@ ARG NPM_REGISTRY_URL=https://registry.npmjs.org/
 ARG BUILD_ENVIRONMENT_OPTIONS="--configuration production"
 ARG PUPPETEER_DOWNLOAD_HOST_ARG=https://storage.googleapis.com
 ARG PUPPETEER_CHROMIUM_REVISION_ARG=1011831
-ARG PUPPETEER_SKIP_DOWNLOAD_ARG
+# Build ko Chromium nahi chahiye — skip (warna npm ci Chromium download par atak jata hai).
+ARG PUPPETEER_SKIP_DOWNLOAD_ARG=true
 
 # Set the environment variable to increase Node.js memory limit
-ENV NODE_OPTIONS="--max-old-space-size=4096"
+# (Mifos web-app ka production build memory-heavy hai; upstream build:prod
+#  16384 use karta hai. 4096 par 'ng build' OOM ho jata hai.)
+ENV NODE_OPTIONS="--max-old-space-size=8192"
 
 RUN apk add --no-cache git
 
@@ -25,14 +29,22 @@ ENV PUPPETEER_DOWNLOAD_HOST=$PUPPETEER_DOWNLOAD_HOST_ARG
 ENV PUPPETEER_CHROMIUM_REVISION=$PUPPETEER_CHROMIUM_REVISION_ARG
 ENV PUPPETEER_SKIP_DOWNLOAD=$PUPPETEER_SKIP_DOWNLOAD_ARG
 
+# Test/e2e tooling ke bhaari binary downloads skip karo — build inhe use nahi
+# karta, aur inke bina npm ci turant complete ho jata hai.
+#   Cypress   -> ~250MB binary (CI me sabse zyada atakta hai)
+#   Playwright-> browser binaries
+ENV CYPRESS_INSTALL_BINARY=0
+ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
+
 COPY ./ /usr/src/app/
 
-RUN npm cache clear --force
+RUN npm config set fetch-retry-maxtimeout 120000 \
+ && npm config set registry $NPM_REGISTRY_URL --location=global
 
-RUN npm config set fetch-retry-maxtimeout 120000
-RUN npm config set registry $NPM_REGISTRY_URL --location=global
-
-RUN npm ci
+# BuildKit cache mount: npm ka download cache builds ke beech persist hota hai,
+# isliye har build par saare packages dobara download nahi hote (bahut fast).
+# 'npm cache clear --force' hata diya — wo har build par cache wipe kar deta tha.
+RUN --mount=type=cache,target=/root/.npm npm ci --no-audit --no-fund
 
 RUN sh -c "ng build --output-path=/dist $BUILD_ENVIRONMENT_OPTIONS"
 
@@ -41,6 +53,14 @@ RUN sh -c "ng build --output-path=/dist $BUILD_ENVIRONMENT_OPTIONS"
 ###############
 FROM $NGINX_IMAGE
 
+# envsubst (gettext) alpine-slim me nahi hota — runtime env.js generation ke
+# liye zaroori hai, isliye explicitly install kar rahe hain.
+RUN apk add --no-cache gettext
+
+# Static-only nginx config (SPA fallback, no API proxy). Stock default.conf
+# ko replace karta hai taaki deep-link refresh par 404 na aaye.
+COPY nginx.spa.conf /etc/nginx/conf.d/default.conf
+
 COPY --from=builder /dist/browser /usr/share/nginx/html
 
 EXPOSE 80

angular.json

@@ -70,7 +70,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "15mb",
-                  "maximumError": "16mb"
+                  "maximumError": "17mb"
                 },
                 {
                   "type": "anyComponentStyle",

nginx.spa.conf

@@ -0,0 +1,45 @@
+# Static-only nginx config for the CBSNexora Angular UI.
+# NOTE: No API reverse-proxy here by design — the browser calls the Fineract
+# backend directly via FINERACT_API_URL (env.js). nginx sirf static files
+# serve karta hai + Angular SPA routing handle karta hai.
+
+server {
+    listen       80;
+    server_name  _;
+
+    root   /usr/share/nginx/html;
+    index  index.html;
+
+    # ---- Compression ----
+    gzip              on;
+    gzip_comp_level   6;
+    gzip_min_length   1024;
+    gzip_proxied      any;
+    gzip_types        text/plain text/css application/javascript application/json
+                      application/xml image/svg+xml font/woff font/woff2;
+
+    # ---- Runtime env: env.js aur index.html kabhi cache na ho ----
+    # (env.js har container start par envsubst se regenerate hoti hai;
+    #  index.html hashed asset filenames point karti hai)
+    location = /assets/env.js {
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+        expires -1;
+    }
+
+    location = /index.html {
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+        expires -1;
+    }
+
+    # ---- Hashed static assets: lambe time cache ----
+    location ~* \.(?:js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 7d;
+        add_header Cache-Control "public";
+        try_files $uri =404;
+    }
+
+    # ---- Angular SPA fallback: har route index.html par ----
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

package-lock.json

@@ -44,6 +44,7 @@
         "moment": "^2.29.4",
         "ngx-image-cropper": "^9.1.6",
         "ngx-mat-select-search": "^8.0.2",
+        "pdfjs-dist": "^5.7.284",
         "rxjs": "^7.8.2",
         "signature_pad": "^5.1.3",
         "tinymce": "^8.2.2",
@@ -77,6 +78,7 @@
         "@typescript-eslint/eslint-plugin": "^8.48.1",
         "@typescript-eslint/parser": "^8.48.1",
         "@vendure/ngx-translate-extract": "^9.4.0",
+        "cross-env": "^10.1.0",
         "cypress": "^13.17.0",
         "eslint": "^9.39.1",
         "git-describe": "^4.1.1",
@@ -3559,6 +3561,13 @@
         "url": "https://github.com/sponsors/JounQin"
       }
     },
+    "node_modules/@epic-web/invariant": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
+      "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz",
@@ -6126,6 +6135,256 @@
         "linux"
       ]
     },
+    "node_modules/@napi-rs/canvas": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.100.tgz",
+      "integrity": "sha512-xglYA6q3XO5P3BNJYxVZ1IV7DLVjp1Py6nwag88YntrS+3vKHyYcMqXVS4ZztJmwz2uGvz1FWhI/4LgbR5uQDA==",
+      "license": "MIT",
+      "optional": true,
+      "workspaces": [
+        "e2e/*"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "0.1.100",
+        "@napi-rs/canvas-darwin-arm64": "0.1.100",
+        "@napi-rs/canvas-darwin-x64": "0.1.100",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.100",
+        "@napi-rs/canvas-linux-arm64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-arm64-musl": "0.1.100",
+        "@napi-rs/canvas-linux-riscv64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-x64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-x64-musl": "0.1.100",
+        "@napi-rs/canvas-win32-arm64-msvc": "0.1.100",
+        "@napi-rs/canvas-win32-x64-msvc": "0.1.100"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.100.tgz",
+      "integrity": "sha512-hjhCKhntPv9+t4ckHymdx0phYNcVW+GKQR6Lzw2zE+pOVjOplSmtx9nNNknTjbEDLcuLZqA1y8ufKg1XfgftzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.100.tgz",
+      "integrity": "sha512-2PcswRaC7Ly645DGt88///zuFDhJxJYdKAs1uU3mfk1atYkXufgcgLfBpk6Tm12nCQBaNt1wpybuPZ4qOhTo8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.100.tgz",
+      "integrity": "sha512-ePNZtj7pNIva/siZMg+HmbeozkIjqUIYdoymH8HaA3qK7LfzFN4WMBM8G6HQ9ZC+H3+Dnn5pqtiXpgLykaPOhw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.100.tgz",
+      "integrity": "sha512-d5cDB48oWFGU8/XPhUOFAlySgb/VAu7D+s8fi55K1Pcfg8aPplHWqMgibhVLU8ky7Pyg/fuiVLz4Nf3JrSTuUA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.100.tgz",
+      "integrity": "sha512-rDxgxRu69RvDlX/bh9o22DxLsGr8EqsNgotL9+RwQE1S0b0cqeatqsw6aW45mukm0B42DIAaAacKaYQ8cqS1nw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.100.tgz",
+      "integrity": "sha512-K3mDW66N+xT2/V439u1alFANiBUjdEx2gLiNYnCmUsva5jZMxWTjafBYwTzYK+EMFMHrUoabuU+T1BIP5CgbYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.100.tgz",
+      "integrity": "sha512-mooqUBTIsccZpnoQC4NgrC1v6C1vof39etLNMnBwCY+p0gajWJvAHLGQ6g/gGyS5YrpDW+GefSN4+Cvcr08UWw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.100.tgz",
+      "integrity": "sha512-1eCvkDCazm7FFhsT7DfGOdSaHgZVK3bt/dSBl5EWHOWmnz+I7j8tPseJqqD81NF+MH21jKUK4wQSDjN0mdhnTg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.100.tgz",
+      "integrity": "sha512-20arT6lnI19S68qNlii73TSEDbECNgzMz2EpldC1V3mZFuRkeujXkcebRk0LRJe9SEUAooYiLokfMViY8IX7yA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-arm64-msvc": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-arm64-msvc/-/canvas-win32-arm64-msvc-0.1.100.tgz",
+      "integrity": "sha512-DZFFT1wIAg37LJw37yhMRFfjATd3vTQzjZ1Yki8u2vhO6Hi5VE6BVaGQ1aaDu7xb4iMErz+9EOwjpS7xcxFeBw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.100.tgz",
+      "integrity": "sha512-MyT1j3mHC2+Lu4pBi9mKyMJhtP6U7k7EldY7sj/uS5gJA65gTXt8MefJQXLJo5d/vZbuWmfxzkEUNc/urV3pHA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
     "node_modules/@napi-rs/nice": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@napi-rs/nice/-/nice-1.1.1.tgz",
@@ -11451,6 +11710,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cross-env": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
+      "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@epic-web/invariant": "^1.0.0",
+        "cross-spawn": "^7.0.6"
+      },
+      "bin": {
+        "cross-env": "dist/bin/cross-env.js",
+        "cross-env-shell": "dist/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -19922,6 +20199,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/pdfjs-dist": {
+      "version": "5.7.284",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.7.284.tgz",
+      "integrity": "sha512-h4EdYQczmGhbOlqc3PPZwxevn7ApdWPbovAuWXOB/DjIyigSnwfy2oze7c6mRcSr9XgLp3eN3EeL4DyySTPMFw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=22.13.0 || >=24"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas": "^0.1.100"
+      }
+    },
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",

package.json

@@ -15,9 +15,10 @@
     "ng": "ng",
     "build": "node version.js && npm run env -s && ng build --configuration production --output-hashing=none",
     "build:prod": "node version.js && node --max-old-space-size=16384 ./node_modules/@angular/cli/bin/ng build --configuration production --output-hashing=none --base-href=/web-app/",
-    "start": "npm run env -s && ng serve --proxy-config proxy.localhost.conf.js",
-    "start:demo": "npm run env -s && ng serve --proxy-config proxy.conf.js",
-    "serve:dev": "npm run env -s && ng serve --source-map --proxy-config proxy.localhost.conf.js",
+    "start": "npm run env -s && cross-env NODE_OPTIONS=\"--max_old_space_size=16384\" ng serve --proxy-config proxy.localhost.conf.js",
+    "start:share": "npm run env -s && cross-env NODE_OPTIONS=\"--max_old_space_size=16384\" ng serve --host 0.0.0.0 --proxy-config proxy.localhost.conf.js",
+    "start:demo": "npm run env -s && cross-env NODE_OPTIONS=\"--max_old_space_size=16384\" ng serve --proxy-config proxy.conf.js",
+    "serve:dev": "npm run env -s && cross-env NODE_OPTIONS=\"--max_old_space_size=16384\" ng serve --source-map --proxy-config proxy.localhost.conf.js",
     "serve:sw": "npm run build -s && npx http-server ./dist -p 4200",
     "lint": "eslint . && stylelint \"src/**/*.scss\" && prettier . --check && htmlhint \"src\" --config .htmlhintrc",
     "test": "jest --config jest.config.ts",
@@ -35,7 +36,8 @@
     "playwright:headed": "playwright test --headed",
     "playwright:debug": "playwright test --debug",
     "headers:check": "node scripts/check-file-headers.js",
-    "headers:add": "node scripts/add-file-headers.js"
+    "headers:add": "node scripts/add-file-headers.js",
+    "mock:dip": "node \"../cbsnexora-backend/scripts/mock-dip-lookup-service.js\""
   },
   "dependencies": {
     "@angular/animations": "20.3.16",
@@ -72,6 +74,7 @@
     "moment": "^2.29.4",
     "ngx-image-cropper": "^9.1.6",
     "ngx-mat-select-search": "^8.0.2",
+    "pdfjs-dist": "^5.7.284",
     "rxjs": "^7.8.2",
     "signature_pad": "^5.1.3",
     "tinymce": "^8.2.2",
@@ -105,6 +108,7 @@
     "@typescript-eslint/eslint-plugin": "^8.48.1",
     "@typescript-eslint/parser": "^8.48.1",
     "@vendure/ngx-translate-extract": "^9.4.0",
+    "cross-env": "^10.1.0",
     "cypress": "^13.17.0",
     "eslint": "^9.39.1",
     "git-describe": "^4.1.1",

src/app/accounting/accounting-routing.module.ts

@@ -25,6 +25,7 @@ import { CreateFinancialActivityMappingComponent } from './financial-activity-ma
 import { ViewFinancialActivityMappingComponent } from './financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component';
 import { EditFinancialActivityMappingComponent } from './financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component';
 import { MigrateOpeningBalancesComponent } from './migrate-opening-balances/migrate-opening-balances.component';
+import { MigrateCashDenominationComponent } from './migrate-cash-denomination/migrate-cash-denomination.component';
 import { ChartOfAccountsComponent } from './chart-of-accounts/chart-of-accounts.component';
 import { CreateGlAccountComponent } from './chart-of-accounts/create-gl-account/create-gl-account.component';
 import { ViewGlAccountComponent } from './chart-of-accounts/view-gl-account/view-gl-account.component';
@@ -71,6 +72,7 @@ import { ViewJournalEntryTransactionComponent } from 'app/shared/accounting/view
 import { JournalEntryTransactionResolver } from './common-resolvers/journal-entry-transaction.resolver';
 import { ExternalAssetOwnerJournalEntryResolver } from 'app/loans/common-resolvers/external-asset-owner-journal-entry.resolver';
 import { ExternalAssetConfigurationResolver } from './common-resolvers/external-asset-configuration.resolver';
+import { accountingFeatureEnabledGuard } from './disabled-features';
 
 /** Accounting Routes */
 const routes: Routes = [
@@ -98,7 +100,8 @@ const routes: Routes = [
             {
               path: 'frequent-postings',
               component: FrequentPostingsComponent,
-              data: { title: 'Frequent Postings', breadcrumb: 'Frequent Postings' },
+              canActivate: [accountingFeatureEnabledGuard],
+              data: { title: 'Frequent Postings', breadcrumb: 'Frequent Postings', feature: 'frequentPostings' },
               resolve: {
                 offices: OfficesResolver,
                 accountingRules: AccountingRulesAssociationsResolver,
@@ -109,7 +112,8 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateJournalEntryComponent,
-              data: { title: 'Create Journal Entry', breadcrumb: 'Create' },
+              canActivate: [accountingFeatureEnabledGuard],
+              data: { title: 'Create Journal Entry', breadcrumb: 'Create', feature: 'createJournalEntries' },
               resolve: {
                 offices: OfficesResolver,
                 currencies: CurrenciesResolver,
@@ -185,6 +189,19 @@ const routes: Routes = [
             currencies: CurrenciesResolver
           }
         },
+        {
+          path: 'migrate-cash-denomination',
+          component: MigrateCashDenominationComponent,
+          data: { title: 'Migrate Cash Denomination', breadcrumb: 'Migrate Cash Denomination' },
+          resolve: {
+            offices: OfficesResolver
+          }
+        },
+        {
+          path: 'balance-sheet',
+          loadComponent: () => import('./balance-sheet/balance-sheet.component').then((c) => c.BalanceSheetComponent),
+          data: { title: 'Balance Sheet', breadcrumb: 'Balance Sheet' }
+        },
         {
           path: 'chart-of-accounts',
           data: { title: 'Chart of Accounts', breadcrumb: 'Chart of Accounts' },
@@ -235,7 +252,8 @@ const routes: Routes = [
         },
         {
           path: 'closing-entries',
-          data: { title: 'Accounting Closures', breadcrumb: 'Closing Entries' },
+          canActivate: [accountingFeatureEnabledGuard],
+          data: { title: 'Accounting Closures', breadcrumb: 'Closing Entries', feature: 'closingEntries' },
           children: [
             {
               path: '',
@@ -276,7 +294,8 @@ const routes: Routes = [
         },
         {
           path: 'accounting-rules',
-          data: { title: 'Accounting Rules', breadcrumb: 'Accounting Rules' },
+          canActivate: [accountingFeatureEnabledGuard],
+          data: { title: 'Accounting Rules', breadcrumb: 'Accounting Rules', feature: 'accountingRules' },
           children: [
             {
               path: '',
@@ -323,11 +342,17 @@ const routes: Routes = [
         {
           path: 'periodic-accruals',
           component: PeriodicAccrualsComponent,
-          data: { title: 'Periodic Accrual Accounting', breadcrumb: 'Execute Periodic Accrual Accounting' }
+          canActivate: [accountingFeatureEnabledGuard],
+          data: {
+            title: 'Periodic Accrual Accounting',
+            breadcrumb: 'Execute Periodic Accrual Accounting',
+            feature: 'accruals'
+          }
         },
         {
           path: 'provisioning-entries',
-          data: { title: 'Provisioning Entries', breadcrumb: 'Provisioning Entries' },
+          canActivate: [accountingFeatureEnabledGuard],
+          data: { title: 'Provisioning Entries', breadcrumb: 'Provisioning Entries', feature: 'provisioningEntries' },
           children: [
             {
               path: '',

src/app/accounting/accounting.component.html

@@ -17,35 +17,39 @@
 
   <!-- Cards Grid -->
   <div class="acc-grid">
-    <!-- Frequent Postings -->
-    <a
-      class="acc-card"
-      [routerLink]="['journal-entries/frequent-postings']"
-      *mifosxHasPermission="'CREATE_JOURNALENTRY'"
-      #frequentPostings
-    >
-      <div class="acc-card__icon blue"><i class="fas fa-sync-alt"></i></div>
-      <div class="acc-card__info">
-        <span class="acc-card__title">{{ 'labels.heading.Frequent Postings' | translate }}</span>
-        <span class="acc-card__desc">{{ 'labels.text.These are predefined postings' | translate }}</span>
-      </div>
-    </a>
+    <!-- Frequent Postings — hidden while disabled, see disabled-features.ts -->
+    @if (!disabledFeatures.frequentPostings) {
+      <a
+        class="acc-card"
+        [routerLink]="['journal-entries/frequent-postings']"
+        *mifosxHasPermission="'CREATE_JOURNALENTRY'"
+        #frequentPostings
+      >
+        <div class="acc-card__icon blue"><i class="fas fa-sync-alt"></i></div>
+        <div class="acc-card__info">
+          <span class="acc-card__title">{{ 'labels.heading.Frequent Postings' | translate }}</span>
+          <span class="acc-card__desc">{{ 'labels.text.These are predefined postings' | translate }}</span>
+        </div>
+      </a>
+    }
 
-    <!-- Create Journal Entries -->
-    <a
-      class="acc-card"
-      [routerLink]="['journal-entries/create']"
-      *mifosxHasPermission="'CREATE_JOURNALENTRY'"
-      #createJournalEntries
-    >
-      <div class="acc-card__icon green"><i class="fas fa-plus-circle"></i></div>
-      <div class="acc-card__info">
-        <span class="acc-card__title">{{ 'labels.heading.Create Journal Entries' | translate }}</span>
-        <span class="acc-card__desc">{{
-          'labels.text.Manual journal entry transactions recorded in a journal' | translate
-        }}</span>
-      </div>
-    </a>
+    <!-- Create Journal Entries — hidden while disabled, see disabled-features.ts -->
+    @if (!disabledFeatures.createJournalEntries) {
+      <a
+        class="acc-card"
+        [routerLink]="['journal-entries/create']"
+        *mifosxHasPermission="'CREATE_JOURNALENTRY'"
+        #createJournalEntries
+      >
+        <div class="acc-card__icon green"><i class="fas fa-plus-circle"></i></div>
+        <div class="acc-card__info">
+          <span class="acc-card__title">{{ 'labels.heading.Create Journal Entries' | translate }}</span>
+          <span class="acc-card__desc">{{
+            'labels.text.Manual journal entry transactions recorded in a journal' | translate
+          }}</span>
+        </div>
+      </a>
+    }
 
     <!-- Search Journal Entries -->
     <a class="acc-card" [routerLink]="['journal-entries']" *mifosxHasPermission="'READ_JOURNALENTRY'">
@@ -88,6 +92,22 @@
       </div>
     </a>
 
+    <!-- Migrate Cash Denomination -->
+    <a
+      class="acc-card"
+      [routerLink]="['migrate-cash-denomination']"
+      *mifosxHasPermission="'READ_JOURNALENTRY'"
+      #migrateCashDenomination
+    >
+      <div class="acc-card__icon amber"><i class="fas fa-coins"></i></div>
+      <div class="acc-card__info">
+        <span class="acc-card__title">Migrate Cash Denomination</span>
+        <span class="acc-card__desc">
+          Count the vault opening cash into notes and coins, and open the first business day
+        </span>
+      </div>
+    </a>
+
     <!-- Chart of Accounts -->
     <a class="acc-card" [routerLink]="['chart-of-accounts']" *mifosxHasPermission="'READ_GLACCOUNT'" #chartofAccounts>
       <div class="acc-card__icon blue"><i class="fas fa-sitemap"></i></div>
@@ -97,43 +117,64 @@
       </div>
     </a>
 
-    <!-- Closing Entries -->
-    <a class="acc-card" [routerLink]="['closing-entries']" *mifosxHasPermission="'READ_GLCLOSURE'" #closingEntries>
-      <div class="acc-card__icon red"><i class="fas fa-archive"></i></div>
+    <!-- Balance Sheet -->
+    <a class="acc-card" [routerLink]="['balance-sheet']" *mifosxHasPermission="'READ_GLACCOUNT'" #balanceSheet>
+      <div class="acc-card__icon teal"><i class="fas fa-balance-scale"></i></div>
       <div class="acc-card__info">
-        <span class="acc-card__title">{{ 'labels.heading.Closing Entries' | translate }}</span>
-        <span class="acc-card__desc">{{
-          'labels.text.Journal entries made at the end of accounting period' | translate
-        }}</span>
+        <span class="acc-card__title">Balance Sheet</span>
+        <span class="acc-card__desc">Header/Detail balances as on any date</span>
       </div>
     </a>
 
-    <!-- Accounting Rules -->
-    <a class="acc-card" [routerLink]="['accounting-rules']" *mifosxHasPermission="'READ_ACCOUNTINGRULE'">
-      <div class="acc-card__icon purple"><i class="fas fa-list-ul"></i></div>
-      <div class="acc-card__info">
-        <span class="acc-card__title">{{ 'labels.heading.Accounting Rules' | translate }}</span>
-        <span class="acc-card__desc">{{ 'labels.text.List of all accounting rules' | translate }}</span>
-      </div>
-    </a>
+    <!-- Closing Entries — hidden while disabled, see disabled-features.ts -->
+    @if (!disabledFeatures.closingEntries) {
+      <a class="acc-card" [routerLink]="['closing-entries']" *mifosxHasPermission="'READ_GLCLOSURE'" #closingEntries>
+        <div class="acc-card__icon red"><i class="fas fa-archive"></i></div>
+        <div class="acc-card__info">
+          <span class="acc-card__title">{{ 'labels.heading.Closing Entries' | translate }}</span>
+          <span class="acc-card__desc">{{
+            'labels.text.Journal entries made at the end of accounting period' | translate
+          }}</span>
+        </div>
+      </a>
+    }
 
-    <!-- Accruals -->
-    <a class="acc-card" [routerLink]="['periodic-accruals']" *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'">
-      <div class="acc-card__icon green"><i class="fas fa-calendar-check"></i></div>
-      <div class="acc-card__info">
-        <span class="acc-card__title">{{ 'labels.heading.Accruals' | translate }}</span>
-        <span class="acc-card__desc">{{ 'labels.text.Accrues income, expenses and liabilities' | translate }}</span>
-      </div>
-    </a>
+    <!-- Accounting Rules — hidden while disabled, see disabled-features.ts -->
+    @if (!disabledFeatures.accountingRules) {
+      <a class="acc-card" [routerLink]="['accounting-rules']" *mifosxHasPermission="'READ_ACCOUNTINGRULE'">
+        <div class="acc-card__icon purple"><i class="fas fa-list-ul"></i></div>
+        <div class="acc-card__info">
+          <span class="acc-card__title">{{ 'labels.heading.Accounting Rules' | translate }}</span>
+          <span class="acc-card__desc">{{ 'labels.text.List of all accounting rules' | translate }}</span>
+        </div>
+      </a>
+    }
 
-    <!-- Provisioning Entries -->
-    <a class="acc-card" [routerLink]="['provisioning-entries']" *mifosxHasPermission="'VIEW_PROVISIONING_ENTRIES'">
-      <div class="acc-card__icon amber"><i class="fas fa-cogs"></i></div>
-      <div class="acc-card__info">
-        <span class="acc-card__title">{{ 'labels.heading.Provisioning Entries' | translate }}</span>
-        <span class="acc-card__desc">{{ 'labels.text.Create provisioning entries' | translate }}</span>
-      </div>
-    </a>
+    <!-- Accruals — hidden while disabled, see disabled-features.ts -->
+    @if (!disabledFeatures.accruals) {
+      <a
+        class="acc-card"
+        [routerLink]="['periodic-accruals']"
+        *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'"
+      >
+        <div class="acc-card__icon green"><i class="fas fa-calendar-check"></i></div>
+        <div class="acc-card__info">
+          <span class="acc-card__title">{{ 'labels.heading.Accruals' | translate }}</span>
+          <span class="acc-card__desc">{{ 'labels.text.Accrues income, expenses and liabilities' | translate }}</span>
+        </div>
+      </a>
+    }
+
+    <!-- Provisioning Entries — hidden while disabled, see disabled-features.ts -->
+    @if (!disabledFeatures.provisioningEntries) {
+      <a class="acc-card" [routerLink]="['provisioning-entries']" *mifosxHasPermission="'VIEW_PROVISIONING_ENTRIES'">
+        <div class="acc-card__icon amber"><i class="fas fa-cogs"></i></div>
+        <div class="acc-card__info">
+          <span class="acc-card__title">{{ 'labels.heading.Provisioning Entries' | translate }}</span>
+          <span class="acc-card__desc">{{ 'labels.text.Create provisioning entries' | translate }}</span>
+        </div>
+      </a>
+    }
   </div>
 </div>
 

src/app/accounting/accounting.component.ts

@@ -18,6 +18,7 @@ import { MatIcon } from '@angular/material/icon';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatLine } from '@angular/material/grid-list';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { DISABLED_ACCOUNTING_FEATURES } from './disabled-features';
 
 /**
  * Accounting component.
@@ -63,6 +64,9 @@ export class AccountingComponent implements AfterViewInit {
   // Initialize an array of 10 boolean values, all set to false
   arrowBooleans: boolean[] = new Array(10).fill(false);
 
+  /** Which accounting tiles are switched off for this installation — see disabled-features.ts. */
+  disabledFeatures = DISABLED_ACCOUNTING_FEATURES;
+
   /**
    * Popover function
    * @param template TemplateRef<any>.
@@ -104,12 +108,15 @@ export class AccountingComponent implements AfterViewInit {
         );
       });
     }
-    if (this.configurationWizardService.showClosingEntries) {
+    // Closing Entries and Create Journal Entries can be switched off (see disabled-features.ts), in
+    // which case their tiles never render and these refs stay undefined — the wizard simply has no
+    // step to point at, rather than throwing on a missing element.
+    if (this.configurationWizardService.showClosingEntries && this.closingEntries) {
       setTimeout(() => {
         this.showPopover(this.templateClosingEntries, this.closingEntries.nativeElement, 'bottom', true);
       });
     }
-    if (this.configurationWizardService.showCreateJournalEntries) {
+    if (this.configurationWizardService.showCreateJournalEntries && this.createJournalEntries) {
       setTimeout(() => {
         this.showPopover(this.templateCreateJournalEntries, this.createJournalEntries.nativeElement, 'bottom', true);
       });

src/app/accounting/accounting.service.ts

@@ -32,6 +32,48 @@ export class AccountingService {
     return this.http.get('/offices', { params: httpParams });
   }
 
+  /**
+   * Real net profit for a date range, computed live from posted GL journal entries (not the
+   * demo data shown by the GL Reports module).
+   * @param {string} fromDate Period start, yyyy-MM-dd.
+   * @param {string} toDate Period end, yyyy-MM-dd.
+   * @returns {Observable<any>} `{ totalIncome, totalExpense, netProfit }`.
+   */
+  getProfitAndLoss(fromDate: string, toDate: string): Observable<any> {
+    const httpParams = new HttpParams().set('fromDate', fromDate).set('toDate', toDate);
+    return this.http.get('/accounting/profitandloss', { params: httpParams });
+  }
+
+  /**
+   * How much profit a share dividend may actually be declared out of — net profit reduced by the
+   * statutory appropriations that legally precede a dividend (Statutory Reserve Fund, education
+   * fund) and by dividends already declared for other share products over an overlapping period.
+   * @param {string} fromDate Period start, yyyy-MM-dd.
+   * @param {string} toDate Period end, yyyy-MM-dd.
+   * @param {string} excludeProductId Leave this product's own declarations out of `alreadyDeclared`
+   *   (its overlapping declaration is separately blocked outright, so counting it would double up).
+   * @returns {Observable<any>} `{ netProfit, statutoryReserveAmount, educationFundAmount,
+   *   distributableProfit, alreadyDeclared, availableForDeclaration, maximumRatePercentage,
+   *   existingDeclarations[] }`.
+   */
+  getDistributableProfit(fromDate: string, toDate: string, excludeProductId?: string): Observable<any> {
+    let httpParams = new HttpParams().set('fromDate', fromDate).set('toDate', toDate);
+    if (excludeProductId) {
+      httpParams = httpParams.set('excludeProductId', excludeProductId);
+    }
+    return this.http.get('/accounting/distributable-profit', { params: httpParams });
+  }
+
+  /**
+   * Total share dividend actually paid to members in a date range — derived from the Dividend
+   * Payable GL account's own ledger (no separate "Dividend Paid" account needed).
+   * @returns {Observable<any>} `{ totalPaid, payoutCount, entries[], glAccountConfigured }`.
+   */
+  getDividendPaidReport(fromDate: string, toDate: string): Observable<any> {
+    const httpParams = new HttpParams().set('fromDate', fromDate).set('toDate', toDate);
+    return this.http.get('/accounting/dividend-paid-report', { params: httpParams });
+  }
+
   /**
    * @param {boolean} useHttpParams True if http params should be used.
    * @returns {Observable<any>} Accounting rules data.
@@ -74,6 +116,22 @@ export class AccountingService {
     return this.http.get(`/glaccounts`, { params: httpParams });
   }
 
+  /**
+   * As-on-date balance sheet, grouped by Header/Detail hierarchy — see BalanceSheetApiResource.
+   * @param asOnDate yyyy-MM-dd. Defaults to today on the backend when omitted.
+   * @param officeId Optional — scopes every balance to one office instead of the whole organization.
+   */
+  getBalanceSheet(asOnDate?: string, officeId?: number): Observable<any> {
+    let httpParams = new HttpParams();
+    if (asOnDate) {
+      httpParams = httpParams.set('asOnDate', asOnDate);
+    }
+    if (officeId != null) {
+      httpParams = httpParams.set('officeId', officeId.toString());
+    }
+    return this.http.get('/accounting/balancesheet', { params: httpParams });
+  }
+
   /**
    * @param transactionId Transaction ID of journal entries.
    * @returns {Observable<any>} Journal Entries.

src/app/accounting/balance-sheet/balance-sheet-pdf.ts

@@ -0,0 +1,363 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/*
+ * Builds the Consolidated Balance Sheet PDF, laid out like the bank's printed report: liabilities
+ * on the left, assets on the right, each top-level group a named block with its accounts listed
+ * under it and a subtotal in the TOTAL column.
+ *
+ * Drawn directly with jsPDF rather than printed from the DOM: window.print() carries the whole app
+ * shell (sidenav, toolbar, ticker) into the output and gives no control over where a page breaks,
+ * which is what made the printed sheet unreadable. Here each column is paginated on its own, the
+ * way the printed report does it — the left side can run onto page 2 while the right side is still
+ * on page 1 — and every page repeats the heading.
+ */
+
+import { jsPDF } from 'jspdf';
+
+export interface BalanceSheetPdfNode {
+  name: string;
+  glCode: string;
+  usage: 'HEADER' | 'DETAIL';
+  balance: number;
+  children: BalanceSheetPdfNode[];
+}
+
+export interface BalanceSheetPdfSide {
+  label: string;
+  total: number;
+  groups: { classification: string; total: number; nodes: BalanceSheetPdfNode[] }[];
+}
+
+export interface BalanceSheetPdfInput {
+  bankName: string;
+  officeLabel: string;
+  /** yyyy-MM-dd */
+  asOnDate: string;
+  creditSide: BalanceSheetPdfSide;
+  debitSide: BalanceSheetPdfSide;
+}
+
+// ── Page geometry, in mm on A4 portrait ─────────────────────────────────────
+const PAGE_W = 210;
+const PAGE_H = 297;
+const MARGIN = 8;
+const COL_W = (PAGE_W - MARGIN * 2) / 2;
+const COL_X = [
+  MARGIN,
+  MARGIN + COL_W
+];
+/** Right edges of the BALANCE and TOTAL columns, relative to a column's left edge. */
+const BALANCE_R = COL_W - 26;
+const TOTAL_R = COL_W - 2;
+/** Name text wraps within this width so it never runs under the BALANCE column. */
+const NAME_W = COL_W - 30;
+
+const BODY_TOP = 36;
+/** Leaves room under the body for the sign-off row and the print-date footer. */
+const BODY_BOTTOM = PAGE_H - 21;
+const LINE_H = 3.1;
+
+const INK: [number, number, number] = [
+  20,
+  20,
+  20
+];
+const MUTED: [number, number, number] = [
+  90,
+  90,
+  90
+];
+
+type Line =
+  | { kind: 'block'; text: string }
+  | { kind: 'subhead'; text: string; depth: number }
+  | { kind: 'detail'; lines: string[]; amount: string; depth: number }
+  | { kind: 'subsubtotal'; amount: string }
+  | { kind: 'subtotal'; amount: string }
+  | { kind: 'standalone'; lines: string[]; amount: string }
+  | { kind: 'grand'; amount: string }
+  | { kind: 'gap' };
+
+function money(value: number): string {
+  return new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value ?? 0);
+}
+
+function ddmmyyyy(iso: string): string {
+  if (!iso) {
+    return '';
+  }
+  const [
+    y,
+    m,
+    d
+  ] = iso.split('-');
+  return `${d}/${m}/${y}`;
+}
+
+function heightOf(line: Line): number {
+  switch (line.kind) {
+    case 'block':
+      // Heading plus the short dashed rule beneath it.
+      return LINE_H + 1.8;
+    case 'detail':
+    case 'standalone':
+      return LINE_H * line.lines.length;
+    case 'gap':
+      return 2.4;
+    case 'grand':
+      // Rule above, the figure, and the double rule beneath it.
+      return LINE_H + 6;
+    default:
+      return LINE_H;
+  }
+}
+
+/**
+ * Flattens one side into the exact sequence of printed lines. Done up front so pagination is a
+ * matter of measuring heights, with no recursion happening mid-page.
+ */
+function flatten(doc: jsPDF, side: BalanceSheetPdfSide): Line[] {
+  const out: Line[] = [];
+  // splitTextToSize measures with whatever font is currently set, so it has to match the font the
+  // detail lines are actually drawn in — otherwise names wrap at the wrong width.
+  doc.setFont('helvetica', 'normal').setFontSize(6.8);
+
+  const pushNode = (node: BalanceSheetPdfNode, depth: number): void => {
+    if (node.usage === 'DETAIL') {
+      const indent = depth * 2;
+      const wrapped: string[] = doc.splitTextToSize(node.name, NAME_W - indent);
+      out.push({ kind: 'detail', lines: wrapped, amount: money(node.balance), depth });
+      return;
+    }
+    out.push({ kind: 'subhead', text: node.name, depth });
+    node.children.forEach((child) => pushNode(child, depth + 1));
+    out.push({ kind: 'subsubtotal', amount: money(node.balance) });
+  };
+
+  for (const group of side.groups) {
+    for (const root of group.nodes) {
+      if (root.usage === 'DETAIL') {
+        // A Detail account sitting under no group at all: a group of one, printed on a single line
+        // carrying both its balance and its total, rather than a heading and a figure on separate
+        // rows with the BALANCE column left empty.
+        out.push({
+          kind: 'standalone',
+          lines: doc.splitTextToSize(root.name.toUpperCase(), NAME_W),
+          amount: money(root.balance)
+        });
+        out.push({ kind: 'gap' });
+        continue;
+      }
+      out.push({ kind: 'block', text: root.name });
+      root.children.forEach((child) => pushNode(child, 0));
+      out.push({ kind: 'subtotal', amount: money(root.balance) });
+      out.push({ kind: 'gap' });
+    }
+  }
+  // Carried as a line of its own so pagination reserves room for it, rather than squeezing it
+  // against the bottom margin under the last block.
+  out.push({ kind: 'grand', amount: money(side.total) });
+  return out;
+}
+
+function dottedLine(doc: jsPDF, x1: number, y: number, x2: number): void {
+  doc.setLineDashPattern(
+    [
+      0.4,
+      0.6
+    ],
+    0
+  );
+  doc.setLineWidth(0.15);
+  doc.line(x1, y, x2, y);
+  doc.setLineDashPattern([], 0);
+}
+
+function drawPageFrame(doc: jsPDF, input: BalanceSheetPdfInput, page: number, pageCount: number): void {
+  doc.setTextColor(...INK);
+
+  doc.setFont('helvetica', 'bold').setFontSize(9.5);
+  doc.text(`${input.bankName.toUpperCase()} , HEAD OFFICE`, PAGE_W / 2, 11, { align: 'center' });
+
+  doc.setFontSize(8);
+  doc.text(`CONSOLIDATED BALANCE SHEET (SUB GROUP WISE) AS ON : ${ddmmyyyy(input.asOnDate)}`, PAGE_W / 2, 16, {
+    align: 'center'
+  });
+  doc.setFont('helvetica', 'normal').setFontSize(7);
+  doc.text(`Page ${page} of ${pageCount}`, PAGE_W - MARGIN, 16, { align: 'right' });
+  doc.text(`FOR BRANCHES : ${input.officeLabel}`, PAGE_W / 2, 20, { align: 'center' });
+
+  dottedLine(doc, MARGIN, 23, PAGE_W - MARGIN);
+
+  // Side titles and column headings, drawn per column.
+  const titles = [
+    'LIABILITIES ( CREDIT )',
+    'ASSETS ( DEBIT )'
+  ];
+  for (let c = 0; c < 2; c++) {
+    const x = COL_X[c];
+    doc.setFont('helvetica', 'bold').setFontSize(7.5);
+    doc.text(titles[c], x + 1, 27.5);
+    doc.setFontSize(6.5);
+    doc.text('ACCOUNT NAME', x + 1, 32);
+    doc.text('BALANCE', x + BALANCE_R, 32, { align: 'right' });
+    doc.text('TOTAL', x + TOTAL_R, 32, { align: 'right' });
+    dottedLine(doc, x + 1, 33.4, x + COL_W - 2);
+  }
+
+  // The divider between the two sides.
+  doc.setLineWidth(0.15);
+  doc.setDrawColor(150, 150, 150);
+  doc.line(COL_X[1], 24, COL_X[1], BODY_BOTTOM + 2);
+  doc.setDrawColor(0, 0, 0);
+
+  // Footer.
+  dottedLine(doc, MARGIN, BODY_BOTTOM + 6, PAGE_W - MARGIN);
+  doc
+    .setFont('helvetica', 'normal')
+    .setFontSize(6.5)
+    .setTextColor(...MUTED);
+  const now = new Date();
+  const stamp =
+    `${`${now.getDate()}`.padStart(2, '0')}/${`${now.getMonth() + 1}`.padStart(2, '0')}/${now.getFullYear()} ` +
+    `${`${now.getHours()}`.padStart(2, '0')}:${`${now.getMinutes()}`.padStart(2, '0')}:${`${now.getSeconds()}`.padStart(2, '0')}`;
+  doc.text(`Print Date : ${stamp}`, MARGIN, BODY_BOTTOM + 10);
+  doc.text('Consolidated Balance Sheet (Sub Group Wise)', PAGE_W - MARGIN, BODY_BOTTOM + 10, { align: 'right' });
+  doc.setTextColor(...INK);
+}
+
+/** Draws one line into a column at y, and returns the y the next line starts at. */
+function drawLine(doc: jsPDF, line: Line, x: number, y: number): number {
+  switch (line.kind) {
+    case 'block': {
+      doc.setFont('helvetica', 'bold').setFontSize(7);
+      doc.text(line.text.toUpperCase(), x + 1, y);
+      dottedLine(doc, x + 1, y + 1.1, x + 34);
+      return y + heightOf(line);
+    }
+    case 'subhead': {
+      doc.setFont('helvetica', 'bold').setFontSize(6.8);
+      doc.text(line.text, x + 1 + line.depth * 2, y);
+      return y + heightOf(line);
+    }
+    case 'detail': {
+      doc.setFont('helvetica', 'normal').setFontSize(6.8);
+      const indent = x + 2 + line.depth * 2;
+      line.lines.forEach((text, i) => doc.text(text, indent, y + i * LINE_H));
+      // The amount sits on the first line of a wrapped name, as the printed report has it.
+      doc.text(line.amount, x + BALANCE_R, y, { align: 'right' });
+      return y + heightOf(line);
+    }
+    case 'subsubtotal': {
+      doc.setFont('helvetica', 'bold').setFontSize(6.8);
+      dottedLine(doc, x + BALANCE_R - 22, y - 2.2, x + BALANCE_R);
+      doc.text(line.amount, x + BALANCE_R, y, { align: 'right' });
+      return y + heightOf(line);
+    }
+    case 'subtotal': {
+      doc.setFont('helvetica', 'bold').setFontSize(7);
+      doc.text(line.amount, x + TOTAL_R, y, { align: 'right' });
+      return y + heightOf(line);
+    }
+    case 'standalone': {
+      doc.setFont('helvetica', 'bold').setFontSize(7);
+      line.lines.forEach((text, i) => doc.text(text, x + 1, y + i * LINE_H));
+      doc.text(line.amount, x + BALANCE_R, y, { align: 'right' });
+      doc.text(line.amount, x + TOTAL_R, y, { align: 'right' });
+      return y + heightOf(line);
+    }
+    case 'grand': {
+      const top = y + 1.5;
+      doc.setLineWidth(0.3);
+      doc.line(x + 1, top, x + COL_W - 2, top);
+      doc.setFont('helvetica', 'bold').setFontSize(7.5);
+      doc.text(line.amount, x + TOTAL_R, top + 3.6, { align: 'right' });
+      doc.setLineWidth(0.2);
+      doc.line(x + 1, top + 5, x + COL_W - 2, top + 5);
+      doc.line(x + 1, top + 5.7, x + COL_W - 2, top + 5.7);
+      return y + heightOf(line);
+    }
+    default:
+      return y + heightOf(line);
+  }
+}
+
+/** Splits one side's lines into per-page chunks that fit between BODY_TOP and BODY_BOTTOM. */
+function paginate(lines: Line[]): Line[][] {
+  const pages: Line[][] = [];
+  let current: Line[] = [];
+  let y = BODY_TOP;
+
+  for (const line of lines) {
+    const h = heightOf(line);
+    if (y + h > BODY_BOTTOM) {
+      pages.push(current);
+      current = [];
+      y = BODY_TOP;
+    }
+    current.push(line);
+    y += h;
+  }
+  // Keep the trailing chunk only if it has something on it, but always return at least one page so
+  // a side with no balances still gets its heading and a zero total.
+  if (current.length > 0 || pages.length === 0) {
+    pages.push(current);
+  }
+  return pages;
+}
+
+export function buildBalanceSheetPdf(input: BalanceSheetPdfInput): jsPDF {
+  const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4', compress: true });
+
+  const creditPages = paginate(flatten(doc, input.creditSide));
+  const debitPages = paginate(flatten(doc, input.debitSide));
+  // Both sides print side by side, so the sheet runs as long as the longer of the two, plus a
+  // final page for the grand totals when they would not fit under the last block.
+  const pageCount = Math.max(creditPages.length, debitPages.length);
+
+  for (let p = 0; p < pageCount; p++) {
+    if (p > 0) {
+      doc.addPage();
+    }
+    drawPageFrame(doc, input, p + 1, pageCount);
+
+    const sides = [
+      creditPages[p] ?? [],
+      debitPages[p] ?? []
+    ];
+
+    for (let c = 0; c < 2; c++) {
+      const x = COL_X[c];
+      let y = BODY_TOP;
+      for (const line of sides[c]) {
+        y = drawLine(doc, line, x, y);
+      }
+    }
+
+    // Sign-off row, on the closing page only.
+    if (p === pageCount - 1) {
+      doc
+        .setFont('helvetica', 'normal')
+        .setFontSize(6.5)
+        .setTextColor(...MUTED);
+      const roles = [
+        'CLERK',
+        'ACCOUNTANT / OFFICER',
+        'ASST. GEN MANAGER',
+        'GENERAL MANAGER',
+        'CHAIRMAN'
+      ];
+      const step = (PAGE_W - MARGIN * 2) / roles.length;
+      roles.forEach((role, i) => doc.text(role, MARGIN + step * i + step / 2, BODY_BOTTOM + 2, { align: 'center' }));
+      doc.setTextColor(...INK);
+    }
+  }
+
+  return doc;
+}

src/app/accounting/balance-sheet/balance-sheet.component.html

@@ -0,0 +1,182 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="bs-page">
+  <!-- Controls — not part of the printed sheet. -->
+  <div class="bs-controls">
+    <label class="bs-field">
+      <span>As on date</span>
+      <input type="date" [(ngModel)]="asOnDate" (change)="load()" />
+    </label>
+    <label class="bs-field">
+      <span>Branch</span>
+      <select [(ngModel)]="officeId" (ngModelChange)="load()">
+        <option [ngValue]="null">All branches</option>
+        @for (office of offices; track office.id) {
+          <option [ngValue]="office.id">{{ office.name }}</option>
+        }
+      </select>
+    </label>
+    <label class="bs-check">
+      <input type="checkbox" [(ngModel)]="hideZeroBalances" (ngModelChange)="applyZeroFilter()" />
+      <span>Hide nil balances</span>
+    </label>
+    <span class="bs-controls__spacer"></span>
+    @if (!loading && debitSide && creditSide) {
+      <span class="bs-tally" [class.bs-tally--off]="!tallied">
+        {{ tallied ? 'Balanced' : 'Out of balance by ' + fmt(difference) }}
+      </span>
+    }
+    <button type="button" class="bs-btn" (click)="load()" [disabled]="loading">
+      {{ loading ? 'Loading…' : 'Refresh' }}
+    </button>
+    <button type="button" class="bs-btn bs-btn--primary" (click)="downloadPdf()" [disabled]="loading || !debitSide">
+      Download PDF
+    </button>
+  </div>
+
+  @if (error) {
+    <div class="bs-alert">{{ error }}</div>
+  }
+
+  @if (loading) {
+    <div class="bs-loading">Loading balance sheet…</div>
+  }
+
+  @if (!loading && debitSide && creditSide) {
+    <!-- The sheet itself — this block is what prints. -->
+    <div class="bs-sheet">
+      <header class="bs-sheet__head">
+        <h2>CONSOLIDATED BALANCE SHEET (SUB GROUP WISE)</h2>
+        <p>AS ON : {{ displayDate(asOnDateLoaded) }}</p>
+        <p class="bs-sheet__branches">FOR BRANCHES : {{ officeLabel }}</p>
+      </header>
+
+      <div class="bs-sheet__body">
+        <!-- Liabilities (credit) on the left, assets (debit) on the right — as the printed sheet reads. -->
+        <section class="bs-col">
+          <div class="bs-col__title">LIABILITIES ( CREDIT )</div>
+          <div class="bs-row bs-row--colhead">
+            <span>ACCOUNT NAME</span>
+            <span>BALANCE</span>
+            <span>TOTAL</span>
+          </div>
+          @for (group of creditSide.groups; track group.classification) {
+            @for (root of group.nodes; track root.id) {
+              <ng-container *ngTemplateOutlet="block; context: { $implicit: root }"></ng-container>
+            }
+          }
+          @if (creditSide.groups.length === 0) {
+            <div class="bs-empty">No liability, equity or income balances as on this date.</div>
+          }
+          <div class="bs-row bs-row--grand">
+            <span></span>
+            <span></span>
+            <span>{{ fmt(creditSide.total) }}</span>
+          </div>
+        </section>
+
+        <section class="bs-col">
+          <div class="bs-col__title">ASSETS ( DEBIT )</div>
+          <div class="bs-row bs-row--colhead">
+            <span>ACCOUNT NAME</span>
+            <span>BALANCE</span>
+            <span>TOTAL</span>
+          </div>
+          @for (group of debitSide.groups; track group.classification) {
+            @for (root of group.nodes; track root.id) {
+              <ng-container *ngTemplateOutlet="block; context: { $implicit: root }"></ng-container>
+            }
+          }
+          @if (debitSide.groups.length === 0) {
+            <div class="bs-empty">No asset or expense balances as on this date.</div>
+          }
+          <div class="bs-row bs-row--grand">
+            <span></span>
+            <span></span>
+            <span>{{ fmt(debitSide.total) }}</span>
+          </div>
+        </section>
+      </div>
+
+      <footer class="bs-sheet__foot">
+        <span>CLERK</span>
+        <span>ACCOUNTANT / OFFICER</span>
+        <span>ASST. GEN MANAGER</span>
+        <span>GENERAL MANAGER</span>
+        <span>CHAIRMAN</span>
+      </footer>
+    </div>
+  }
+</div>
+
+<!--
+  One top-level block: the Header account's name, a rule, its lines, then its subtotal in the TOTAL
+  column.
+-->
+<ng-template #block let-root>
+  @if (root.usage === 'DETAIL') {
+    <!-- A Detail account with no Header of its own: a group of one, so it gets a single line
+         carrying both its balance and its total rather than a heading repeating its own name. -->
+    <div class="bs-block bs-block--single">
+      <div class="bs-row bs-row--standalone">
+        <span class="bs-name" [title]="root.glCode">{{ root.name }}</span>
+        <span class="bs-amt">{{ fmt(root.balance) }}</span>
+        <span class="bs-amt">{{ fmt(root.balance) }}</span>
+      </div>
+    </div>
+  } @else {
+    <div class="bs-block">
+      <div class="bs-block__name" [title]="root.glCode">{{ root.name }}</div>
+      <div class="bs-block__rule"></div>
+      @for (child of root.children; track child.id) {
+        <ng-container *ngTemplateOutlet="lines; context: { $implicit: child, depth: 0 }"></ng-container>
+      }
+      @if (root.children.length === 0) {
+        <div class="bs-row bs-row--line">
+          <span class="bs-name bs-name--muted">No accounts under this group</span>
+          <span></span>
+          <span></span>
+        </div>
+      }
+      <div class="bs-row bs-row--subtotal">
+        <span></span>
+        <span></span>
+        <span>{{ fmt(root.balance) }}</span>
+      </div>
+    </div>
+  }
+</ng-template>
+
+<!--
+  Everything below a top-level block. A nested Header keeps its own name and its own subtotal, so a
+  Header inside a Header still reads as its own sub-group rather than flattening into the parent.
+-->
+<ng-template #lines let-node let-depth="depth">
+  @if (node.usage === 'DETAIL') {
+    <div class="bs-row bs-row--line">
+      <span class="bs-name" [style.paddingLeft.px]="depth * 14" [title]="node.glCode">{{ node.name }}</span>
+      <span class="bs-amt">{{ fmt(node.balance) }}</span>
+      <span></span>
+    </div>
+  } @else {
+    <div class="bs-row bs-row--subhead">
+      <span class="bs-name" [style.paddingLeft.px]="depth * 14" [title]="node.glCode">{{ node.name }}</span>
+      <span></span>
+      <span></span>
+    </div>
+    @for (child of node.children; track child.id) {
+      <ng-container *ngTemplateOutlet="lines; context: { $implicit: child, depth: depth + 1 }"></ng-container>
+    }
+    <div class="bs-row bs-row--subsubtotal">
+      <span></span>
+      <span class="bs-amt">{{ fmt(node.balance) }}</span>
+      <span></span>
+    </div>
+  }
+</ng-template>

src/app/accounting/balance-sheet/balance-sheet.component.scss

@@ -0,0 +1,372 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+$ink: #111827;
+$ink-soft: #374151;
+$ink-faint: #9ca3af;
+$rule: #cbd5e1;
+$border: #e2e8f0;
+$accent: #1d4ed8;
+$ok: #15803d;
+$ok-soft: #f0fdf4;
+$danger: #b91c1c;
+$danger-soft: #fef2f2;
+
+// Amount columns share one width so BALANCE and TOTAL line up down the whole sheet.
+$amt-col: 128px;
+
+.bs-page {
+  padding: 20px 24px 40px;
+  background: #f1f5f9;
+  min-height: 100%;
+}
+
+// ── Controls (screen only) ────────────────────────────────────────────────
+.bs-controls {
+  display: flex;
+  align-items: flex-end;
+  gap: 14px;
+  flex-wrap: wrap;
+  margin-bottom: 18px;
+
+  &__spacer {
+    flex: 1 1 auto;
+  }
+}
+
+.bs-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: $ink-soft;
+
+  input,
+  select {
+    height: 36px;
+    padding: 0 10px;
+    border: 1px solid $border;
+    border-radius: 6px;
+    background: #fff;
+    font-size: 13px;
+    font-weight: 500;
+    text-transform: none;
+    letter-spacing: normal;
+    color: $ink;
+  }
+}
+
+.bs-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: $ink-soft;
+  cursor: pointer;
+  user-select: none;
+
+  input {
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+    accent-color: $accent;
+  }
+}
+
+.bs-btn {
+  height: 36px;
+  padding: 0 16px;
+  border: 1px solid $border;
+  border-radius: 6px;
+  background: #fff;
+  color: $ink-soft;
+  font-size: 12.5px;
+  font-weight: 700;
+  cursor: pointer;
+
+  &--primary {
+    background: $ink;
+    border-color: $ink;
+    color: #fff;
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+.bs-tally {
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: $ok-soft;
+  color: $ok;
+  font-size: 12px;
+  font-weight: 700;
+
+  &--off {
+    background: $danger-soft;
+    color: $danger;
+  }
+}
+
+.bs-alert {
+  padding: 10px 14px;
+  border-radius: 6px;
+  background: $danger-soft;
+  color: $danger;
+  border: 1px solid #fecaca;
+  font-size: 13px;
+  margin-bottom: 14px;
+}
+
+.bs-loading {
+  padding: 48px 0;
+  text-align: center;
+  color: $ink-faint;
+  font-size: 13.5px;
+}
+
+// ── The printed sheet ─────────────────────────────────────────────────────
+.bs-sheet {
+  background: #fff;
+  border: 1px solid $border;
+  padding: 22px 26px 18px;
+  // The ledger reads as a printed report, so the whole sheet is set in a mono face with
+  // figures on tabular numerals — columns stay aligned however long the names run.
+  font-family: 'DejaVu Sans Mono', 'Liberation Mono', Consolas, 'Courier New', monospace;
+  font-variant-numeric: tabular-nums;
+  color: $ink;
+
+  &__head {
+    text-align: center;
+    border-bottom: 1px dotted $rule;
+    padding-bottom: 10px;
+    margin-bottom: 12px;
+
+    h2 {
+      margin: 0;
+      font-size: 13.5px;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+    }
+
+    p {
+      margin: 4px 0 0;
+      font-size: 11.5px;
+      color: $ink-soft;
+    }
+  }
+
+  &__branches {
+    letter-spacing: 0.05em;
+  }
+
+  &__body {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+  }
+
+  &__foot {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    margin-top: 26px;
+    padding-top: 10px;
+    border-top: 1px dotted $rule;
+    font-size: 10px;
+    letter-spacing: 0.05em;
+    color: $ink-soft;
+  }
+}
+
+.bs-col {
+  padding: 0 16px;
+  min-width: 0;
+
+  &:first-child {
+    border-right: 1px dotted $rule;
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+
+  &__title {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    padding-bottom: 6px;
+  }
+}
+
+// ── Rows: one grid so name / BALANCE / TOTAL align across every block ──────
+.bs-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) $amt-col $amt-col;
+  gap: 8px;
+  align-items: baseline;
+  font-size: 11.5px;
+  line-height: 1.55;
+
+  > span:nth-child(2),
+  > span:nth-child(3) {
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  &--colhead {
+    font-weight: 700;
+    font-size: 10.5px;
+    letter-spacing: 0.05em;
+    border-bottom: 1px dotted $rule;
+    padding-bottom: 4px;
+    margin-bottom: 6px;
+    color: $ink-soft;
+  }
+
+  &--line {
+    color: $ink-soft;
+  }
+
+  // A nested Header inside a block: its own named sub-group.
+  &--subhead {
+    font-weight: 700;
+    color: $ink;
+    padding-top: 3px;
+  }
+
+  // Sub-group subtotal sits in the BALANCE column, so it never collides with the
+  // block's own figure in TOTAL.
+  &--subsubtotal {
+    border-top: 1px dotted $rule;
+    font-weight: 700;
+    color: $accent;
+  }
+
+  // Top-level block subtotal, in the TOTAL column.
+  &--subtotal {
+    font-weight: 700;
+    color: $ink;
+    padding-top: 2px;
+  }
+
+  // A Header-less Detail account: its own one-line group.
+  &--standalone {
+    font-weight: 700;
+    color: $ink;
+
+    .bs-name {
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+    }
+  }
+
+  &--grand {
+    margin-top: 14px;
+    padding-top: 8px;
+    border-top: 1px solid $ink;
+    border-bottom: 3px double $ink;
+    font-weight: 700;
+    font-size: 12.5px;
+  }
+}
+
+.bs-name {
+  overflow-wrap: anywhere;
+
+  &--muted {
+    color: $ink-faint;
+    font-style: italic;
+  }
+}
+
+.bs-amt {
+  font-variant-numeric: tabular-nums;
+}
+
+.bs-block {
+  margin-bottom: 14px;
+
+  &--single {
+    margin-bottom: 10px;
+  }
+
+  &__name {
+    font-size: 11.5px;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+  }
+
+  // The short dashed rule the printed sheet puts under every group heading.
+  &__rule {
+    width: 130px;
+    border-top: 1px dotted $ink-faint;
+    margin: 2px 0 4px;
+  }
+}
+
+.bs-empty {
+  padding: 14px 0;
+  font-size: 11.5px;
+  color: $ink-faint;
+}
+
+// ── Narrow screens: stack the two sides instead of squeezing the columns ───
+@media (width <= 1100px) {
+  .bs-sheet__body {
+    grid-template-columns: 1fr;
+  }
+
+  .bs-col {
+    padding: 0;
+
+    &:first-child {
+      border-right: none;
+      border-bottom: 1px dotted $rule;
+      padding-bottom: 16px;
+      margin-bottom: 16px;
+    }
+  }
+}
+
+// ── Print: only the sheet, at report proportions ───────────────────────────
+@media print {
+  .bs-controls,
+  .bs-alert,
+  .bs-loading {
+    display: none !important;
+  }
+
+  .bs-page {
+    padding: 0;
+    background: #fff;
+  }
+
+  .bs-sheet {
+    border: none;
+    padding: 0;
+    font-size: 10px;
+  }
+
+  .bs-sheet__body {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .bs-block {
+    break-inside: avoid;
+  }
+}

src/app/accounting/balance-sheet/balance-sheet.component.ts

@@ -0,0 +1,218 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AccountingService } from '../accounting.service';
+import { OrganizationService } from '../../organization/organization.service';
+import { buildBalanceSheetPdf } from './balance-sheet-pdf';
+
+interface BalanceSheetNode {
+  id: number;
+  name: string;
+  glCode: string;
+  usage: 'HEADER' | 'DETAIL';
+  balance: number;
+  children: BalanceSheetNode[];
+}
+
+interface BalanceSheetGroup {
+  classification: string;
+  total: number;
+  nodes: BalanceSheetNode[];
+}
+
+interface BalanceSheetSide {
+  label: string;
+  total: number;
+  groups: BalanceSheetGroup[];
+}
+
+/**
+ * Consolidated Balance Sheet (sub-group wise), laid out the way the bank's own printed balance
+ * sheet reads: liabilities on the left, assets on the right, each top-level Header account a named
+ * block whose Detail accounts are listed under it and subtotalled in the TOTAL column.
+ *
+ * Balances come from BalanceSheetApiResource, which reads the live ledger - a Detail account's own
+ * postings, and a Header's as the recursive sum of its children (a Header never carries a posting
+ * of its own). A Detail account that sits under no Header at all is shown as its own one-line block
+ * rather than being dropped.
+ */
+@Component({
+  selector: 'mifosx-balance-sheet',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  templateUrl: './balance-sheet.component.html',
+  styleUrl: './balance-sheet.component.scss'
+})
+export class BalanceSheetComponent implements OnInit {
+  private accountingService = inject(AccountingService);
+  private organizationService = inject(OrganizationService);
+
+  /** Printed at the head of the PDF. Falls back to a neutral title if the profile is not set up. */
+  bankName = 'Bank';
+
+  asOnDate: string = new Date().toISOString().slice(0, 10);
+  officeId: number | null = null;
+  offices: { id: number; name: string }[] = [];
+
+  loading = false;
+  error = '';
+  asOnDateLoaded = '';
+
+  /** What the server returned, kept whole so the zero-balance toggle never needs a refetch. */
+  private rawDebitSide: BalanceSheetSide | null = null;
+  private rawCreditSide: BalanceSheetSide | null = null;
+
+  debitSide: BalanceSheetSide | null = null;
+  creditSide: BalanceSheetSide | null = null;
+
+  /**
+   * A working chart of accounts carries far more accounts than a bank actually operates, and a
+   * printed balance sheet lists only the ones carrying a balance — leaving every nil line in makes
+   * the sheet unreadable. On by default for that reason; switch it off to audit the full chart.
+   */
+  hideZeroBalances = true;
+
+  /** Both sides are derived from the same double-entry ledger, so they can only disagree if a
+   *  posting is missing a leg — worth surfacing rather than hiding. */
+  get tallied(): boolean {
+    if (!this.debitSide || !this.creditSide) {
+      return true;
+    }
+    return Math.abs(this.debitSide.total - this.creditSide.total) < 0.01;
+  }
+
+  get difference(): number {
+    if (!this.debitSide || !this.creditSide) {
+      return 0;
+    }
+    return Math.abs(this.debitSide.total - this.creditSide.total);
+  }
+
+  get officeLabel(): string {
+    if (this.officeId == null) {
+      return 'ALL BRANCHES';
+    }
+    return (this.offices.find((o) => o.id === this.officeId)?.name ?? '').toUpperCase();
+  }
+
+  ngOnInit(): void {
+    this.accountingService.getOffices().subscribe({
+      next: (offices) => (this.offices = offices || []),
+      error: () => (this.offices = [])
+    });
+    this.organizationService.getInstitutionProfile().subscribe({
+      next: (profile: any) => {
+        this.bankName = profile?.statementHeaderName || profile?.bankName || this.bankName;
+      },
+      // A missing institution profile must not stop the sheet from loading — the PDF just carries
+      // the fallback title.
+      error: () => undefined
+    });
+    this.load();
+  }
+
+  load(): void {
+    this.loading = true;
+    this.error = '';
+    this.accountingService.getBalanceSheet(this.asOnDate, this.officeId ?? undefined).subscribe({
+      next: (res: any) => {
+        this.rawDebitSide = res.debitSide;
+        this.rawCreditSide = res.creditSide;
+        this.asOnDateLoaded = res.asOnDate;
+        this.applyZeroFilter();
+        this.loading = false;
+      },
+      error: () => {
+        this.error = 'Could not load the balance sheet for this date.';
+        this.loading = false;
+      }
+    });
+  }
+
+  /**
+   * Rebuilds the displayed sides from what the server sent, dropping nil lines when asked. The
+   * totals are deliberately left as the server computed them — hiding a nil line must never change
+   * a figure, and a group total is unaffected by removing children that summed to nothing.
+   */
+  applyZeroFilter(): void {
+    this.debitSide = this.filterSide(this.rawDebitSide);
+    this.creditSide = this.filterSide(this.rawCreditSide);
+  }
+
+  private filterSide(side: BalanceSheetSide | null): BalanceSheetSide | null {
+    if (!side) {
+      return null;
+    }
+    if (!this.hideZeroBalances) {
+      return side;
+    }
+    const groups = side.groups
+      .map((group) => ({
+        ...group,
+        nodes: group.nodes
+          .map((node) => this.pruneZeros(node))
+          .filter((node): node is BalanceSheetNode => node !== null)
+      }))
+      .filter((group) => group.nodes.length > 0);
+    return { ...side, groups };
+  }
+
+  /** Drops a node whose balance is nil, and any Header left with nothing under it. */
+  private pruneZeros(node: BalanceSheetNode): BalanceSheetNode | null {
+    if (Math.abs(node.balance) < 0.005) {
+      return null;
+    }
+    const children = node.children
+      .map((child) => this.pruneZeros(child))
+      .filter((child): child is BalanceSheetNode => child !== null);
+    return { ...node, children };
+  }
+
+  /** Indian grouping with two decimals, matching the printed report (2,76,92,608.00). */
+  fmt(value: number): string {
+    return new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value ?? 0);
+  }
+
+  /** dd/MM/yyyy, as the printed report dates it. */
+  displayDate(iso: string): string {
+    if (!iso) {
+      return '';
+    }
+    const [
+      y,
+      m,
+      d
+    ] = iso.split('-');
+    return `${d}/${m}/${y}`;
+  }
+
+  /**
+   * Builds the report as a real PDF rather than printing the page: window.print() takes the whole
+   * app shell with it and breaks pages wherever they happen to fall, which is what made the earlier
+   * output unusable.
+   */
+  downloadPdf(): void {
+    if (!this.debitSide || !this.creditSide) {
+      return;
+    }
+    const doc = buildBalanceSheetPdf({
+      bankName: this.bankName,
+      officeLabel: this.officeLabel,
+      asOnDate: this.asOnDateLoaded || this.asOnDate,
+      creditSide: this.creditSide,
+      debitSide: this.debitSide
+    });
+    doc.save(`balance-sheet-${this.asOnDateLoaded || this.asOnDate}.pdf`);
+  }
+}

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html

@@ -119,7 +119,7 @@
         <button
           mat-raised-button
           color="primary"
-          [disabled]="!glAccountForm.valid"
+          [disabled]="!glAccountForm.valid || submitting"
           *mifosxHasPermission="'CREATE_GLACCOUNT'"
         >
           {{ 'labels.buttons.Submit' | translate }}

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts

@@ -14,6 +14,7 @@ import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
+import { AlertService } from 'app/core/alert/alert.service';
 import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
 import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
 
@@ -42,6 +43,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateGlAccountComponent implements OnInit, AfterViewInit {
   private formBuilder = inject(UntypedFormBuilder);
   private accountingService = inject(AccountingService);
+  private alertService = inject(AlertService);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private configurationWizardService = inject(ConfigurationWizardService);
@@ -50,6 +52,8 @@ export class CreateGlAccountComponent implements OnInit, AfterViewInit {
 
   /** GL account form. */
   glAccountForm: UntypedFormGroup;
+  /** Submitting state to prevent duplicate submissions. */
+  submitting = false;
   /** Chart of accounts data. */
   chartOfAccountsData: any;
   /** Account type data. */
@@ -166,24 +170,40 @@ export class CreateGlAccountComponent implements OnInit, AfterViewInit {
 
   /**
    * Submits the gl account form and creates gl account,
-   * if successful redirects to view created account.
+   * if successful redirects to view created account or back to list if awaiting approval.
    */
   submit() {
-    if (this.glAccountForm.invalid) {
+    if (this.glAccountForm.invalid || this.submitting) {
       return;
     }
-    this.accountingService.createGlAccount(this.glAccountForm.value).subscribe((response: any) => {
-      if (this.configurationWizardService.showChartofAccounts) {
-        this.configurationWizardService.showChartofAccounts = false;
-        this.openDialog();
-      } else {
-        this.router.navigate(
-          [
-            '../view',
-            response.resourceId
-          ],
-          { relativeTo: this.route }
-        );
+    this.submitting = true;
+    this.accountingService.createGlAccount(this.glAccountForm.value).subscribe({
+      next: (response: any) => {
+        if (response?.resourceId) {
+          if (this.configurationWizardService.showChartofAccounts) {
+            this.configurationWizardService.showChartofAccounts = false;
+            this.openDialog();
+          } else {
+            this.router.navigate(
+              [
+                '../view',
+                response.resourceId
+              ],
+              { relativeTo: this.route }
+            );
+          }
+        } else if (response?.rollbackTransaction) {
+          this.alertService.alert({
+            type: 'Success',
+            message: 'GL Account submitted successfully for approval.'
+          });
+          this.router.navigate([this.cancelRoute], { relativeTo: this.route });
+        } else {
+          this.router.navigate([this.cancelRoute], { relativeTo: this.route });
+        }
+      },
+      error: () => {
+        this.submitting = false;
       }
     });
   }

src/app/accounting/disabled-features.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { inject } from '@angular/core';
+import { Router, CanActivateFn } from '@angular/router';
+
+/**
+ * Accounting features switched off for this installation.
+ *
+ * Nothing is deleted — the components, routes and services all stay in place, and flipping a flag
+ * back to `false` brings the feature back with its tile and its route. The matching API block lives
+ * in DisabledFeatureApiFilter on the backend, so a hidden feature cannot be reached by calling the
+ * endpoint directly either.
+ */
+export const DISABLED_ACCOUNTING_FEATURES = {
+  createJournalEntries: true,
+  frequentPostings: true,
+  closingEntries: true,
+  accruals: true,
+  provisioningEntries: true,
+  accountingRules: true
+};
+
+/**
+ * Blocks a route belonging to a disabled feature, for anyone who reaches it by typing the URL
+ * rather than through a tile. `data.feature` names the flag to check.
+ */
+export const accountingFeatureEnabledGuard: CanActivateFn = (route) => {
+  const router = inject(Router);
+  const feature = route.data?.['feature'] as keyof typeof DISABLED_ACCOUNTING_FEATURES | undefined;
+
+  if (!feature || !DISABLED_ACCOUNTING_FEATURES[feature]) {
+    return true;
+  }
+
+  router.navigate(['/accounting'], { replaceUrl: true });
+  return false;
+};

src/app/accounting/migrate-cash-denomination/migrate-cash-denomination.component.html

@@ -0,0 +1,192 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="container mcd">
+  <!-- Step 1: which branch's vault is being counted. -->
+  <mat-card class="mcd-card">
+    <mat-card-content>
+      <div class="mcd-intro">
+        <mat-icon>inventory_2</mat-icon>
+        <span>
+          Count the branch's opening cash into notes and coins. If the Cash GL account has no balance yet, this count
+          defines it; if it already carries one, the count must match it exactly. Either way, this also opens the
+          branch's first business day with the same count.
+        </span>
+      </div>
+      <div class="mcd-row">
+        <mat-form-field class="mcd-office">
+          <mat-label>Branch</mat-label>
+          <mat-select required [(ngModel)]="officeId" (selectionChange)="onOfficeChange()">
+            @for (office of officeData; track office) {
+              <mat-option [value]="office.id">{{ office.name }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="mcd-field" (click)="datePicker.open()">
+          <mat-label>Business Date</mat-label>
+          <input matInput [max]="maxDate" [matDatepicker]="datePicker" [(ngModel)]="businessDate" readonly />
+          <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
+          <mat-datepicker #datePicker></mat-datepicker>
+        </mat-form-field>
+      </div>
+    </mat-card-content>
+  </mat-card>
+
+  @if (glLoading) {
+    <div class="mcd-loading">Checking the cash GL account…</div>
+  }
+
+  @if (glError) {
+    <div class="mcd-gl mcd-gl--error">
+      <mat-icon>error</mat-icon>
+      <div>{{ glError }}</div>
+    </div>
+  }
+
+  @if (glStatus && !glError) {
+    @if (todayAlreadyOpen) {
+      <!-- This screen is a one-time "day 1" tool - today's business day already exists, so counting
+           a drawer here would only be rejected at submit (BranchDayRegisterApiResource rejects
+           reopening an already-open day). Day Register is where every day after the first belongs. -->
+      <div class="mcd-gl mcd-gl--error">
+        <mat-icon>lock</mat-icon>
+        <div>
+          <div class="mcd-gl__label">Business Day Already Open</div>
+          <div class="mcd-gl__value">
+            {{ todayOpenInfo.businessDate }} — opened by {{ todayOpenInfo.openedByName }}, opening cash ₹{{
+              todayOpenInfo.openingCash | number: '1.2-2'
+            }}
+          </div>
+          <div class="mcd-gl__hint">
+            This branch has already opened today's business day — counting the drawer again here would only be rejected
+            on submit. Deposits, withdrawals and closing today's day happen from Day Register instead.
+          </div>
+          <button type="button" mat-stroked-button (click)="goToBranchDay()">Go to Day Register</button>
+        </div>
+      </div>
+    } @else {
+      <!-- Step 2: what the ledger already says, so the count is counted against something concrete. -->
+      <div class="mcd-gl" [class.mcd-gl--fresh]="!glHasBalance">
+        <mat-icon>account_balance</mat-icon>
+        <div>
+          <div class="mcd-gl__label">Cash GL Account</div>
+          <div class="mcd-gl__value">({{ glStatus.glCode }}) {{ glStatus.glAccountName }}</div>
+          @if (glHasBalance) {
+            <div class="mcd-gl__hint">
+              Already holds
+              <strong>₹{{ glTarget.toLocaleString('en-IN') }}</strong>
+              — count the drawer to exactly this amount.
+            </div>
+          } @else {
+            <div class="mcd-gl__hint">
+              No opening balance posted yet — whatever you count below becomes this account's opening balance.
+            </div>
+          }
+        </div>
+      </div>
+
+      <!-- Step 3: the actual count. -->
+      <mat-card class="mcd-card mcd-card--flush">
+        <mat-card-content>
+          <div class="mcd-grid mcd-grid--head">
+            <div class="mcd-grid__denom">Denomination</div>
+            <div class="mcd-grid__count">Count</div>
+            <div class="mcd-grid__amt">Amount</div>
+          </div>
+          @for (d of allDenoms; track d.id) {
+            <div class="mcd-grid mcd-grid--row">
+              <div class="mcd-grid__denom">
+                {{ d.label }} <span class="mcd-grid__kind">{{ d.kind }}</span>
+              </div>
+              <div class="mcd-grid__count">
+                <button type="button" mat-icon-button (click)="bumpCount(d, -1)"><mat-icon>remove</mat-icon></button>
+                <input
+                  type="number"
+                  min="0"
+                  class="mcd-grid__input"
+                  [style.width.ch]="countInputWidthCh(d)"
+                  [ngModel]="countFor(d)"
+                  (ngModelChange)="onCountChange(d, $event)"
+                />
+                <button type="button" mat-icon-button (click)="bumpCount(d, 1)"><mat-icon>add</mat-icon></button>
+              </div>
+              <div class="mcd-grid__amt">₹{{ subtotalFor(d).toLocaleString('en-IN') }}</div>
+            </div>
+          }
+        </mat-card-content>
+      </mat-card>
+
+      <!-- The one number that matters. -->
+      <div class="mcd-balance" [class.mcd-balance--ok]="isReconciled">
+        <div class="mcd-balance__figure">
+          <span class="mcd-balance__label">Counted Total</span>
+          <span class="mcd-balance__amt">₹{{ countedTotal.toLocaleString('en-IN') }}</span>
+        </div>
+        @if (glHasBalance) {
+          <div class="mcd-balance__figure">
+            <span class="mcd-balance__label">GL Target</span>
+            <span class="mcd-balance__amt">₹{{ glTarget.toLocaleString('en-IN') }}</span>
+          </div>
+        }
+        <div class="mcd-balance__status">
+          @if (countedTotal <= 0) {
+            <mat-icon>edit_note</mat-icon>
+            <span>Count each denomination above</span>
+          } @else if (isReconciled) {
+            <mat-icon>check_circle</mat-icon>
+            <span>{{ glHasBalance ? 'Matches the GL balance' : 'Will define the GL opening balance' }}</span>
+          } @else {
+            <mat-icon>error</mat-icon>
+            <span
+              >Off by ₹{{
+                (countedTotal - glTarget < 0 ? glTarget - countedTotal : countedTotal - glTarget).toLocaleString(
+                  'en-IN'
+                )
+              }}</span
+            >
+          }
+        </div>
+      </div>
+
+      @if (needsDifferenceReason) {
+        <mat-card class="mcd-card">
+          <mat-card-content>
+            <mat-form-field class="mcd-reason">
+              <mat-label>Why does the count differ from the GL balance?</mat-label>
+              <input matInput [(ngModel)]="differenceReason" />
+            </mat-form-field>
+          </mat-card-content>
+        </mat-card>
+      }
+
+      @if (errorMsg) {
+        <div class="mcd-error">{{ errorMsg }}</div>
+      }
+
+      @if (successMsg) {
+        <div class="mcd-success">
+          <mat-icon>check_circle</mat-icon>
+          <div>
+            {{ successMsg }}
+            <div class="mcd-success__actions">
+              <button type="button" mat-stroked-button (click)="goToBranchDay()">Go to Day Register</button>
+            </div>
+          </div>
+        </div>
+      }
+
+      @if (!successMsg) {
+        <div class="mcd-actions">
+          <button mat-raised-button color="primary" [disabled]="!canSubmit" (click)="submit()">
+            {{ submitting ? 'Submitting…' : 'Migrate & Open Business Day' }}
+          </button>
+        </div>
+      }
+    }
+  }
+</div>

src/app/accounting/migrate-cash-denomination/migrate-cash-denomination.component.scss

@@ -0,0 +1,316 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+.mcd {
+  max-width: 760px;
+}
+
+.mcd-card {
+  margin-bottom: 14px;
+  border-radius: 8px;
+
+  &--flush mat-card-content {
+    padding: 0;
+  }
+}
+
+.mcd-intro {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 14px;
+  margin-bottom: 14px;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 8px;
+  color: #1e40af;
+  font-size: 12px;
+  line-height: 1.5;
+
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    flex: none;
+  }
+}
+
+.mcd-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.mcd-office {
+  flex: 1 1 280px;
+}
+
+.mcd-field {
+  flex: 1 1 200px;
+}
+
+.mcd-loading {
+  padding: 10px 14px;
+  margin-bottom: 14px;
+  font-size: 12px;
+  color: #64748b;
+}
+
+.mcd-gl {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 14px;
+  margin-bottom: 16px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-left: 4px solid #0ea5e9;
+  border-radius: 8px;
+
+  mat-icon {
+    color: #0ea5e9;
+    margin-top: 2px;
+  }
+
+  &--fresh {
+    border-left-color: #f59e0b;
+
+    mat-icon {
+      color: #f59e0b;
+    }
+  }
+
+  &--error {
+    border-left-color: #dc2626;
+    background: #fef2f2;
+
+    mat-icon {
+      color: #dc2626;
+    }
+  }
+
+  &__label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    color: #64748b;
+  }
+
+  &__value {
+    font-size: 13px;
+    font-weight: 600;
+    color: #0d1b2a;
+    margin: 2px 0 4px;
+  }
+
+  &__hint {
+    font-size: 11.5px;
+    color: #64748b;
+    line-height: 1.4;
+  }
+
+  button {
+    margin-top: 10px;
+  }
+}
+
+.mcd-grid {
+  display: grid;
+  grid-template-columns: 1fr 160px 120px;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+
+  &--head {
+    background: #f8fafc;
+    border-bottom: 1px solid #e2e8f0;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    color: #64748b;
+  }
+
+  &--row {
+    border-bottom: 1px solid #f1f5f9;
+  }
+
+  &__denom {
+    font-size: 13px;
+    font-weight: 600;
+    color: #0d1b2a;
+  }
+
+  &__kind {
+    font-size: 10px;
+    font-weight: 500;
+    color: #94a3b8;
+    margin-left: 6px;
+    text-transform: uppercase;
+  }
+
+  &__count {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+
+    button {
+      width: 28px;
+      height: 28px;
+      line-height: 28px;
+
+      mat-icon {
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  &__input {
+    /* Width is set inline per row (see countInputWidthCh()), growing with the digit count typed —
+       min-width here only covers the fallback before Angular has bound anything. */
+    min-width: 48px;
+    max-width: 96px;
+    transition: width 0.1s ease-out;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+    padding: 4px 2px;
+    font-size: 13px;
+  }
+
+  &__amt {
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+    font-size: 13px;
+    text-align: right;
+    color: #0d1b2a;
+  }
+}
+
+.mcd-balance {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-wrap: wrap;
+  padding: 12px 16px;
+  margin-bottom: 14px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-left: 4px solid #dc2626;
+  border-radius: 8px;
+
+  &--ok {
+    background: #f0fdf4;
+    border-color: #bbf7d0;
+    border-left-color: #16a34a;
+  }
+
+  &__figure {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    color: #64748b;
+  }
+
+  &__amt {
+    font-variant-numeric: tabular-nums;
+    font-weight: 700;
+    font-size: 16px;
+    white-space: nowrap;
+    color: #0d1b2a;
+  }
+
+  &__status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+    font-size: 13px;
+    font-weight: 600;
+    color: #b91c1c;
+
+    mat-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &--ok &__status {
+    color: #15803d;
+  }
+}
+
+.mcd-reason {
+  width: 100%;
+}
+
+.mcd-error {
+  padding: 10px 14px;
+  margin-bottom: 14px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  color: #b91c1c;
+  font-size: 12.5px;
+}
+
+.mcd-success {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 14px 16px;
+  margin-bottom: 14px;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 8px;
+  color: #14532d;
+  font-size: 13px;
+
+  mat-icon {
+    color: #16a34a;
+    margin-top: 1px;
+  }
+
+  &__actions {
+    margin-top: 10px;
+  }
+}
+
+.mcd-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 24px;
+}
+
+@media (width <= 560px) {
+  .mcd-grid {
+    grid-template-columns: 1fr auto;
+    row-gap: 4px;
+
+    &--head {
+      display: none;
+    }
+
+    &__amt {
+      grid-column: 1 / -1;
+      text-align: left;
+    }
+  }
+}

src/app/accounting/migrate-cash-denomination/migrate-cash-denomination.component.ts

@@ -0,0 +1,262 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { ActivatedRoute, Router } from '@angular/router';
+import { catchError, of } from 'rxjs';
+import { CashierService } from '../../cashier/cashier.service';
+import { SettingsService } from 'app/settings/settings.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+interface Denom {
+  id: number;
+  value: number;
+  kind: 'note' | 'coin';
+  label: string;
+}
+
+/**
+ * Migrate Cash Denomination — the vault-side counterpart to Migrate Opening Balances.
+ *
+ * A freshly set-up institution's chart of accounts carries a "Cash at Vault" GL balance (defined via
+ * Migrate Opening Balances, or not yet defined at all), but that figure is meaningless to a cashier
+ * standing at the drawer until it is broken into actual notes and coins, and the branch has nowhere
+ * to track that breakdown until its first business day is open. This screen is the one place both of
+ * those happen together: count the drawer, and it either defines the cash GL's opening balance from
+ * that count (nothing posted to it yet) or checks the count against what is already posted, then
+ * opens the business day with that same breakdown - so a new bank goes from "GL seeded" straight to
+ * "vault countable" without a separate trip through Manage Tellers or Open Business Day first.
+ */
+@Component({
+  selector: 'mifosx-migrate-cash-denomination',
+  templateUrl: './migrate-cash-denomination.component.html',
+  styleUrls: ['./migrate-cash-denomination.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIconModule,
+    ...STANDALONE_SHARED_IMPORTS
+  ]
+})
+export class MigrateCashDenominationComponent implements OnInit {
+  private service = inject(CashierService);
+  private settingsService = inject(SettingsService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
+  officeData: any[] = [];
+  officeId: number | null = null;
+  /** Bound to the datepicker as a Date, converted to a strict yyyy-MM-dd string only when
+   *  submitting — the branchday endpoints parse this with LocalDate.parse() directly, with no
+   *  locale/dateFormat hint alongside it, so a locale-formatted string (what dateUtils.formatDate
+   *  produces) is rejected outright. */
+  businessDate: Date = new Date();
+  maxDate = new Date();
+
+  glLoading = false;
+  glStatus: any = null;
+  glError = '';
+
+  /** Set once per office change: whether TODAY's business day is already open for this office. This
+   *  screen is a one-time "day 1" tool (see the class doc) - once a day has actually been opened,
+   *  reopening the same one is exactly what BranchDayRegisterApiResource#migrateCashDenomination
+   *  itself refuses (its own openDayInternal call rejects a day that is already open), so this is
+   *  checked here too, before the user counts an entire drawer only to have the submit rejected. */
+  todayAlreadyOpen = false;
+  todayOpenInfo: any = null;
+
+  notes: Denom[] = [];
+  coins: Denom[] = [];
+  counts: Record<number, number> = {};
+
+  submitting = false;
+  errorMsg = '';
+  successMsg = '';
+  result: any = null;
+
+  /** Only asked for when the counted total disagrees with an already-posted GL balance — mirrors
+   *  the same "explain the gap" gate Open Business Day applies. */
+  differenceReason = '';
+
+  get allDenoms(): Denom[] {
+    return [
+      ...this.notes,
+      ...this.coins
+    ];
+  }
+
+  ngOnInit(): void {
+    this.maxDate = this.settingsService.businessDate;
+    this.businessDate = this.maxDate;
+
+    this.route.data.subscribe((data: { offices: any }) => {
+      this.officeData = data.offices || [];
+    });
+
+    this.service.getActiveDenominations().subscribe({
+      next: (list) => {
+        const rows: Denom[] = (list || []).map((x: any) => ({
+          id: x.id,
+          value: x.denomination,
+          kind: x.kind,
+          label: '₹' + x.denomination
+        }));
+        this.notes = rows.filter((r) => r.kind === 'note').sort((a, b) => b.value - a.value);
+        this.coins = rows.filter((r) => r.kind === 'coin').sort((a, b) => b.value - a.value);
+      },
+      error: () => {
+        this.notes = [];
+        this.coins = [];
+      }
+    });
+  }
+
+  onOfficeChange(): void {
+    this.glStatus = null;
+    this.glError = '';
+    this.result = null;
+    this.successMsg = '';
+    this.errorMsg = '';
+    this.todayAlreadyOpen = false;
+    this.todayOpenInfo = null;
+    if (!this.officeId) return;
+
+    this.glLoading = true;
+    this.service
+      .cashGlStatus(this.officeId)
+      .pipe(catchError(() => of(null)))
+      .subscribe((res: any) => {
+        this.glLoading = false;
+        this.glStatus = res;
+        if (res && res.configured === false) {
+          this.glError = res.message || 'No cash GL account is configured for this tenant yet.';
+        }
+      });
+
+    this.service
+      .branchDayRegister(this.officeId)
+      .pipe(catchError(() => of(null)))
+      .subscribe((res: any) => {
+        const openDay = res?.openDay;
+        this.todayAlreadyOpen = !!openDay && openDay.businessDate === res?.today;
+        this.todayOpenInfo = this.todayAlreadyOpen ? openDay : null;
+      });
+  }
+
+  countFor(d: Denom): number {
+    return this.counts[d.id] || 0;
+  }
+
+  subtotalFor(d: Denom): number {
+    return this.countFor(d) * d.value;
+  }
+
+  onCountChange(d: Denom, raw: any): void {
+    this.counts[d.id] = Math.max(0, Math.floor(Number(raw) || 0));
+  }
+
+  bumpCount(d: Denom, delta: number): void {
+    this.counts[d.id] = Math.max(0, (this.counts[d.id] || 0) + delta);
+  }
+
+  /** Widens the count box as the typed count grows more digits, so a large count (hundreds,
+   *  thousands) is never clipped or hard to read inside a field sized for one or two digits. */
+  countInputWidthCh(d: Denom): number {
+    return Math.max(3, String(this.countFor(d)).length + 2);
+  }
+
+  get countedTotal(): number {
+    return this.allDenoms.reduce((s, d) => s + this.subtotalFor(d), 0);
+  }
+
+  /** Whether this office's GL already carries a balance the count has to match, vs. an empty
+   *  account the count itself will define. */
+  get glHasBalance(): boolean {
+    return !!this.glStatus?.hasBalance;
+  }
+
+  get glTarget(): number {
+    return Number(this.glStatus?.currentBalance ?? 0);
+  }
+
+  get isReconciled(): boolean {
+    if (!this.glStatus || this.glStatus.configured === false) return false;
+    if (this.countedTotal <= 0) return false;
+    return !this.glHasBalance || this.countedTotal === this.glTarget;
+  }
+
+  get needsDifferenceReason(): boolean {
+    return (
+      this.glHasBalance && this.countedTotal > 0 && this.countedTotal !== this.glTarget && !this.differenceReason.trim()
+    );
+  }
+
+  get canSubmit(): boolean {
+    return (
+      !!this.officeId &&
+      !!this.businessDate &&
+      !this.glError &&
+      this.countedTotal > 0 &&
+      !this.needsDifferenceReason &&
+      !this.submitting
+    );
+  }
+
+  private denominationPayload() {
+    return this.allDenoms
+      .filter((d) => this.countFor(d) > 0)
+      .map((d) => ({ denominationId: d.id, denominationValue: d.value, count: this.countFor(d) }));
+  }
+
+  /** Strict yyyy-MM-dd, independent of the viewer's locale/date-format setting — see the comment on
+   *  `businessDate` for why this can't go through dateUtils.formatDate(). */
+  private toIsoDate(d: Date): string {
+    const pad = (n: number) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+  }
+
+  submit(): void {
+    if (!this.canSubmit || !this.officeId) return;
+    this.submitting = true;
+    this.errorMsg = '';
+    this.successMsg = '';
+    this.service
+      .migrateCashDenomination(
+        this.officeId,
+        this.toIsoDate(this.businessDate),
+        this.denominationPayload(),
+        this.differenceReason.trim() || undefined
+      )
+      .pipe(
+        catchError((err: any) => {
+          this.errorMsg =
+            err?.error?.errors?.[0]?.defaultUserMessage ??
+            err?.error?.message ??
+            'Could not migrate cash denomination.';
+          return of(null);
+        })
+      )
+      .subscribe((res: any) => {
+        this.submitting = false;
+        if (res) {
+          this.result = res;
+          this.successMsg = res.glOpeningBalancePosted
+            ? `Cash GL opening balance defined at ₹${this.countedTotal.toLocaleString('en-IN')} and business day ${res.businessDate} opened.`
+            : `Business day ${res.businessDate} opened — count matched the existing GL balance.`;
+        }
+      });
+  }
+
+  goToBranchDay(): void {
+    this.router.navigate(['/branch-ops/day-register']);
+  }
+}

src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html

@@ -6,48 +6,67 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<!-- TODO: Responsiveness/design enhancement and reduction in form loading time -->
-<div class="container">
-  <mat-card>
-    <form [formGroup]="openingBalancesForm" (ngSubmit)="submit()">
+<div class="container mob">
+  <form [formGroup]="openingBalancesForm" (ngSubmit)="submit()">
+    <!-- Step 1: pick the branch whose old books are being carried into this GL. -->
+    <mat-card class="mob-card">
       <mat-card-content>
-        <div #searchFormRef class="layout-row-wrap responsive-column gap-2px">
-          <div class="m-r-30 flex-83">
-            <mat-form-field class="flex-96">
-              <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
-              <mat-select required formControlName="officeId">
-                @for (office of officeData; track office) {
-                  <mat-option [value]="office.id">
-                    {{ office.name }}
-                  </mat-option>
-                }
-              </mat-select>
-              @if (openingBalancesForm.controls.officeId.hasError('required')) {
-                <mat-error>
-                  {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-                  <strong>{{ 'labels.commons.required' | translate }}</strong>
-                </mat-error>
-              }
-            </mat-form-field>
-          </div>
-
-          <div class="flex-15">
-            <button mat-raised-button color="primary" (click)="retrieveOpeningBalances()">
-              {{ 'labels.buttons.Retrieve' | translate }}
-            </button>
-          </div>
+        <div class="mob-intro">
+          <mat-icon>info</mat-icon>
+          <span>
+            Bring a branch's existing balances into this system's ledger, one time, as a single balanced entry against
+            the Opening Balances Contra account below.
+          </span>
         </div>
+        <div #searchFormRef class="mob-row">
+          <mat-form-field class="mob-office">
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
+            <mat-select required formControlName="officeId">
+              @for (office of officeData; track office) {
+                <mat-option [value]="office.id">
+                  {{ office.name }}
+                </mat-option>
+              }
+            </mat-select>
+            @if (openingBalancesForm.controls.officeId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
+          </mat-form-field>
+          <button
+            type="button"
+            mat-raised-button
+            color="primary"
+            [disabled]="!openingBalancesForm.controls.officeId.value"
+            (click)="retrieveOpeningBalances()"
+          >
+            {{ 'labels.buttons.Retrieve' | translate }}
+          </button>
+        </div>
+      </mat-card-content>
+    </mat-card>
 
-        @if (openingBalancesData) {
-          <div class="layout-row-wrap gap-2percent responsive-column">
-            <mifosx-gl-account-display
-              class="flex-100"
-              [accountTitle]="'Opening Balances Contra Account'"
-              [glAccount]="openingBalancesData.contraAccount"
-              [withTitle]="'50%'"
-            >
-            </mifosx-gl-account-display>
-            <mat-form-field class="flex-48">
+    @if (openingBalancesData) {
+      <!-- Step 2: the contra account this entry balances against, plus currency and date. -->
+      <mat-card class="mob-card">
+        <mat-card-content>
+          <div class="mob-contra">
+            <mat-icon>account_balance</mat-icon>
+            <div>
+              <div class="mob-contra__label">Opening Balances Contra Account</div>
+              <div class="mob-contra__value">
+                <mifosx-gl-account-display [glAccount]="openingBalancesData.contraAccount"></mifosx-gl-account-display>
+              </div>
+              <div class="mob-contra__hint">
+                Every debit and credit below posts against this one account, so the whole entry always balances to zero.
+              </div>
+            </div>
+          </div>
+
+          <div class="mob-row">
+            <mat-form-field class="mob-field">
               <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
               <mat-select required formControlName="currencyCode">
                 @for (currency of currencyData; track currency) {
@@ -63,7 +82,7 @@
                 </mat-error>
               }
             </mat-form-field>
-            <mat-form-field class="flex-48" (click)="openingBalancesDatePicker.open()">
+            <mat-form-field class="mob-field" (click)="openingBalancesDatePicker.open()">
               <mat-label>{{ 'labels.inputs.Opening Balances Date' | translate }}</mat-label>
               <input
                 matInput
@@ -82,79 +101,114 @@
                 </mat-error>
               }
             </mat-form-field>
-            <div class="layout-row-wrap gap-2percent responsive-column flex-100 content">
-              <div class="header flex-8">
-                {{ 'labels.inputs.Type' | translate }}
-              </div>
-              <div class="header flex-18">
-                {{ 'labels.inputs.GL Code' | translate }}
-              </div>
-              <div class="header flex-18">
-                {{ 'labels.inputs.GL Name' | translate }}
-                {{ 'labels.inputs.Account' | translate }}
-              </div>
-              <div class="header r-amount flex-18">
-                {{ 'labels.inputs.Total Debit' | translate }}:
-                {{ debitsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
-              </div>
-              <div class="header r-amount flex-23">
-                {{ 'labels.inputs.Total Credit' | translate }}:
-                {{ creditsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
-              </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+
+      <!-- The one number that matters: does the sheet balance yet. Pinned above the entry grid so it
+           never has to be scrolled to. -->
+      <div class="mob-balance" [class.mob-balance--ok]="debitsSum === creditsSum && debitsSum > 0">
+        <div class="mob-balance__figure">
+          <span class="mob-balance__label">{{ 'labels.inputs.Total Debit' | translate }}</span>
+          <span class="mob-balance__amt mob-balance__amt--dr">{{
+            debitsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2'
+          }}</span>
+        </div>
+        <div class="mob-balance__figure">
+          <span class="mob-balance__label">{{ 'labels.inputs.Total Credit' | translate }}</span>
+          <span class="mob-balance__amt mob-balance__amt--cr">{{
+            creditsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2'
+          }}</span>
+        </div>
+        <div class="mob-balance__status">
+          @if (debitsSum === creditsSum && debitsSum > 0) {
+            <mat-icon>check_circle</mat-icon>
+            <span>Balanced — ready to submit</span>
+          } @else if (debitsSum === 0 && creditsSum === 0) {
+            <mat-icon>edit_note</mat-icon>
+            <span>Enter each account's opening balance below</span>
+          } @else {
+            <mat-icon>error</mat-icon>
+            <span
+              >Out of balance by {{ debitsSum - creditsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}</span
+            >
+          }
+        </div>
+      </div>
+
+      <!-- Step 3: one row per GL account, grouped by account type, debit on one side and credit on
+           the other — a debit balance goes in the Debit box, a credit balance in the Credit box,
+           never both. -->
+      <mat-card class="mob-card mob-card--flush">
+        <mat-card-content>
+          <div class="mob-grid mob-grid--head">
+            <div class="mob-grid__code">{{ 'labels.inputs.GL Code' | translate }}</div>
+            <div class="mob-grid__name">
+              {{ 'labels.inputs.GL Name' | translate }} {{ 'labels.inputs.Account' | translate }}
             </div>
-            @for (credit of glAccountEntries.controls; track credit; let i = $index) {
-              <div class="flex-fill layout-row-wrap responsive-column content" formArrayName="glAccountEntries">
-                <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
-                  <div class="flex-8">
-                    {{
-                      openingBalancesData.glAccounts[i].glAccountType.value !==
-                      openingBalancesData.glAccounts[i - 1]?.glAccountType.value
-                        ? glAccountTypeLabel(openingBalancesData.glAccounts[i].glAccountType.value)
-                        : ''
-                    }}
-                  </div>
-                  <div class="flex-13">
-                    {{ openingBalancesData.glAccounts[i].glAccountCode }}
-                  </div>
-                  <div class="flex-29">
-                    {{ openingBalancesData.glAccounts[i].glAccountName }}
-                  </div>
-                  <div class="flex-20">
-                    <mat-form-field>
-                      <mat-label>{{ 'labels.inputs.Debit' | translate }}</mat-label>
-                      <input matInput type="number" formControlName="debit" />
-                    </mat-form-field>
-                  </div>
-                  <div class="flex-20">
-                    <mat-form-field>
-                      <mat-label>{{ 'labels.inputs.Credit' | translate }}</mat-label>
-                      <input matInput type="number" formControlName="credit" />
-                    </mat-form-field>
-                  </div>
-                </div>
+            <div class="mob-grid__amt">{{ 'labels.inputs.Debit' | translate }}</div>
+            <div class="mob-grid__amt">{{ 'labels.inputs.Credit' | translate }}</div>
+          </div>
+
+          @for (credit of glAccountEntries.controls; track credit; let i = $index) {
+            @if (
+              openingBalancesData.glAccounts[i].glAccountType.value !==
+              openingBalancesData.glAccounts[i - 1]?.glAccountType.value
+            ) {
+              <div class="mob-grid__section">
+                {{ glAccountTypeLabel(openingBalancesData.glAccounts[i].glAccountType.value) }}
               </div>
             }
-          </div>
-        }
-      </mat-card-content>
+            <div class="mob-grid mob-grid--data" formArrayName="glAccountEntries">
+              <div class="mob-grid__row" [formGroupName]="i">
+                <div class="mob-grid__code">{{ openingBalancesData.glAccounts[i].glAccountCode }}</div>
+                <div class="mob-grid__name">
+                  {{ openingBalancesData.glAccounts[i].glAccountName }}
+                  @if (isDenominationManaged(openingBalancesData.glAccounts[i].glAccountId)) {
+                    <span
+                      class="mob-grid__lock"
+                      matTooltip="Set by Migrate Cash Denomination — use that screen to change it"
+                    >
+                      <mat-icon inline="true">lock</mat-icon>
+                      <a [routerLink]="['/accounting/migrate-cash-denomination']">Migrate Cash Denomination</a>
+                    </span>
+                  }
+                </div>
+                <div class="mob-grid__amt">
+                  <mat-form-field class="mob-grid__input">
+                    <input matInput type="number" min="0" formControlName="debit" placeholder="0.00" />
+                  </mat-form-field>
+                </div>
+                <div class="mob-grid__amt">
+                  <mat-form-field class="mob-grid__input">
+                    <input matInput type="number" min="0" formControlName="credit" placeholder="0.00" />
+                  </mat-form-field>
+                </div>
+              </div>
+            </div>
+          }
+        </mat-card-content>
+      </mat-card>
 
-      @if (openingBalancesData) {
-        <mat-card-actions class="layout-row gap-5px align-center responsive-column">
-          <button type="button" mat-raised-button [routerLink]="['../']">
-            {{ 'labels.buttons.Cancel' | translate }}
-          </button>
-          <button
-            mat-raised-button
-            color="primary"
-            [disabled]="!openingBalancesForm.valid"
-            *mifosxHasPermission="'DEFINEOPENINGBALANCE_JOURNALENTRY'"
-          >
-            {{ 'labels.buttons.Submit' | translate }}
-          </button>
-        </mat-card-actions>
-      }
-    </form>
-  </mat-card>
+      <div class="mob-actions">
+        <button type="button" mat-stroked-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <span class="mob-actions__spacer"></span>
+        @if (!(debitsSum === creditsSum && debitsSum > 0)) {
+          <span class="mob-actions__hint">Total Debit must equal Total Credit before this can be submitted</span>
+        }
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!openingBalancesForm.valid || !(debitsSum === creditsSum && debitsSum > 0)"
+          *mifosxHasPermission="'DEFINEOPENINGBALANCE_JOURNALENTRY'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
+      </div>
+    }
+  </form>
 </div>
 
 <ng-template #templateSearchFormRef let-popover="popover">

src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.scss

@@ -6,14 +6,326 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-.content {
-  padding-top: 20px;
+.mob {
+  max-width: 960px;
+}
 
-  div {
-    word-wrap: break-word;
+.mob-card {
+  margin-bottom: 14px;
+  border-radius: 8px;
 
-    &.header {
-      font-weight: 500;
+  &--flush mat-card-content {
+    padding: 0;
+  }
+}
+
+.mob-intro {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 14px;
+  margin-bottom: 14px;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 8px;
+  color: #1e40af;
+  font-size: 12px;
+  line-height: 1.5;
+
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    flex: none;
+  }
+}
+
+.mob-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.mob-office {
+  flex: 1 1 320px;
+}
+
+.mob-field {
+  flex: 1 1 240px;
+}
+
+.mob-contra {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 14px;
+  margin-bottom: 16px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-left: 4px solid #0ea5e9;
+  border-radius: 8px;
+
+  mat-icon {
+    color: #0ea5e9;
+    margin-top: 2px;
+  }
+
+  &__label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    color: #64748b;
+  }
+
+  &__value {
+    font-size: 13px;
+    font-weight: 600;
+    color: #0d1b2a;
+    margin: 2px 0 4px;
+  }
+
+  &__hint {
+    font-size: 11px;
+    color: #64748b;
+    line-height: 1.4;
+  }
+}
+
+/* The one figure that decides whether this can be submitted — kept visually separate from the
+   cards around it so it reads as a status, not just another form section. */
+.mob-balance {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-wrap: wrap;
+  padding: 12px 16px;
+  margin-bottom: 14px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-left: 4px solid #dc2626;
+  border-radius: 8px;
+
+  &--ok {
+    background: #f0fdf4;
+    border-color: #bbf7d0;
+    border-left-color: #16a34a;
+  }
+
+  &__figure {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    color: #64748b;
+  }
+
+  &__amt {
+    font-variant-numeric: tabular-nums;
+    font-weight: 700;
+    font-size: 16px;
+    white-space: nowrap;
+
+    &--dr {
+      color: #b91c1c;
+    }
+
+    &--cr {
+      color: #15803d;
+    }
+  }
+
+  &__status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+    font-size: 13px;
+    font-weight: 600;
+    color: #b91c1c;
+
+    mat-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &--ok &__status {
+    color: #15803d;
+  }
+}
+
+/* Account entry grid: a header row, a section label per account type, then one row per account. */
+.mob-grid {
+  display: grid;
+  grid-template-columns: 90px 1fr 160px 160px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 14px;
+
+  &--head {
+    padding: 12px 14px;
+    background: #f8fafc;
+    border-bottom: 1px solid #e2e8f0;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    color: #64748b;
+  }
+
+  &__section {
+    padding: 8px 14px 4px;
+    margin-top: 6px;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #0ea5e9;
+    border-top: 1px solid #e2e8f0;
+
+    &:first-of-type {
+      border-top: none;
+      margin-top: 0;
+    }
+  }
+
+  &--data {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    border-bottom: 1px solid #f1f5f9;
+  }
+
+  &__row {
+    display: contents;
+  }
+
+  &__code {
+    font-variant-numeric: tabular-nums;
+    font-size: 12px;
+    color: #64748b;
+  }
+
+  &__name {
+    font-size: 13px;
+    color: #0d1b2a;
+    word-break: break-word;
+  }
+
+  /* Cash at Vault / Cash at Teller — locked, see MigrateOpeningBalancesComponent.isDenominationManaged. */
+  &__lock {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 8px;
+    padding: 1px 8px 1px 6px;
+    border-radius: 999px;
+    background: #fff7ed;
+    color: #9a3412;
+    font-size: 11px;
+    font-weight: 600;
+    white-space: nowrap;
+    vertical-align: middle;
+
+    mat-icon {
+      font-size: 13px;
+      width: 13px;
+      height: 13px;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
+
+  &__amt {
+    text-align: right;
+  }
+
+  &__input {
+    width: 100%;
+
+    ::ng-deep .mat-mdc-form-field-infix {
+      padding-top: 10px;
+      padding-bottom: 10px;
+      min-height: unset;
+    }
+
+    ::ng-deep .mat-mdc-text-field-wrapper {
+      padding: 0 8px;
+    }
+
+    input {
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+    }
+  }
+}
+
+.mob-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 16px;
+  padding-bottom: 24px;
+}
+
+.mob-actions__spacer {
+  flex: 1 1 auto;
+}
+
+.mob-actions__hint {
+  font-size: 12px;
+  color: #b91c1c;
+}
+
+@media (width <= 640px) {
+  .mob-grid {
+    grid-template-columns: 70px 1fr;
+    row-gap: 4px;
+
+    &--head {
+      display: none;
+    }
+
+    &__row {
+      display: grid;
+      grid-template-columns: 70px 1fr;
+      grid-template-areas:
+        'code name'
+        'debit debit'
+        'credit credit';
+      gap: 4px;
+      padding: 10px 0;
+      border-bottom: 1px solid #f1f5f9;
+    }
+
+    &__code {
+      grid-area: code;
+    }
+
+    &__name {
+      grid-area: name;
+    }
+
+    &__amt:nth-of-type(1) {
+      grid-area: debit;
+    }
+
+    &__amt:nth-of-type(2) {
+      grid-area: credit;
+    }
+
+    &__amt {
+      text-align: left;
     }
   }
 }

src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.ts

@@ -16,6 +16,8 @@ import {
   ReactiveFormsModule
 } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 /** Custom Services */
 import { AccountingService } from '../accounting.service';
@@ -41,7 +43,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     GlAccountDisplayComponent,
-    CurrencyPipe
+    CurrencyPipe,
+    MatIconModule,
+    MatTooltipModule
   ]
 })
 export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
@@ -72,6 +76,13 @@ export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
   debitsSum = 0;
   /** Sum total of credits. */
   creditsSum = 0;
+  /** GL account ids mapped to Financial Activity 101 (Cash at Vault) / 102 (Cash at Teller) — the
+   *  account(s) Migrate Cash Denomination owns. Their opening balance is shown here for visibility
+   *  but locked against editing: redefining it as a bare number here, instead of through a counted
+   *  denomination breakdown, would let the GL figure drift away from what is physically in the till.
+   *  The backend enforces the same rule independently (see defineOpeningBalance's
+   *  validateNoDenominationManagedCashAccounts) — this is a convenience, not the source of truth. */
+  denominationManagedGlAccountIds: number[] = [];
 
   /* Reference of search form */
   @ViewChild('searchFormRef') searchFormRef: ElementRef<any>;
@@ -93,6 +104,22 @@ export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
       this.officeData = data.offices;
       this.currencyData = data.currencies.selectedCurrencyOptions;
     });
+    // Office-independent: which GL account(s) this tenant has mapped to Cash at Vault / Cash at
+    // Teller, so their row can be locked the moment the office's accounts are drawn.
+    this.accountingService.getFinancialActivityAccounts().subscribe((mappings: any[]) => {
+      this.denominationManagedGlAccountIds = (mappings || [])
+        .filter((mapping) => mapping.financialActivityData?.id === 101 || mapping.financialActivityData?.id === 102)
+        .map((mapping) => mapping.glAccountData?.id)
+        .filter((id) => id != null);
+      // Retrieve may already have run before this (fast) request came back — lock any row it
+      // missed rather than leaving it editable for the rest of this visit.
+      this.glAccountEntries?.controls.forEach((control) => {
+        const glAccountId = control.get('glAccountId')?.value;
+        if (this.isDenominationManaged(glAccountId) && control.enabled) {
+          control.disable();
+        }
+      });
+    });
   }
 
   /**
@@ -134,14 +161,31 @@ export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
    * @returns {FormGroup} GL Account entry form.
    */
   createGLAccountEntryForm(glAccount: any): UntypedFormGroup {
-    return this.formBuilder.group(
+    // A never-touched account arrives as a placeholder row (amount/entryType both null); one that
+    // already carries an opening balance arrives with its real, committed figure — show that
+    // instead of leaving the field looking blank.
+    const existingDebit = glAccount.entryType?.value === 'DEBIT' ? glAccount.amount : null;
+    const existingCredit = glAccount.entryType?.value === 'CREDIT' ? glAccount.amount : null;
+    const group = this.formBuilder.group(
       {
         glAccountId: [glAccount.glAccountId],
-        debit: [null],
-        credit: [null]
+        debit: [existingDebit],
+        credit: [existingCredit]
       },
       { validator: onlyOneOfTheFieldsIsRequiredValidator }
     );
+    if (this.isDenominationManaged(glAccount.glAccountId)) {
+      // Disabling excludes this row from the form's own .value, so it is never resubmitted here —
+      // the account keeps whatever Migrate Cash Denomination last set it to.
+      group.disable();
+    }
+    return group;
+  }
+
+  /** Whether this GL account is Cash at Vault / Cash at Teller — locked here, see
+   *  denominationManagedGlAccountIds. */
+  isDenominationManaged(glAccountId: number): boolean {
+    return this.denominationManagedGlAccountIds.includes(glAccountId);
   }
 
   /**
@@ -174,17 +218,30 @@ export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
 
         this.openingBalancesData = openingBalancesData;
 
-        entry.valueChanges.subscribe(() => {
-          this.debitsSum = 0;
-          this.creditsSum = 0;
-          entry.controls.forEach((value) => {
-            this.debitsSum += value.value.debit;
-            this.creditsSum += value.value.credit;
-          });
-        });
+        entry.valueChanges.subscribe(() => this.recomputeSums());
+        // Runs once immediately too: valueChanges only fires on a later edit, and the locked cash
+        // row's own prefilled figure (set once, above, never through a further value change) would
+        // otherwise never be reflected in the banner at all.
+        this.recomputeSums();
       });
   }
 
+  /** Total Debit / Total Credit shown in the balance banner. A locked (denomination-managed) row is
+   *  excluded here exactly as it is excluded from the form's own .value used at submit time — this
+   *  screen only needs to balance the accounts it is itself about to (re)define, not the one
+   *  Migrate Cash Denomination already settled and this form can never touch. */
+  private recomputeSums(): void {
+    this.debitsSum = 0;
+    this.creditsSum = 0;
+    this.glAccountEntries.controls.forEach((control) => {
+      if (control.disabled) {
+        return;
+      }
+      this.debitsSum += control.value.debit || 0;
+      this.creditsSum += control.value.credit || 0;
+    });
+  }
+
   /**
    * Submits the opening balances form and defines opening balances,
    * if successful redirects to view created transaction.

src/app/accounting/search-journal-entry/search-journal-entry.component.html

@@ -53,10 +53,13 @@
         <fa-icon icon="sync" [class.fa-spin]="ledgerLoading"></fa-icon>
         Refresh
       </button>
-      <button class="gl-hero-btn gl-hero-btn--primary" [routerLink]="['/accounting/journal-entries/create']">
-        <fa-icon icon="plus"></fa-icon>
-        New Entry
-      </button>
+      <!-- New Entry — hidden while Create Journal Entries is disabled, see disabled-features.ts -->
+      @if (!disabledFeatures.createJournalEntries) {
+        <button class="gl-hero-btn gl-hero-btn--primary" [routerLink]="['/accounting/journal-entries/create']">
+          <fa-icon icon="plus"></fa-icon>
+          New Entry
+        </button>
+      }
     </div>
   </div>
 </div>
@@ -715,7 +718,10 @@
       ></mat-row>
     </mat-table>
 
-    @if (totalEntries === 0) {
+    <!-- Keyed off the rows actually rendered, not totalEntries: that count comes from the ledger
+         summary, which only reports a figure once a GL account is chosen, so the search view would
+         otherwise show "No entries found" above a full table. -->
+    @if (((dataSource?.entries$ | async) || []).length === 0) {
       <div class="gl-empty">
         <div class="gl-empty__icon"><fa-icon icon="search"></fa-icon></div>
         <div class="gl-empty__title">No entries found</div>
@@ -724,7 +730,11 @@
     }
 
     <div class="gl-pager-wrap">
-      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+      <mat-paginator
+        [length]="(dataSource?.records$ | async) || 0"
+        [pageSizeOptions]="[10, 25, 50, 100]"
+        showFirstLastButtons
+      ></mat-paginator>
     </div>
   </div>
 </div>

src/app/accounting/search-journal-entry/search-journal-entry.component.ts

@@ -14,6 +14,7 @@ import { ActivatedRoute, RouterLink } from '@angular/router';
 import { merge } from 'rxjs';
 import { tap, startWith, map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { AccountingService } from '../accounting.service';
+import { DISABLED_ACCOUNTING_FEATURES } from '../disabled-features';
 import { SettingsService } from 'app/settings/settings.service';
 import { JournalEntriesDataSource } from './journal-entry.datasource';
 import { Dates } from 'app/core/utils/dates';
@@ -41,7 +42,6 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatCardModule } from '@angular/material/card';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatIconModule } from '@angular/material/icon';
-
 const STATE_KEY = 'gl_ledger_filter_state';
 
 @Component({
@@ -91,6 +91,8 @@ export class SearchJournalEntryComponent implements OnInit, OnDestroy, AfterView
   // ── Misc ──────────────────────────────────────────────────────────────────
   minDate = new Date(2000, 0, 1);
   maxDate = new Date();
+  /** Accounting features switched off for this installation — see disabled-features.ts. */
+  disabledFeatures = DISABLED_ACCOUNTING_FEATURES;
 
   // ── Filter controls ───────────────────────────────────────────────────────
   officeName = new UntypedFormControl();

src/app/aml/aml.service.ts

@@ -34,6 +34,52 @@ export class AmlService {
     return this.http.post(`/aml/alerts/${alertId}/review`, { disposition, notes });
   }
 
+  // ═══ Recurring-alert review queue ═══
+
+  /**
+   * Customers whose transactions repeatedly trip the engine. Each row carries the triggering
+   * alerts, so the reviewer can see why the customer keeps surfacing.
+   */
+  getRecurringAlerts(minAlerts: number, windowDays: number, onlyNeedingReview: boolean): Observable<any[]> {
+    const params = new HttpParams()
+      .set('minAlerts', String(minAlerts))
+      .set('windowDays', String(windowDays))
+      .set('onlyNeedingReview', String(onlyNeedingReview));
+    return this.http.get<any[]>('/aml/recurring-alerts', { params });
+  }
+
+  /** outcome: 'CLEARED' | 'MONITOR' | 'ESCALATED' */
+  reviewRecurringAlert(
+    clientId: number,
+    outcome: 'CLEARED' | 'MONITOR' | 'ESCALATED',
+    notes: string,
+    windowDays: number
+  ): Observable<any> {
+    return this.http.post(`/aml/recurring-alerts/${clientId}/review`, { outcome, notes, windowDays });
+  }
+
+  // ═══ Manual referrals from the general ledger ═══
+
+  /**
+   * Ledger entries a user has already marked, keyed on `journalEntryId`.
+   *
+   * Separate from `getAlerts()` because these are not engine alerts — they carry the
+   * journal entry id rather than a savings or loan transaction id, so the ledger
+   * screen can match them to the rows it is showing.
+   */
+  getManualReferrals(): Observable<any[]> {
+    return this.http.get<any[]>('/aml/alerts/manual-referrals');
+  }
+
+  /**
+   * Marks a ledger entry. WHITELIST clears it with no report; ESCALATE opens an STR
+   * case for the Principal Officer, the same road an escalated engine alert takes.
+   * The entry must have a customer behind it or the server rejects it.
+   */
+  referJournalEntry(journalEntryId: number, disposition: 'WHITELIST' | 'ESCALATE', notes: string): Observable<any> {
+    return this.http.post('/aml/alerts/manual-referral', { journalEntryId, disposition, notes });
+  }
+
   // ═══ STR cases (Principal Officer) ═══
 
   getStrCases(): Observable<any[]> {
@@ -76,6 +122,15 @@ export class AmlService {
     return this.http.get<any[]>('/aml/ctr-reports');
   }
 
+  /**
+   * The reportable lines behind the generated CTRs, each resolved to the account, customer, branch
+   * and date a FIU-IND filing names. Omit `reportId` for every generated month.
+   */
+  getCtrReportLines(reportId?: number): Observable<any[]> {
+    const params = reportId ? new HttpParams().set('reportId', String(reportId)) : undefined;
+    return this.http.get<any[]>('/aml/ctr-reports/lines', { params });
+  }
+
   /** month format: yyyy-MM */
   generateCtrReport(month: string): Observable<any> {
     return this.http.post('/aml/ctr-reports/generate', { month });

src/app/app-routing.module.ts

@@ -13,6 +13,7 @@ import { Routes, RouterModule } from '@angular/router';
 // Not Found Component
 import { NotFoundComponent } from './not-found/not-found.component';
 import { CallbackComponent } from './zitadel/callback/callback.component';
+import { PlatformMenuAccessComponent } from './platform-admin/menu-access/menu-access.component';
 
 /**
  * Fallback to this route when no prior route is matched.
@@ -22,6 +23,12 @@ const routes: Routes = [
     path: 'callback',
     component: CallbackComponent
   },
+  {
+    // Platform-operator only — outside the normal login/tenant flow on purpose, see
+    // PlatformMenuAccessComponent's own doc comment for why that is safe.
+    path: 'platform-admin/menu-access',
+    component: PlatformMenuAccessComponent
+  },
   {
     path: '**',
     component: NotFoundComponent

src/app/app.module.ts

@@ -62,9 +62,15 @@ import { RbiCircularsModule } from './rbi-circulars/rbi-circulars.module';
 import { CfcfrmsModule } from './cfcfrms/cfcfrms.module';
 import { BankCalendarModule } from './bank-calendar/bank-calendar.module';
 import { DeafModule } from './deaf/deaf.module';
+import { SavingsDailyInterestModule } from './savings-daily-interest/savings-daily-interest.module';
 import { DicgcModule } from './dicgc/dicgc.module';
 import { FiuModule } from './fiu/fiu.module';
+import { GlReportsModule } from './gl-reports/gl-reports.module';
 import { SftModule } from './sft/sft.module';
+import { InvestmentModule } from './investment/investment.module';
+import { NpaModule } from './npa/npa.module';
+import { ReconciliationModule } from './reconciliation/reconciliation.module';
+import { LoanOriginationModule } from './loan-origination/loan-origination.module';
 import { DigitalModule } from './digital/digital.module';
 import { LetterMgmtModule } from './letter-mgmt/letter-mgmt.module';
 import { AccountsModule } from './accounts/accounts.module';
@@ -169,9 +175,15 @@ export function HttpLoaderFactory(http: HttpClient) {
     CfcfrmsModule,
     BankCalendarModule,
     DeafModule,
+    SavingsDailyInterestModule,
     DicgcModule,
     FiuModule,
+    GlReportsModule,
     SftModule,
+    InvestmentModule,
+    NpaModule,
+    ReconciliationModule,
+    LoanOriginationModule,
     DigitalModule,
     LetterMgmtModule,
     AccountsModule,

src/app/cashier/account-register/account-register.component.html

@@ -0,0 +1,169 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="pg ar-print">
+  <header class="pg-head">
+    <div>
+      <div class="pg-eyebrow">REPORTS · ACCOUNT REGISTER</div>
+      <h1 class="pg-title">Account Register</h1>
+      <p class="pg-sub">
+        Every account as it stood on the chosen date — which ones opened and closed that day, the balance each held
+        then, and what it holds now.
+      </p>
+    </div>
+    <div class="pg-toolbar ar-noprint">
+      <button type="button" class="pg-btn" (click)="shiftDate(-1)" title="Previous day">
+        <mat-icon>chevron_left</mat-icon>
+      </button>
+      <label class="pg-field">
+        <span>As on date</span>
+        <input type="date" [value]="date" (change)="date = $any($event.target).value; load()" />
+      </label>
+      <button type="button" class="pg-btn" (click)="shiftDate(1)" title="Next day">
+        <mat-icon>chevron_right</mat-icon>
+      </button>
+      <button type="button" class="pg-btn" (click)="goToday()">Today</button>
+      <button type="button" class="pg-btn pg-btn--primary" (click)="load()" [disabled]="loading">
+        <mat-icon>refresh</mat-icon> Reload
+      </button>
+    </div>
+  </header>
+
+  <!-- Shown only on paper, where the toolbar is hidden and the date has to be stated. -->
+  <p class="ar-printhead">Account Register as on {{ date }} · {{ section }}</p>
+
+  <div class="db-filters ar-noprint">
+    <label class="pg-field">
+      <span>Section</span>
+      <select [(ngModel)]="section" (change)="load()">
+        @for (s of sections; track s.value) {
+          <option [value]="s.value">{{ s.label }}</option>
+        }
+      </select>
+    </label>
+    <label class="pg-field ar-check">
+      <span>Movement</span>
+      <span class="ar-check__box">
+        <input type="checkbox" [(ngModel)]="movementOnly" />
+        Only accounts opened / closed on this date
+      </span>
+    </label>
+    <label class="pg-field db-filters__search">
+      <span>Search</span>
+      <input type="text" [(ngModel)]="search" placeholder="Account no, client, product, status…" />
+    </label>
+    <button type="button" class="pg-btn" (click)="printRegister()" [disabled]="filteredRows.length === 0">
+      <mat-icon>print</mat-icon> Print
+    </button>
+    <button type="button" class="pg-btn" (click)="exportCsv()" [disabled]="filteredRows.length === 0">
+      <mat-icon>download</mat-icon> CSV
+    </button>
+  </div>
+
+  @if (errorMsg) {
+    <div class="pg-alert pg-alert--error">{{ errorMsg }}</div>
+  }
+
+  @if (loading) {
+    <div class="pg-empty">Loading…</div>
+  }
+
+  @if (!loading && loaded) {
+    <!-- What actually happened that day, read before the list itself. -->
+    <div class="ar-summary">
+      <div class="ar-summary__item ar-summary__item--in">
+        <span class="ar-summary__label">Accounts opened on {{ date }}</span>
+        <span class="ar-summary__value">{{ openedCount }}</span>
+      </div>
+      <div class="ar-summary__item ar-summary__item--out">
+        <span class="ar-summary__label">Accounts closed on {{ date }}</span>
+        <span class="ar-summary__value">{{ closedCount }}</span>
+      </div>
+      <div class="ar-summary__item">
+        <span class="ar-summary__label">Balance on {{ date }}</span>
+        <span class="ar-summary__value">₹{{ shownBalanceOnDate | number: '1.2-2' }}</span>
+      </div>
+      <div class="ar-summary__item">
+        <span class="ar-summary__label">Current balance</span>
+        <span class="ar-summary__value">₹{{ shownCurrentBalance | number: '1.2-2' }}</span>
+      </div>
+    </div>
+  }
+
+  @if (!loading && loaded && filteredRows.length === 0) {
+    <div class="pg-empty">
+      <mat-icon>account_balance_wallet</mat-icon>
+      <p>
+        @if (movementOnly) {
+          No account was opened or closed on {{ date }}.
+        } @else {
+          No accounts existed on {{ date }}.
+        }
+      </p>
+    </div>
+  }
+
+  @if (filteredRows.length > 0) {
+    <div class="pg-card">
+      <table class="pg-table">
+        <thead>
+          <tr>
+            <th>Account No</th>
+            <th>Section</th>
+            <th>Client</th>
+            <th>Product</th>
+            <th>Status</th>
+            <th>Opened</th>
+            <th>Closed</th>
+            <th class="num">Balance on {{ date }}</th>
+            <th class="num">Current Balance</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (r of filteredRows; track r.section + r.accountId) {
+            <tr [class.ar-row--opened]="r.openedOnDate" [class.ar-row--closed]="r.closedOnDate">
+              <td>
+                <span class="pg-chip">{{ r.accountNo }}</span>
+                @if (r.openedOnDate) {
+                  <span class="ar-tag ar-tag--in">OPENED</span>
+                }
+                @if (r.closedOnDate) {
+                  <span class="ar-tag ar-tag--out">CLOSED</span>
+                }
+              </td>
+              <td>{{ r.section }}</td>
+              <td>{{ r.clientName ?? '—' }}</td>
+              <td>{{ r.productName ?? '—' }}</td>
+              <td>
+                <span [class]="statusClass(r.status)">{{ r.status }}</span>
+              </td>
+              <td>{{ r.openedOn ?? '—' }}</td>
+              <td>{{ r.closedOn ?? '—' }}</td>
+              <td class="num">₹{{ r.balanceOnDate | number: '1.2-2' }}</td>
+              <td class="num">
+                ₹{{ r.currentBalance | number: '1.2-2' }}
+                @if (r.section === 'SHARE' && r.sharesHeld) {
+                  <span class="db-muted">· {{ r.sharesHeld }} sh</span>
+                }
+              </td>
+            </tr>
+          }
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colspan="7">
+              {{ filteredRows.length }} account(s) · {{ openedCount }} opened · {{ closedCount }} closed
+            </td>
+            <td class="num">₹{{ shownBalanceOnDate | number: '1.2-2' }}</td>
+            <td class="num">₹{{ shownCurrentBalance | number: '1.2-2' }}</td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  }
+</div>

src/app/cashier/account-register/account-register.component.scss

@@ -0,0 +1,144 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/* Page chrome comes from cashier-shared.scss; badges, filters and muted text are shared with the
+   day book. Only what belongs to the account register lives here. */
+
+.ar-summary {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+
+  &__item {
+    flex: 1 1 180px;
+    padding: 12px 16px;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+
+    &--in {
+      border-left: 4px solid #16a34a;
+    }
+
+    &--out {
+      border-left: 4px solid #dc2626;
+    }
+  }
+
+  &__label {
+    display: block;
+    font-size: 10px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #94a3b8;
+  }
+
+  &__value {
+    display: block;
+    margin-top: 4px;
+    font-size: 20px;
+    font-weight: 800;
+    font-variant-numeric: tabular-nums;
+    color: #0d1b2a;
+  }
+}
+
+/* Checkbox sits inside a pg-field, which is laid out for inputs — this keeps the label and box on
+   one line without fighting that. */
+.ar-check {
+  &__box {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 38px;
+    font-size: 12px;
+    color: #475569;
+    white-space: nowrap;
+  }
+}
+
+/* Marks the accounts that actually moved on the chosen date — the reason someone opens a register
+   for a past day at all. */
+.ar-tag {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+
+  &--in {
+    background: #dcfce7;
+    color: #15803d;
+  }
+
+  &--out {
+    background: #fee2e2;
+    color: #b91c1c;
+  }
+}
+
+.ar-row--opened td:first-child {
+  box-shadow: inset 3px 0 0 #22c55e;
+}
+
+.ar-row--closed td:first-child {
+  box-shadow: inset 3px 0 0 #ef4444;
+}
+
+/* Only shown on paper: the screen already states the date in the toolbar. */
+.ar-printhead {
+  display: none;
+}
+
+/* A register is meant to be printed and filed, so paper gets its own treatment: the toolbar and
+   filters go, the table gains borders, and rows are not split across pages. */
+@media print {
+  .ar-noprint {
+    display: none !important;
+  }
+
+  .ar-printhead {
+    display: block;
+    margin: 0 0 10px;
+    font-size: 13px;
+    font-weight: 800;
+    color: #000;
+  }
+
+  .pg {
+    padding: 0;
+  }
+
+  .ar-summary__item {
+    border: 1px solid #999;
+  }
+
+  .pg-table {
+    font-size: 10px;
+
+    th,
+    td {
+      border: 1px solid #999;
+      padding: 4px 6px;
+      color: #000;
+    }
+  }
+
+  tr {
+    page-break-inside: avoid;
+  }
+
+  /* Table headers repeat on every page, so a multi-page register stays readable. */
+  thead {
+    display: table-header-group;
+  }
+}

src/app/cashier/account-register/account-register.component.ts

@@ -0,0 +1,221 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { catchError, of } from 'rxjs';
+import { CashierService } from '../cashier.service';
+
+interface RegisterRow {
+  accountId: number;
+  accountNo: string;
+  section: 'SAVINGS' | 'FD' | 'RD' | 'SHARE';
+  clientName: string | null;
+  productName: string | null;
+  status: string;
+  openedOn: string | null;
+  closedOn: string | null;
+  /** True when this account was opened (or closed) on the very date being viewed. */
+  openedOnDate: boolean;
+  closedOnDate: boolean;
+  /** The account's balance as it stood on the register's date, for every section. */
+  balanceOnDate: number | null;
+  currentBalance: number | null;
+  sharesHeld?: number;
+}
+
+/**
+ * Account register for one date: which accounts opened and closed that day, each account's balance
+ * as it stood then, and what it holds now.
+ */
+@Component({
+  selector: 'mifosx-account-register',
+  templateUrl: './account-register.component.html',
+  styleUrls: [
+    '../cashier-shared.scss',
+    '../day-book/day-book.component.scss',
+    './account-register.component.scss'
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIconModule
+  ]
+})
+export class AccountRegisterComponent implements OnInit {
+  private service = inject(CashierService);
+
+  date = '';
+  section: 'ALL' | 'SAVINGS' | 'FD' | 'RD' | 'SHARE' = 'ALL';
+  search = '';
+  /** Narrows to just the accounts that opened or closed on the chosen date. */
+  movementOnly = false;
+
+  rows: RegisterRow[] = [];
+  openedCount = 0;
+  closedCount = 0;
+  totalBalanceOnDate = 0;
+  totalCurrentBalance = 0;
+  loading = false;
+  loaded = false;
+  errorMsg = '';
+
+  readonly sections = [
+    { value: 'ALL', label: 'All accounts' },
+    { value: 'SAVINGS', label: 'Savings' },
+    { value: 'FD', label: 'Fixed Deposit' },
+    { value: 'RD', label: 'Recurring Deposit' },
+    { value: 'SHARE', label: 'Share' }
+  ];
+
+  ngOnInit(): void {
+    this.date = this.today();
+    this.load();
+  }
+
+  /** Local date — toISOString() would shift the day in any timezone behind UTC. */
+  private today(): string {
+    const d = new Date();
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+  }
+
+  load(): void {
+    if (!this.date) return;
+    this.loading = true;
+    this.errorMsg = '';
+    this.service
+      .accountRegister(this.date, this.section)
+      .pipe(
+        catchError((err: any) => {
+          this.errorMsg =
+            err?.error?.errors?.[0]?.defaultUserMessage ??
+            err?.error?.message ??
+            'Could not load the account register.';
+          return of(null);
+        })
+      )
+      .subscribe((res: any) => {
+        this.loading = false;
+        this.loaded = true;
+        this.rows = res?.accounts ?? [];
+        this.openedCount = Number(res?.openedCount ?? 0);
+        this.closedCount = Number(res?.closedCount ?? 0);
+        this.totalBalanceOnDate = Number(res?.totalBalanceOnDate ?? 0);
+        this.totalCurrentBalance = Number(res?.totalCurrentBalance ?? 0);
+      });
+  }
+
+  shiftDate(days: number): void {
+    const [
+      y,
+      m,
+      d
+    ] = this.date.split('-').map(Number);
+    const dt = new Date(y, m - 1, d + days);
+    this.date = `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, '0')}-${String(dt.getDate()).padStart(2, '0')}`;
+    this.load();
+  }
+
+  goToday(): void {
+    this.date = this.today();
+    this.load();
+  }
+
+  /** Free-text narrowing over the rows already fetched — no round trip per keystroke. */
+  get filteredRows(): RegisterRow[] {
+    const base = this.movementOnly ? this.rows.filter((r) => r.openedOnDate || r.closedOnDate) : this.rows;
+    const q = this.search.trim().toLowerCase();
+    if (!q) return base;
+    return base.filter((r) =>
+      [
+        r.accountNo,
+        r.clientName,
+        r.productName,
+        r.status,
+        r.section
+      ]
+        .filter(Boolean)
+        .some((v) => String(v).toLowerCase().includes(q))
+    );
+  }
+
+  /** Totals for what is on screen, so a filter or search still reconciles. */
+  get shownBalanceOnDate(): number {
+    return this.filteredRows.reduce((s, r) => s + Number(r.balanceOnDate ?? 0), 0);
+  }
+
+  get shownCurrentBalance(): number {
+    return this.filteredRows.reduce((s, r) => s + Number(r.currentBalance ?? 0), 0);
+  }
+
+  statusClass(status: string): string {
+    switch (status) {
+      case 'ACTIVE':
+        return 'db-badge db-badge--ok';
+      case 'CLOSED':
+      case 'PREMATURELY CLOSED':
+      case 'REJECTED':
+      case 'WITHDRAWN':
+        return 'db-badge db-badge--rejected';
+      case 'SUBMITTED':
+      case 'APPROVED':
+        return 'db-badge db-badge--pending';
+      default:
+        return 'db-badge';
+    }
+  }
+
+  exportCsv(): void {
+    const header = [
+      'Account No',
+      'Section',
+      'Client',
+      'Product',
+      'Status',
+      'Opened On',
+      'Closed On',
+      `Balance on ${this.date}`,
+      'Current Balance'
+    ];
+    const lines = this.filteredRows.map((r) =>
+      [
+        r.accountNo,
+        r.section,
+        r.clientName ?? '',
+        r.productName ?? '',
+        r.status,
+        r.openedOn ?? '',
+        r.closedOn ?? '',
+        r.balanceOnDate == null ? '' : String(r.balanceOnDate),
+        String(r.currentBalance ?? 0)
+      ]
+        // Quote every field and double embedded quotes: client names routinely contain commas.
+        .map((v) => `"${String(v).replace(/"/g, '""')}"`)
+        .join(',')
+    );
+    const csv = [
+      header.join(','),
+      ...lines
+    ].join('\n');
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `account-register-${this.date}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  /** Hands the page to the browser's print dialog; print styles drop the toolbar and filters. */
+  printRegister(): void {
+    window.print();
+  }
+}

src/app/cashier/branch-day/branch-day.component.html

@@ -0,0 +1,743 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="pg">
+  <header class="pg-head">
+    <div>
+      <div class="pg-eyebrow">BRANCH OPERATIONS · {{ missedOnly ? 'MISSED CLOSE' : 'DAY REGISTER' }}</div>
+      <h1 class="pg-title">{{ missedOnly ? 'Missed Close Register' : 'Day Open / Day Close' }}</h1>
+      <p class="pg-sub">
+        @if (missedOnly) {
+          Business days that were opened and never closed. While a day stays open its closing balance never carries
+          forward, a back-dated entry can still be posted into it, and any cash difference on that date goes unnoticed.
+        } @else {
+          The branch's business day, opened each morning and closed each evening. A day left open never carries its
+          closing balance forward, and any cash difference on that date goes unnoticed — so the ones still hanging are
+          listed first.
+        }
+      </p>
+    </div>
+    <div class="pg-toolbar">
+      @if (canOpenToday && !missedOnly) {
+        <button type="button" class="pg-btn pg-btn--primary" (click)="startOpen()">
+          <mat-icon>lock_open</mat-icon> Open Day
+        </button>
+      }
+      <button type="button" class="pg-btn" (click)="load()" [disabled]="loading">
+        <mat-icon>refresh</mat-icon> Reload
+      </button>
+    </div>
+  </header>
+
+  @if (errorMsg) {
+    <div class="pg-alert pg-alert--error">{{ errorMsg }}</div>
+  }
+  @if (successMsg) {
+    <div class="bd-success">{{ successMsg }}</div>
+  }
+
+  @if (!canOperate && loaded) {
+    <div class="ve-note">
+      <mat-icon>info</mat-icon>
+      You can see the register but not open or close a day — a Clerk, Head Cashier or Bank Manager does that, since a
+      cashier works inside the day and cannot declare it closed.
+    </div>
+  }
+
+  @if (firstOpenNeedsCashMigration && !missedOnly) {
+    <div class="bd-locked">
+      <mat-icon>lock</mat-icon>
+      <span>
+        This branch has never opened a business day, and its Cash at Vault GL account has no opening balance yet. Count
+        the vault and open the first business day together from
+        <a [routerLink]="['/accounting/migrate-cash-denomination']">Migrate Cash Denomination</a> — Open Day here is
+        locked until that is done, so today's cash tracking never starts out of step with the ledger.
+      </span>
+    </div>
+  }
+
+  <!-- Missed closes first: these are the ones that need action. -->
+  @if (missed.length > 0) {
+    <div class="db-exceptions">
+      <div class="db-exceptions__head">
+        <mat-icon>warning</mat-icon>
+        <strong>{{ missed.length }} business day{{ missed.length === 1 ? '' : 's' }} never closed</strong>
+      </div>
+      @for (m of missed; track m.id) {
+        <div class="bd-missed">
+          <span class="pg-chip">{{ m.businessDate }}</span>
+          <strong class="bd-missed__age"> open {{ m.daysOpen }} day{{ m.daysOpen === 1 ? '' : 's' }} </strong>
+          <span class="db-muted">
+            opened {{ timeOnly(m.openedAt) }} by {{ m.openedByName }} · opening ₹{{ m.openingCash | number: '1.2-2' }}
+          </span>
+          @if (canOperate) {
+            <button type="button" class="pg-btn pg-btn--warn bd-missed__act" (click)="startClose(m)">
+              Close this day
+            </button>
+          }
+        </div>
+      }
+    </div>
+  }
+
+  <!-- On the missed-close screen, nothing to report is itself the answer — and has to be stated,
+       or the page looks like it failed to load. -->
+  @if (missedOnly && loaded && missed.length === 0) {
+    <div class="pg-empty">
+      <mat-icon>check_circle</mat-icon>
+      <p>No missed closes. Every business day opened for this branch has been closed.</p>
+    </div>
+  }
+
+  <!-- Current day -->
+  @if (!missedOnly && openDay) {
+    <div class="bd-current">
+      <div class="bd-current__main">
+        <span class="db-badge db-badge--pending">DAY OPEN</span>
+        <strong class="bd-current__date">{{ openDay.businessDate }}</strong>
+        <span class="db-muted">
+          opened {{ timeOnly(openDay.openedAt) }} by {{ openDay.openedByName }} · opening cash ₹{{
+            openDay.openingCash | number: '1.2-2'
+          }}
+        </span>
+      </div>
+      @if (canOperate) {
+        <button type="button" class="pg-btn pg-btn--primary" (click)="startClose(openDay)">
+          <mat-icon>lock</mat-icon> Close Day
+        </button>
+      }
+    </div>
+  } @else if (loaded && canOperate) {
+    <div class="bd-current bd-current--shut">
+      <div class="bd-current__main">
+        <span class="db-badge">NO DAY OPEN</span>
+        <span class="db-muted">Open the business day before any cash transaction is accepted.</span>
+      </div>
+    </div>
+  }
+
+  <!-- Open-day form -->
+  @if (showOpenForm) {
+    <div class="db-panel bd-panel">
+      <div class="db-panel__head">
+        <strong>Open business day</strong>
+        <button type="button" class="db-icon-btn" (click)="cancelOpen()" title="Close">
+          <mat-icon>close</mat-icon>
+        </button>
+      </div>
+      <div class="db-panel__body">
+        <label class="pg-field">
+          <span>Business date</span>
+          <input type="date" [(ngModel)]="openDate" />
+        </label>
+        <label class="pg-field">
+          <span>Opening cash (leave blank to carry forward)</span>
+          <input
+            type="number"
+            step="0.01"
+            [(ngModel)]="openingCash"
+            [disabled]="openDenomTotal > 0"
+            placeholder="Carried from last close"
+          />
+        </label>
+      </div>
+      <p class="bd-hint">
+        @if (hasAutoFilledOpenCounts) {
+          Auto-filled below from yesterday's own closing count (₹{{ carriedForwardTotal | number: '1.2-2' }}) — correct
+          only the rows where today's physical count differs before opening.
+        } @else {
+          Left blank with no notes/coins counted below, yesterday's closing figure carries forward automatically — which
+          is what keeps the opening balance from drifting. Counting the drawer below is what actually records the
+          note/coin stock the branch can check a vault handout against later.
+        }
+      </p>
+
+      @if (hasAutoFilledOpenCounts && openLiveDifference !== null) {
+        @if (openLiveDifference === 0) {
+          <div class="db-cmp db-cmp--good">
+            <span class="db-cmp__label">vs. yesterday's close</span>
+            <span class="db-cmp__value">Tallied</span>
+          </div>
+        } @else {
+          <div class="db-cmp db-cmp--bad">
+            <span class="db-cmp__label">vs. yesterday's close</span>
+            <span class="db-cmp__value">
+              {{ openLiveDifference > 0 ? 'Excess' : 'Short' }} ₹{{ absValue(openLiveDifference) | number: '1.2-2' }}
+            </span>
+          </div>
+        }
+      }
+
+      <div class="pg-card bd-denom">
+        <table class="pg-table">
+          <thead>
+            <tr>
+              <th>Denomination</th>
+              <th style="text-align: center">Count</th>
+              <th class="num">Amount</th>
+            </tr>
+          </thead>
+          <tbody>
+            @if (notes.length) {
+              <tr class="pg-section">
+                <td colspan="3">Bank Notes</td>
+              </tr>
+            }
+            @for (d of notes; track d.id) {
+              <tr>
+                <td>
+                  <span class="pg-chip">{{ d.label }}</span>
+                </td>
+                <td style="display: flex; flex-direction: column; align-items: center">
+                  <div class="pg-step">
+                    <button
+                      type="button"
+                      (click)="bumpCount(openCounts, d, -1)"
+                      [disabled]="countFor(openCounts, d) === 0"
+                    >
+                      −
+                    </button>
+                    <input
+                      type="number"
+                      min="0"
+                      [value]="countFor(openCounts, d)"
+                      (input)="onCountChange(openCounts, d, $any($event.target).value)"
+                    />
+                    <button type="button" (click)="bumpCount(openCounts, d, 1)">+</button>
+                  </div>
+                  @if (hasAutoFilledOpenCounts && countFor(openCounts, d) !== autoOpenCountFor(d)) {
+                    <span class="db-muted bd-denom__auto">yesterday closed {{ autoOpenCountFor(d) }}</span>
+                  }
+                </td>
+                <td class="num">₹{{ subtotalFor(openCounts, d) | number: '1.2-2' }}</td>
+              </tr>
+            }
+            @if (coins.length) {
+              <tr class="pg-section">
+                <td colspan="3">Coins</td>
+              </tr>
+            }
+            @for (d of coins; track d.id) {
+              <tr>
+                <td>
+                  <span class="pg-chip pg-chip--coin">{{ d.label }}</span>
+                </td>
+                <td style="display: flex; flex-direction: column; align-items: center">
+                  <div class="pg-step">
+                    <button
+                      type="button"
+                      (click)="bumpCount(openCounts, d, -1)"
+                      [disabled]="countFor(openCounts, d) === 0"
+                    >
+                      −
+                    </button>
+                    <input
+                      type="number"
+                      min="0"
+                      [value]="countFor(openCounts, d)"
+                      (input)="onCountChange(openCounts, d, $any($event.target).value)"
+                    />
+                    <button type="button" (click)="bumpCount(openCounts, d, 1)">+</button>
+                  </div>
+                  @if (hasAutoFilledOpenCounts && countFor(openCounts, d) !== autoOpenCountFor(d)) {
+                    <span class="db-muted bd-denom__auto">yesterday closed {{ autoOpenCountFor(d) }}</span>
+                  }
+                </td>
+                <td class="num">₹{{ subtotalFor(openCounts, d) | number: '1.2-2' }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      @if (openDenomTotal > 0) {
+        <p class="bd-hint">
+          Denomination total: <strong>₹{{ openDenomTotal | number: '1.2-2' }}</strong>
+          @if (hasAutoFilledOpenCounts) {
+            <button type="button" class="pg-btn bd-denom__reset" (click)="resetOpenToAutoFill()">
+              Reset to yesterday's count
+            </button>
+          }
+        </p>
+      }
+
+      @if (openLiveDifference !== null && openLiveDifference !== 0) {
+        <label class="pg-field bd-panel__wide">
+          <span>Why does this differ from yesterday's closing count? (required)</span>
+          <input
+            type="text"
+            [(ngModel)]="openDifferenceReason"
+            placeholder="e.g. notes exchanged for smaller denominations, extra cash added from head office"
+          />
+        </label>
+      }
+
+      <div class="db-panel__actions">
+        <button type="button" class="pg-btn pg-btn--primary" (click)="submitOpen()" [disabled]="!canSubmitOpen">
+          Open Day
+        </button>
+        <button type="button" class="pg-btn" (click)="cancelOpen()">Cancel</button>
+      </div>
+    </div>
+  }
+
+  <!-- Close-day form -->
+  @if (closeTarget) {
+    <div class="db-panel bd-panel" [class.bd-panel--late]="isLateClose">
+      <div class="db-panel__head">
+        <strong>Close business day — {{ closeTarget.businessDate }}</strong>
+        <button type="button" class="db-icon-btn" (click)="cancelClose()" title="Close">
+          <mat-icon>close</mat-icon>
+        </button>
+      </div>
+
+      @if (needsForceReason) {
+        <p class="db-panel__warn">
+          This day is being closed after its own date. It will be recorded as a
+          <strong>force close</strong>, with the reason below kept permanently against it.
+        </p>
+      }
+
+      @if (previewLoading) {
+        <p class="db-muted">Working out the day's figure…</p>
+      }
+
+      <!-- The arithmetic, spelled out. Whoever closes the day can see where the expected figure
+           comes from instead of being asked to agree with a number they cannot check. -->
+      @if (preview) {
+        <div class="bd-calc">
+          <div class="bd-calc__row">
+            <span>Opening cash (carried forward)</span>
+            <span class="bd-calc__amt">₹{{ preview.openingCash | number: '1.2-2' }}</span>
+          </div>
+          <div class="bd-calc__row bd-calc__row--in">
+            <span>+ Cash deposits taken (approved)</span>
+            <span class="bd-calc__amt">₹{{ preview.deposits | number: '1.2-2' }}</span>
+          </div>
+          <div class="bd-calc__row bd-calc__row--out">
+            <span>− Cash paid out (approved withdrawals)</span>
+            <span class="bd-calc__amt">₹{{ preview.withdrawals | number: '1.2-2' }}</span>
+          </div>
+          <div class="bd-calc__row bd-calc__row--total">
+            <span>Cash the branch should be holding</span>
+            <span class="bd-calc__amt">₹{{ preview.expectedCash | number: '1.2-2' }}</span>
+          </div>
+          @if (preview.vaultIn > 0 || preview.settledOut > 0) {
+            <div class="bd-calc__memo">
+              Vault activity today — moves cash within the branch, not counted in the total above: ₹{{
+                preview.vaultIn | number: '1.2-2'
+              }}
+              handed to a cashier, ₹{{ preview.settledOut | number: '1.2-2' }} settled back to the vault.
+            </div>
+          }
+        </div>
+      }
+
+      <!-- What every cash point under this branch is actually holding right now, fetched
+           automatically — so closing the day doesn't mean separately checking Vault Position and
+           every cashier's own Cashier Position screen by hand. -->
+      @if (eodLoading) {
+        <p class="db-muted">Fetching vault and cashier positions…</p>
+      }
+
+      <!-- The question that actually matters at close: does the WHOLE branch tally, not just the
+           vault. Only shown once both the book preview and every teller/cashier position have
+           loaded, since it adds them together. -->
+      @if (branchTotalSummary; as bt) {
+        <div class="bd-eod bd-eod--total">
+          <div class="bd-eod__head">
+            <mat-icon>account_balance_wallet</mat-icon>
+            <strong>Branch Total (Vault + All Cashiers)</strong>
+          </div>
+          <div class="bd-eod__totals">
+            <span>Vault ₹{{ bt.vaultTotal | number: '1.2-2' }}</span>
+            <span>+ Cashiers ₹{{ bt.cashierTotal | number: '1.2-2' }}</span>
+            <span class="bd-eod__totals-sum">= ₹{{ bt.grandTotal | number: '1.2-2' }}</span>
+            <span class="db-muted">vs. book ₹{{ bt.expected | number: '1.2-2' }}</span>
+          </div>
+          @if (bt.difference === 0) {
+            <span class="db-badge db-badge--ok">Branch Tallied</span>
+          } @else {
+            <span class="db-badge db-badge--rejected">
+              {{ bt.difference > 0 ? 'Excess' : 'Short' }} ₹{{ absValue(bt.difference) | number: '1.2-2' }}
+            </span>
+          }
+        </div>
+      }
+
+      @for (t of eodTellers; track t.tellerId) {
+        <div class="bd-eod">
+          <div class="bd-eod__head">
+            <mat-icon>account_balance</mat-icon>
+            <strong>{{ t.tellerName }}</strong>
+            <span class="db-muted">
+              vault holds
+              {{ t.vault?.hasBreakdown ? '₹' + (t.vault.totalAmount | number: '1.2-2') : 'no breakdown recorded' }}
+            </span>
+          </div>
+
+          @if (t.vault?.hasBreakdown && t.vault.denominations.length > 0) {
+            <div class="bd-eod__denoms">
+              @for (d of t.vault.denominations; track d.denominationId) {
+                <span class="bd-eod__chip">₹{{ d.denominationValue }} × {{ d.count }}</span>
+              }
+            </div>
+          }
+
+          @if (t.cashiers.length === 0) {
+            <p class="db-muted bd-eod__empty">No cashiers allocated under this vault.</p>
+          }
+          @for (c of t.cashiers; track c.cashierId) {
+            <div class="bd-eod__cashier">
+              <div class="bd-eod__cashier-head">
+                <span>{{ c.cashierName }}</span>
+                <span class="db-muted">
+                  morning ₹{{ c.morningTotal | number: '1.2-2' }} → current ₹{{ c.currentTotal | number: '1.2-2' }} ·
+                  {{ c.txnCount ?? '—' }} txn{{ c.txnCount === 1 ? '' : 's' }} today
+                </span>
+              </div>
+              <div class="bd-eod__status">
+                @if (c.reconciled === true) {
+                  <span class="db-badge db-badge--ok">Reconciled</span>
+                } @else if (c.reconciled === false) {
+                  <span class="db-badge db-badge--pending">Not Reconciled</span>
+                }
+                @if (c.alreadySettled === true) {
+                  <span class="db-badge db-badge--ok">Settled to Vault</span>
+                } @else if (c.alreadySettled === false) {
+                  <span class="db-badge">Not Settled</span>
+                }
+              </div>
+              @if (c.denominations.length > 0) {
+                <div class="bd-eod__denoms">
+                  @for (d of c.denominations; track d.denominationId) {
+                    <span
+                      class="bd-eod__chip"
+                      [class.bd-eod__chip--up]="d.delta > 0"
+                      [class.bd-eod__chip--down]="d.delta < 0"
+                    >
+                      ₹{{ d.denominationValue }}: {{ d.morningCount }} → {{ d.count }}
+                      @if (d.delta !== 0) {
+                        ({{ d.delta > 0 ? '+' : '' }}{{ d.delta }})
+                      }
+                    </span>
+                  }
+                </div>
+              } @else {
+                <span class="db-muted bd-eod__empty">No balance.</span>
+              }
+            </div>
+          }
+        </div>
+      }
+
+      <div class="db-panel__body">
+        <label class="pg-field">
+          <span>Physical cash counted (or count denominations below)</span>
+          <input
+            type="number"
+            step="0.01"
+            [(ngModel)]="closingCash"
+            [disabled]="closeDenomTotal > 0"
+            placeholder="0.00"
+          />
+        </label>
+        @if (preview && liveDifference !== null) {
+          @if (liveDifference === 0) {
+            <div class="db-cmp db-cmp--good">
+              <span class="db-cmp__label">Difference</span>
+              <span class="db-cmp__value">Tallied</span>
+            </div>
+          } @else {
+            <div class="db-cmp db-cmp--bad">
+              <span class="db-cmp__label">Difference</span>
+              <span class="db-cmp__value">
+                {{ liveDifference > 0 ? 'Excess' : 'Short' }} ₹{{
+                  liveDifference < 0 ? -liveDifference : (liveDifference | number: '1.2-2')
+                }}
+              </span>
+            </div>
+          }
+        }
+        @if (preview && liveDifference !== 0) {
+          <button type="button" class="pg-btn" (click)="useExpected()">Use expected figure</button>
+        }
+      </div>
+
+      <p class="bd-hint">
+        @if (hasAutoFilledCounts) {
+          Auto-filled below from the vault and every cashier's position shown above — correct only the rows where the
+          physical count differs, note by note.
+        } @else {
+          Pre-filled with what the books expect — change it only if the drawer counted something different, and that
+          difference is then recorded against the day. Counting the denominations below overrides the typed figure with
+          what was actually counted, note by note.
+        }
+      </p>
+
+      <div class="pg-card bd-denom">
+        <table class="pg-table">
+          <thead>
+            <tr>
+              <th>Denomination</th>
+              <th style="text-align: center">Count</th>
+              <th class="num">Amount</th>
+            </tr>
+          </thead>
+          <tbody>
+            @if (notes.length) {
+              <tr class="pg-section">
+                <td colspan="3">Bank Notes</td>
+              </tr>
+            }
+            @for (d of notes; track d.id) {
+              <tr>
+                <td>
+                  <span class="pg-chip">{{ d.label }}</span>
+                </td>
+                <td style="display: flex; flex-direction: column; align-items: center">
+                  <div class="pg-step">
+                    <button
+                      type="button"
+                      (click)="bumpCount(closeCounts, d, -1)"
+                      [disabled]="countFor(closeCounts, d) === 0"
+                    >
+                      −
+                    </button>
+                    <input
+                      type="number"
+                      min="0"
+                      [value]="countFor(closeCounts, d)"
+                      (input)="onCountChange(closeCounts, d, $any($event.target).value)"
+                    />
+                    <button type="button" (click)="bumpCount(closeCounts, d, 1)">+</button>
+                  </div>
+                  @if (hasAutoFilledCounts && countFor(closeCounts, d) !== autoCountFor(d)) {
+                    <span class="db-muted bd-denom__auto">system counted {{ autoCountFor(d) }}</span>
+                  }
+                </td>
+                <td class="num">₹{{ subtotalFor(closeCounts, d) | number: '1.2-2' }}</td>
+              </tr>
+            }
+            @if (coins.length) {
+              <tr class="pg-section">
+                <td colspan="3">Coins</td>
+              </tr>
+            }
+            @for (d of coins; track d.id) {
+              <tr>
+                <td>
+                  <span class="pg-chip pg-chip--coin">{{ d.label }}</span>
+                </td>
+                <td style="display: flex; flex-direction: column; align-items: center">
+                  <div class="pg-step">
+                    <button
+                      type="button"
+                      (click)="bumpCount(closeCounts, d, -1)"
+                      [disabled]="countFor(closeCounts, d) === 0"
+                    >
+                      −
+                    </button>
+                    <input
+                      type="number"
+                      min="0"
+                      [value]="countFor(closeCounts, d)"
+                      (input)="onCountChange(closeCounts, d, $any($event.target).value)"
+                    />
+                    <button type="button" (click)="bumpCount(closeCounts, d, 1)">+</button>
+                  </div>
+                  @if (hasAutoFilledCounts && countFor(closeCounts, d) !== autoCountFor(d)) {
+                    <span class="db-muted bd-denom__auto">system counted {{ autoCountFor(d) }}</span>
+                  }
+                </td>
+                <td class="num">₹{{ subtotalFor(closeCounts, d) | number: '1.2-2' }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      @if (closeDenomTotal > 0) {
+        <p class="bd-hint">
+          Denomination total: <strong>₹{{ closeDenomTotal | number: '1.2-2' }}</strong>
+          @if (hasAutoFilledCounts) {
+            <button type="button" class="pg-btn bd-denom__reset" (click)="resetToAutoFill()">
+              Reset to auto-filled count
+            </button>
+          }
+        </p>
+      }
+
+      <!-- Shown for an unreconciled cashier too, not only a late close. The backend blocks a close
+           over a cashier who took cash on this date and never reconciled it, and accepts a reason as
+           the override — but this field only appeared for a late close, so a same-day close in that
+           state had nowhere to type the reason and could not be completed at all until the date had
+           passed. -->
+      @if (isLateClose || hasUnreconciledOrUnsettledCashiers) {
+        <label class="pg-field bd-panel__wide">
+          <span>
+            @if (isLateClose) {
+              Why was this day left open? (required)
+            } @else {
+              Why close over a cashier who has not reconciled? (required)
+            }
+          </span>
+          <input
+            type="text"
+            [(ngModel)]="forceReason"
+            placeholder="e.g. cashier on leave, cash not settled that evening"
+          />
+        </label>
+      }
+
+      <label class="pg-field bd-panel__wide">
+        <span>Remarks (optional)</span>
+        <input type="text" [(ngModel)]="closeRemarks" placeholder="Anything worth recording about this day" />
+      </label>
+
+      <p class="bd-hint">
+        The figure above is stored against the record, so a difference stays readable later even if a transaction is
+        reversed afterwards.
+      </p>
+
+      @if (hasUnreconciledOrUnsettledCashiers) {
+        <!-- A wall on the day itself, a warning on a past one. Today the cashier is still here and
+             the cash can be counted, so nothing excuses closing over it. On a past date it cannot be
+             counted for that date at all, and blocking would leave a day nobody could ever close —
+             so it goes through on the reason a late close already requires, with the names recorded
+             against the day. -->
+        <div
+          class="pg-alert bd-reconcile-block"
+          [class.pg-alert--error]="blocksSameDayClose"
+          [class.bd-reconcile-block--warn]="!blocksSameDayClose"
+        >
+          <mat-icon>{{ blocksSameDayClose ? 'block' : 'warning' }}</mat-icon>
+          <div>
+            @if (blocksSameDayClose) {
+              <strong
+                >Cannot close today &mdash; cashiers still holding cash have not been reconciled or settled.</strong
+              >
+            } @else {
+              <strong>This day's cash was never reconciled or settled.</strong>
+            }
+            <ul class="bd-reconcile-block__list">
+              @for (detail of unreconciledOrUnsettledCashierDetails; track detail.name) {
+                <li>
+                  <strong>{{ detail.name }}</strong> —
+                  @if (detail.notReconciled && detail.notSettled) {
+                    Not Reconciled, Not Settled
+                  } @else if (detail.notReconciled) {
+                    Not Reconciled
+                  } @else {
+                    Not Settled
+                  }
+                </li>
+              }
+            </ul>
+            @if (blocksSameDayClose) {
+              <span class="db-muted"
+                >Each cashier must count their drawer, reconcile it, and settle the cash back to the vault. Then this
+                day can be closed.</span
+              >
+            } @else {
+              <span class="db-muted"
+                >The cash cannot be counted for a date that has passed. Record why above &mdash; their names are kept
+                against the record.</span
+              >
+            }
+          </div>
+        </div>
+      }
+
+      <div class="db-panel__actions">
+        <button type="button" class="pg-btn pg-btn--primary" (click)="submitClose()" [disabled]="!canSubmitClose">
+          {{ needsForceReason ? 'Force Close Day' : 'Close Day' }}
+        </button>
+        <button type="button" class="pg-btn" (click)="cancelClose()">Cancel</button>
+      </div>
+    </div>
+  }
+
+  @if (loading) {
+    <div class="pg-empty">Loading…</div>
+  }
+
+  @if (!loading && loaded && days.length === 0 && !missedOnly) {
+    <div class="pg-empty">
+      <mat-icon>event_note</mat-icon>
+      <p>No business day has been opened for this branch yet.</p>
+    </div>
+  }
+
+  <!-- The register -->
+  @if (days.length > 0 && !missedOnly) {
+    <div class="pg-card">
+      <table class="pg-table">
+        <thead>
+          <tr>
+            <th>Business Date</th>
+            <th>Status</th>
+            <th>Opened By</th>
+            <th class="num">Opening ₹</th>
+            <th>Closed By</th>
+            <th class="num">Closing ₹</th>
+            <th class="num">Book ₹</th>
+            <th>Difference</th>
+            <th>Note</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (d of days; track d.id) {
+            <tr>
+              <td>
+                <span class="pg-chip">{{ d.businessDate }}</span>
+              </td>
+              <td>
+                @if (d.status === 'OPEN') {
+                  <span class="db-badge db-badge--pending">OPEN</span>
+                } @else if (d.forceClosed) {
+                  <span class="db-badge db-badge--rejected" [title]="d.forceCloseReason ?? ''">FORCE CLOSED</span>
+                } @else {
+                  <span class="db-badge db-badge--ok">CLOSED</span>
+                }
+              </td>
+              <td>
+                {{ d.openedByName ?? '—' }}
+                <span class="db-muted">· {{ timeOnly(d.openedAt) }}</span>
+              </td>
+              <td class="num">₹{{ d.openingCash | number: '1.2-2' }}</td>
+              <td>
+                {{ d.closedByName ?? '—' }}
+                @if (d.closedAt) {
+                  <span class="db-muted">· {{ timeOnly(d.closedAt) }}</span>
+                }
+              </td>
+              <td class="num">{{ hasValue(d.closingCash) ? '₹' + (d.closingCash | number: '1.2-2') : '—' }}</td>
+              <td class="num">{{ hasValue(d.bookCash) ? '₹' + (d.bookCash | number: '1.2-2') : '—' }}</td>
+              <td>
+                @if (!hasValue(d.cashDifference)) {
+                  —
+                } @else if (d.cashDifference === 0) {
+                  <span class="db-badge db-badge--ok">Tallied</span>
+                } @else {
+                  <span class="db-badge db-badge--rejected">{{ differenceLabel(d.cashDifference) }}</span>
+                }
+              </td>
+              <td class="bd-note">
+                @if (d.forceCloseReason) {
+                  <strong>Left open:</strong> {{ d.forceCloseReason }}
+                }
+                @if (d.remarks) {
+                  <span class="db-muted">{{ d.remarks }}</span>
+                }
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  }
+</div>

src/app/cashier/branch-day/branch-day.component.scss

@@ -0,0 +1,374 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/* Page chrome comes from cashier-shared.scss; the badges, panel and comparison tiles are shared
+   with the day book. Only what is specific to the day register lives here. */
+
+/* Read-only notice for a cashier. Defined here rather than borrowed from the exceptions screen so
+   this component does not depend on another component's stylesheet. */
+.ve-note {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  margin-bottom: 14px;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 8px;
+  color: #1e40af;
+  font-size: 12px;
+
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+  }
+}
+
+/* Blocks Open Day until the branch's first-ever open has gone through Migrate Cash Denomination —
+   see BranchDayComponent.checkFirstOpenCashMigration(). Same shape as .ve-note, in the error palette
+   the rest of this screen already uses for a missed close (.bd-missed). */
+.bd-locked {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 14px;
+  margin-bottom: 14px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  color: #b91c1c;
+  font-size: 12px;
+  line-height: 1.5;
+
+  mat-icon {
+    flex: none;
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+  }
+
+  a {
+    color: inherit;
+    font-weight: 600;
+    text-decoration: underline;
+  }
+}
+
+.bd-success {
+  padding: 10px 14px;
+  margin-bottom: 14px;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 8px;
+  color: #14532d;
+  font-size: 13px;
+}
+
+/* One row per never-closed day, inside the shared red exception panel. */
+.bd-missed {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 7px 0;
+  font-size: 12px;
+  border-top: 1px dotted #fecaca;
+
+  &__age {
+    color: #b91c1c;
+  }
+
+  /* Pushed right so the date and age read before the action. */
+  &__act {
+    margin-left: auto;
+    height: 28px;
+    font-size: 11px;
+  }
+}
+
+/* The branch's current day — the one thing someone opening this screen is looking for. */
+.bd-current {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 14px 16px;
+  margin-bottom: 14px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-left: 4px solid #f59e0b;
+  border-radius: 8px;
+
+  /* No day open at all: nothing is running, so the amber "in progress" edge would mislead. */
+  &--shut {
+    border-left-color: #94a3b8;
+    background: #f8fafc;
+  }
+
+  &__main {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  &__date {
+    font-size: 15px;
+    color: #0d1b2a;
+  }
+
+  .pg-btn {
+    margin-left: auto;
+  }
+}
+
+.bd-panel {
+  margin-bottom: 14px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+
+  /* A late close is a different act from an ordinary one, and looks like it. */
+  &--late {
+    border-left: 4px solid #dc2626;
+  }
+
+  &__wide {
+    display: block;
+    margin-top: 12px;
+    max-width: 640px;
+  }
+}
+
+/* The closing figure's arithmetic, laid out as a running sum so each line can be checked against
+   the screen it came from. */
+.bd-calc {
+  max-width: 520px;
+  margin-bottom: 14px;
+  padding: 10px 14px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 12px;
+
+  &__row {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 5px 0;
+    color: #475569;
+
+    &--in .bd-calc__amt {
+      color: #15803d;
+    }
+
+    &--out .bd-calc__amt {
+      color: #b91c1c;
+    }
+
+    &--total {
+      margin-top: 4px;
+      padding-top: 8px;
+      border-top: 2px solid #e2e8f0;
+      font-weight: 800;
+      font-size: 14px;
+      color: #0d1b2a;
+    }
+  }
+
+  &__amt {
+    font-variant-numeric: tabular-nums;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  &__memo {
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px dashed #e2e8f0;
+    font-size: 11px;
+    color: #94a3b8;
+  }
+}
+
+.bd-hint {
+  margin: 10px 0 0;
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.bd-note {
+  max-width: 280px;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+/* The denomination grid inside the open/close panels — same table chrome as pg-card elsewhere,
+   just tightened to sit inside the panel instead of spanning the page. */
+.bd-denom {
+  margin: 4px 0 0;
+  max-width: 520px;
+
+  /* Flags a row where the hand-count no longer matches what the vault/cashier positions reported. */
+  &__auto {
+    display: block;
+    margin-top: 2px;
+    font-size: 10px;
+    white-space: nowrap;
+  }
+
+  &__reset {
+    margin-left: 10px;
+    height: 24px;
+    padding: 0 10px;
+    font-size: 11px;
+  }
+}
+
+/* Auto-fetched EOD summary: what the vault and every cashier under it currently hold. */
+.bd-eod {
+  margin: 0 0 12px;
+  padding: 10px 14px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 12px;
+
+  &__head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 6px;
+
+    mat-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+      color: #0ea5e9;
+    }
+  }
+
+  &__denoms {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin: 4px 0 8px;
+  }
+
+  &__chip {
+    padding: 2px 8px;
+    background: #f1f5f9;
+    border-radius: 999px;
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    color: #334155;
+
+    &--up {
+      background: #dcfce7;
+      color: #15803d;
+    }
+
+    &--down {
+      background: #fee2e2;
+      color: #b91c1c;
+    }
+  }
+
+  &__cashier {
+    padding: 6px 0;
+    border-top: 1px dashed #e2e8f0;
+
+    &-head {
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      font-weight: 600;
+      color: #0d1b2a;
+      margin-bottom: 2px;
+    }
+  }
+
+  &__empty {
+    font-size: 11px;
+  }
+
+  &__status {
+    display: flex;
+    gap: 6px;
+    margin: 2px 0 6px;
+  }
+
+  &--total {
+    border-left: 4px solid #0ea5e9;
+    background: #f0f9ff;
+  }
+
+  &__totals {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 10px;
+    margin-bottom: 6px;
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+
+    &-sum {
+      font-weight: 800;
+      font-size: 15px;
+      color: #0d1b2a;
+    }
+  }
+}
+
+/* Alert shown when cashiers holding cash have not been reconciled or settled — blocks day close. */
+.bd-reconcile-block {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin: 14px 0;
+  padding: 12px 16px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-left: 4px solid #dc2626;
+  border-radius: 8px;
+  color: #991b1b;
+  font-size: 12px;
+
+  mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    color: #dc2626;
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+
+  &__list {
+    margin: 6px 0 6px 16px;
+    padding: 0;
+    list-style: disc;
+    font-size: 12px;
+    color: #b91c1c;
+    line-height: 1.6;
+  }
+}
+
+/* Amber, not red: an unreconciled cashier is now a reason to record why the day is being closed
+   rather than a refusal to close it at all. Red said "you cannot", which was true when the button
+   was disabled and misleading once a force close became possible. */
+.bd-reconcile-block--warn {
+  background: #fffbeb;
+  border-color: #fde68a;
+  border-left-color: #d97706;
+  color: #92400e;
+
+  mat-icon {
+    color: #d97706;
+  }
+}

src/app/cashier/branch-day/branch-day.component.ts

@@ -0,0 +1,717 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { catchError, forkJoin, map, of, switchMap } from 'rxjs';
+import { CashierService } from '../cashier.service';
+
+interface Denom {
+  id: number;
+  value: number;
+  kind: 'note' | 'coin';
+  label: string;
+}
+
+interface BranchDay {
+  id: number;
+  officeId: number;
+  officeName: string | null;
+  businessDate: string;
+  openedByName: string | null;
+  openedAt: string | null;
+  openingCash: number | null;
+  closedByName: string | null;
+  closedAt: string | null;
+  closingCash: number | null;
+  bookCash: number | null;
+  cashDifference: number | null;
+  forceClosed: boolean;
+  forceCloseReason: string | null;
+  remarks: string | null;
+  status: 'OPEN' | 'CLOSED';
+  /** Only present on the missed-close list. */
+  daysOpen?: number;
+}
+
+/**
+ * Branch day register — opening and closing the branch's business day, and the list of days that
+ * were opened and never closed.
+ *
+ * A day left open is not a tidiness problem: its closing balance never carries forward, a
+ * back-dated entry can still land in it, and any cash difference on that date goes unnoticed.
+ */
+@Component({
+  selector: 'mifosx-branch-day',
+  templateUrl: './branch-day.component.html',
+  styleUrls: [
+    '../cashier-shared.scss',
+    '../day-book/day-book.component.scss',
+    './branch-day.component.scss'
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIconModule,
+    RouterLink
+  ]
+})
+export class BranchDayComponent implements OnInit {
+  private service = inject(CashierService);
+  private route = inject(ActivatedRoute);
+
+  /**
+   * Set from the route: the missed-close register is the same data as the day register, shown with
+   * only the never-closed days. Two menu entries used to point at one screen, so choosing "Missed
+   * Close Register" looked like nothing had happened whenever the branch was up to date.
+   */
+  missedOnly = false;
+
+  days: BranchDay[] = [];
+  missed: BranchDay[] = [];
+  openDay: any = null;
+  today = '';
+  /** Set by the backend from the caller's roles — a cashier may read the register but not act on it. */
+  canOperate = false;
+  loading = false;
+  loaded = false;
+  errorMsg = '';
+  successMsg = '';
+  /** True only for a branch that has never opened a business day and whose Cash at Vault / Cash at
+   *  Teller GL account has never had anything posted to it — Open Day here would let day-to-day cash
+   *  tracking begin while the ledger silently stays wherever it already was. The backend enforces
+   *  this independently too (see BranchDayRegisterApiResource#requireCashMigrationBeforeFirstEverOpen);
+   *  this flag only steers the user to the right screen before they hit that rejection. */
+  firstOpenNeedsCashMigration = false;
+
+  // Open-day form
+  showOpenForm = false;
+  openDate = '';
+  openingCash: number | null = null;
+  /** Required only when the counted/typed opening figure differs from yesterday's own closing
+   *  figure — the backend rejects the open without it in that case. */
+  openDifferenceReason = '';
+  opening = false;
+
+  // Close-day form. The date is fixed by which day is being closed, never typed.
+  closeTarget: BranchDay | null = null;
+  closingCash: number | null = null;
+  closeRemarks = '';
+  forceReason = '';
+  closing = false;
+
+  // Denomination breakdown, shared by both the open and close forms — a physical note/coin count
+  // is the true source of the lump-sum figure, not a typed-in guess. Counted separately per form
+  // since opening and closing are two independent physical counts.
+  notes: Denom[] = [];
+  coins: Denom[] = [];
+  openCounts: Record<number, number> = {};
+  closeCounts: Record<number, number> = {};
+  /** What yesterday's own close counted, note by note — the open form starts from this instead of
+   *  zero. The backend already carries this figure forward on its own when nothing is submitted for
+   *  the day being opened; showing it here is only about letting whoever opens the day see and
+   *  correct it, not a second place the carry-forward logic lives. */
+  openCountsAuto: Record<number, number> = {};
+  /** What the vault + every cashier's live position added up to when the close form opened — the
+   *  physical-count table starts from this instead of zero, since the EOD summary already fetched
+   *  it. Kept separately from closeCounts so a manual recount can be told apart from it and undone. */
+  closeCountsAuto: Record<number, number> = {};
+
+  get allDenoms(): Denom[] {
+    return [
+      ...this.notes,
+      ...this.coins
+    ];
+  }
+
+  ngOnInit(): void {
+    this.missedOnly = !!this.route.snapshot.data['missedOnly'];
+    this.load();
+    this.service.getActiveDenominations().subscribe({
+      next: (list) => {
+        const rows: Denom[] = (list || []).map((x: any) => ({
+          id: x.id,
+          value: x.denomination,
+          kind: x.kind,
+          label: '₹' + x.denomination
+        }));
+        this.notes = rows.filter((r) => r.kind === 'note').sort((a, b) => b.value - a.value);
+        this.coins = rows.filter((r) => r.kind === 'coin').sort((a, b) => b.value - a.value);
+      },
+      error: () => {
+        this.notes = [];
+        this.coins = [];
+      }
+    });
+  }
+
+  countFor(counts: Record<number, number>, d: Denom): number {
+    return counts[d.id] || 0;
+  }
+
+  subtotalFor(counts: Record<number, number>, d: Denom): number {
+    return this.countFor(counts, d) * d.value;
+  }
+
+  onCountChange(counts: Record<number, number>, d: Denom, raw: any): void {
+    counts[d.id] = Math.max(0, Math.floor(Number(raw) || 0));
+  }
+
+  bumpCount(counts: Record<number, number>, d: Denom, delta: number): void {
+    counts[d.id] = Math.max(0, (counts[d.id] || 0) + delta);
+  }
+
+  totalOf(counts: Record<number, number>): number {
+    return this.allDenoms.reduce((s, d) => s + this.subtotalFor(counts, d), 0);
+  }
+
+  /** Denominations with a positive count, shaped for the API payload. */
+  private denominationPayload(counts: Record<number, number>) {
+    return this.allDenoms
+      .filter((d) => this.countFor(counts, d) > 0)
+      .map((d) => ({ denominationId: d.id, denominationValue: d.value, count: this.countFor(counts, d) }));
+  }
+
+  get openDenomTotal(): number {
+    return this.totalOf(this.openCounts);
+  }
+
+  get closeDenomTotal(): number {
+    return this.totalOf(this.closeCounts);
+  }
+
+  load(): void {
+    this.loading = true;
+    this.errorMsg = '';
+    this.service
+      .branchDayRegister()
+      .pipe(
+        catchError((err: any) => {
+          this.errorMsg =
+            err?.error?.errors?.[0]?.defaultUserMessage ?? err?.error?.message ?? 'Could not load the day register.';
+          return of(null);
+        })
+      )
+      .subscribe((res: any) => {
+        this.loading = false;
+        this.loaded = true;
+        this.days = res?.days ?? [];
+        this.openDay = res?.openDay ?? null;
+        this.today = res?.today ?? '';
+        this.canOperate = !!res?.canOperate;
+        this.openDate = this.today;
+        this.checkFirstOpenCashMigration();
+      });
+
+    this.service
+      .branchDayMissed()
+      .pipe(catchError(() => of(null)))
+      .subscribe((res: any) => {
+        this.missed = res?.missed ?? [];
+      });
+  }
+
+  /**
+   * Only relevant the moment this branch has never opened a business day before — every later
+   * open/close on this screen is untouched, so there is nothing to re-check once history exists.
+   */
+  private checkFirstOpenCashMigration(): void {
+    if (this.days.length > 0 || this.openDay) {
+      this.firstOpenNeedsCashMigration = false;
+      return;
+    }
+    this.service.cashGlStatus().subscribe({
+      next: (status: any) => {
+        // configured === false means this tenant has no Cash at Vault / Cash at Teller account
+        // mapped at all — nothing for this check to reconcile against, so it does not block.
+        this.firstOpenNeedsCashMigration = status?.configured !== false && !status?.hasBalance;
+      },
+      error: () => {
+        this.firstOpenNeedsCashMigration = false;
+      }
+    });
+  }
+
+  /** True when the branch has no open day at all, so today can be opened. */
+  get canOpenToday(): boolean {
+    return this.canOperate && !this.openDay && !this.firstOpenNeedsCashMigration;
+  }
+
+  /**
+   * A still-open day's closing/book figures are dropped from the API response entirely (the
+   * backend's Gson instance omits a null map value rather than sending it as JSON null), so the
+   * field arrives as undefined, not null. Checking only `!== null` against that — which a stricter
+   * pass of this file made the mistake of doing — leaves undefined on the "has a value" branch,
+   * which then renders `'₹' + null` (the number pipe's own null output, string-concatenated) as the
+   * literal text "₹null". This checks for either, the way an open day actually shows up.
+   */
+  hasValue(value: number | null | undefined): boolean {
+    return value !== null && value !== undefined;
+  }
+
+  startOpen(): void {
+    this.showOpenForm = true;
+    this.openDate = this.today;
+    // Left blank on purpose: the backend carries yesterday's closing forward, and typing a figure
+    // over it is how a carried balance drifts.
+    this.openingCash = null;
+    this.openCounts = {};
+    this.openCountsAuto = {};
+    this.openDifferenceReason = '';
+    this.successMsg = '';
+    this.errorMsg = '';
+    this.loadCarriedForwardDenominations();
+  }
+
+  cancelOpen(): void {
+    this.showOpenForm = false;
+    this.openCountsAuto = {};
+  }
+
+  /**
+   * Pulls yesterday's own closing note/coin count so the open form shows what is about to be
+   * carried forward instead of a blank table the caller has to trust blindly. Only the most
+   * recently closed day is used — the same day the backend itself falls back to when the caller
+   * submits no denominations and no lump sum.
+   */
+  private loadCarriedForwardDenominations(): void {
+    const lastClosed = this.days.find((d) => d.status === 'CLOSED' && d.closingCash != null);
+    if (!lastClosed) return;
+    this.service
+      .branchDayDenominations(lastClosed.officeId, lastClosed.businessDate)
+      .pipe(catchError(() => of(null)))
+      .subscribe((res: any) => {
+        const closing = res?.closing || [];
+        if (!closing.length) return;
+        const totals: Record<number, number> = {};
+        for (const d of closing) {
+          totals[d.denominationId] = (totals[d.denominationId] || 0) + Number(d.count || 0);
+        }
+        this.openCountsAuto = totals;
+        // Only overwrite the table if nothing has been typed/counted since the form opened.
+        if (this.openDenomTotal === 0 && this.openingCash == null) {
+          this.openCounts = { ...totals };
+        }
+      });
+  }
+
+  get hasAutoFilledOpenCounts(): boolean {
+    return Object.keys(this.openCountsAuto).length > 0;
+  }
+
+  autoOpenCountFor(d: Denom): number {
+    return this.openCountsAuto[d.id] || 0;
+  }
+
+  resetOpenToAutoFill(): void {
+    this.openCounts = { ...this.openCountsAuto };
+  }
+
+  get carriedForwardTotal(): number {
+    return this.totalOf(this.openCountsAuto);
+  }
+
+  /** The figure the form would actually submit right now — the denomination total when any note/coin
+   *  has been counted, otherwise the plain typed-in amount. Mirrors {@link effectiveClosingFigure}. */
+  get effectiveOpeningFigure(): number | null {
+    return this.openDenomTotal > 0 ? this.openDenomTotal : this.openingCash;
+  }
+
+  /** Difference between what is about to be opened with and what yesterday actually closed with —
+   *  visible before saving, the same way the close form shows a live difference against the book
+   *  figure, so a short/excess opening count isn't discovered only after the day is already running. */
+  get openLiveDifference(): number | null {
+    if (!this.hasAutoFilledOpenCounts || this.effectiveOpeningFigure == null) return null;
+    return this.effectiveOpeningFigure - this.carriedForwardTotal;
+  }
+
+  /** True once a reason is needed but hasn't been typed — the same "explain the gap before it's
+   *  allowed" gate the close form already applies to a late close. */
+  get needsOpenDifferenceReason(): boolean {
+    return this.openLiveDifference != null && this.openLiveDifference !== 0 && !this.openDifferenceReason.trim();
+  }
+
+  get canSubmitOpen(): boolean {
+    return !!this.openDate && !this.opening && !this.needsOpenDifferenceReason;
+  }
+
+  submitOpen(): void {
+    if (!this.openDate || this.needsOpenDifferenceReason) return;
+    this.opening = true;
+    this.errorMsg = '';
+    const denominations = this.denominationPayload(this.openCounts);
+    this.service
+      .openBranchDay(
+        this.openDate,
+        this.openingCash ?? undefined,
+        undefined,
+        denominations,
+        this.openDifferenceReason.trim() || undefined
+      )
+      .pipe(
+        catchError((err: any) => {
+          this.errorMsg =
+            err?.error?.errors?.[0]?.defaultUserMessage ?? err?.error?.message ?? 'Could not open the day.';
+          return of(null);
+        })
+      )
+      .subscribe((res: any) => {
+        this.opening = false;
+        if (res) {
+          this.showOpenForm = false;
+          this.successMsg = `Business day ${res.businessDate} opened.`;
+          this.load();
+        }
+      });
+  }
+
+  /** The day's expected figure and the working behind it, fetched when the close form opens. */
+  preview: any = null;
+  previewLoading = false;
+
+  startClose(day: BranchDay): void {
+    this.closeTarget = day;
+    this.closingCash = null;
+    this.closeCounts = {};
+    this.closeCountsAuto = {};
+    this.closeRemarks = '';
+    this.forceReason = '';
+    this.successMsg = '';
+    this.errorMsg = '';
+    this.preview = null;
+
+    // Pre-fill the counted figure with what the books expect. It stays editable — the day is still
+    // closed on what was physically counted — but in the ordinary case where the drawer tallies
+    // there is nothing to type, and no chance of a slip of the keyboard inventing a difference.
+    this.previewLoading = true;
+    this.service
+      .branchDayClosePreview(day.businessDate)
+      .pipe(catchError(() => of(null)))
+      .subscribe((res: any) => {
+        this.previewLoading = false;
+        this.preview = res;
+        if (res?.expectedCash != null && this.closingCash == null) {
+          this.closingCash = Number(res.expectedCash);
+        }
+      });
+
+    this.loadEodSummary(day);
+  }
+
+  // ── EOD denomination summary: what's in the vault, and what every cashier under it is
+  // currently holding, fetched automatically so closing the day doesn't require separately
+  // checking Vault Position and every cashier's own Cashier Position screen by hand. ──
+
+  eodLoading = false;
+  eodTellers: any[] = [];
+
+  /**
+   * Vault + every cashier's current holding, added up across the whole branch and checked against
+   * the book figure — the question a manager actually needs answered at close: does the BRANCH
+   * tally, not just the vault alone. Computed on read rather than stored, so it never has to be
+   * kept in sync across the two independent loads (the book preview and the EOD summary) that feed
+   * it.
+   */
+  get branchTotalSummary(): {
+    vaultTotal: number;
+    cashierTotal: number;
+    grandTotal: number;
+    expected: number;
+    difference: number;
+  } | null {
+    if (!this.preview || this.eodTellers.length === 0) return null;
+    let vaultTotal = 0;
+    let cashierTotal = 0;
+    for (const t of this.eodTellers) {
+      vaultTotal += Number(t.vault?.totalAmount ?? 0);
+      for (const c of t.cashiers) {
+        cashierTotal += Number(c.currentTotal ?? 0);
+      }
+    }
+    const grandTotal = vaultTotal + cashierTotal;
+    const expected = Number(this.preview.expectedCash ?? 0);
+    return { vaultTotal, cashierTotal, grandTotal, expected, difference: grandTotal - expected };
+  }
+
+  private loadEodSummary(day: BranchDay): void {
+    this.eodLoading = true;
+    this.eodTellers = [];
+    this.service
+      .getTellers(day.officeId)
+      .pipe(
+        switchMap((tellers) => {
+          const list = tellers || [];
+          if (!list.length) return of([]);
+          return forkJoin(list.map((t: any) => this.loadTellerSummary(t, day.businessDate)));
+        }),
+        catchError(() => of([]))
+      )
+      .subscribe((results: any[]) => {
+        this.eodLoading = false;
+        this.eodTellers = results;
+        this.autoFillCloseCounts();
+      });
+  }
+
+  /**
+   * Seeds the physical-count table from what the vault and every cashier are already shown to be
+   * holding, instead of leaving it at zero and making whoever closes the day re-key numbers that
+   * are already on screen above. It stays a starting point, not a lock — any row can still be
+   * corrected against what was actually counted, and {@link resetToAutoFill} undoes a correction.
+   */
+  private autoFillCloseCounts(): void {
+    const totals: Record<number, number> = {};
+    for (const t of this.eodTellers) {
+      for (const d of t.vault?.denominations || []) {
+        totals[d.denominationId] = (totals[d.denominationId] || 0) + Number(d.count || 0);
+      }
+      for (const c of t.cashiers || []) {
+        for (const d of c.denominations || []) {
+          totals[d.denominationId] = (totals[d.denominationId] || 0) + Number(d.count || 0);
+        }
+      }
+    }
+    if (Object.keys(totals).length === 0) return;
+    this.closeCountsAuto = totals;
+    this.closeCounts = { ...totals };
+  }
+
+  get hasAutoFilledCounts(): boolean {
+    return Object.keys(this.closeCountsAuto).length > 0;
+  }
+
+  /** The auto-fetched count for one denomination, so a row that was hand-edited away from it can
+   *  still show what the vault + cashier positions said. */
+  autoCountFor(d: Denom): number {
+    return this.closeCountsAuto[d.id] || 0;
+  }
+
+  resetToAutoFill(): void {
+    this.closeCounts = { ...this.closeCountsAuto };
+  }
+
+  private loadTellerSummary(teller: any, date: string) {
+    return forkJoin({
+      vault: this.service.vaultPosition(teller.id, date).pipe(catchError(() => of(null))),
+      cashiers: this.service.getCashiersForTeller(teller.id).pipe(catchError(() => of({ cashiers: [] })))
+    }).pipe(
+      switchMap(({ vault, cashiers }) => {
+        const cashierList = cashiers?.cashiers || [];
+        if (!cashierList.length) {
+          return of({ tellerId: teller.id, tellerName: teller.name, vault, cashiers: [] });
+        }
+        return forkJoin(cashierList.map((c: any) => this.loadCashierSummary(c, date))).pipe(
+          map((cashierSummaries: any[]) => ({
+            tellerId: teller.id,
+            tellerName: teller.name,
+            vault,
+            cashiers: cashierSummaries
+          }))
+        );
+      })
+    );
+  }
+
+  private loadCashierSummary(cashier: any, date: string) {
+    return forkJoin({
+      position: this.service.cashierPositionReport(cashier.id, date).pipe(catchError(() => of(null))),
+      morning: this.service.getCashierMorningBalance(cashier.id, date).pipe(catchError(() => of(null))),
+      reconciliation: this.service.checkReconciliation(cashier.id, date).pipe(catchError(() => of(null))),
+      settlement: this.service.checkSettlement(cashier.id, date).pipe(catchError(() => of(null))),
+      glEntries: this.service.getGlEntries(date, cashier.id, undefined, 0, 1).pipe(catchError(() => of(null)))
+    }).pipe(
+      map(({ position, morning, reconciliation, settlement, glEntries }: any) => {
+        const morningMap = new Map<number, number>();
+        (morning?.denominations || []).forEach((d: any) => morningMap.set(d.denominationId, d.morningCount ?? 0));
+        return {
+          cashierId: cashier.id,
+          cashierName: cashier.staffName,
+          morningTotal: Number(morning?.totalMorning ?? 0),
+          currentTotal: Number(position?.totalAmount ?? 0),
+          reconciled: reconciliation?.reconciled ?? null,
+          alreadySettled: settlement?.alreadySettled ?? null,
+          txnCount: glEntries?.totalFilteredRecords ?? null,
+          denominations: ((position?.denominations || []) as any[]).map((d: any) => ({
+            ...d,
+            morningCount: morningMap.get(d.denominationId) ?? 0,
+            delta: d.count - (morningMap.get(d.denominationId) ?? 0)
+          }))
+        };
+      })
+    );
+  }
+
+  /** The counted figure the form would submit right now — the denomination total when any note/coin
+   *  has been counted, otherwise the plain typed-in amount. */
+  get effectiveClosingFigure(): number | null {
+    return this.closeDenomTotal > 0 ? this.closeDenomTotal : this.closingCash;
+  }
+
+  /** Difference the form would record right now, so it is visible before saving. */
+  get liveDifference(): number | null {
+    if (!this.preview || this.effectiveClosingFigure == null) return null;
+    return Number(this.effectiveClosingFigure) - Number(this.preview.expectedCash ?? 0);
+  }
+
+  /** Puts the expected figure back after an edit. */
+  useExpected(): void {
+    if (this.preview?.expectedCash != null) {
+      this.closingCash = Number(this.preview.expectedCash);
+    }
+  }
+
+  cancelClose(): void {
+    this.closeTarget = null;
+    this.eodTellers = [];
+    this.closeCountsAuto = {};
+  }
+
+  /** A date earlier than today is a late close, and has to say why it was left open. */
+  get isLateClose(): boolean {
+    return !!this.closeTarget && this.closeTarget.businessDate < this.today;
+  }
+
+  /**
+   * True when any cashier who was given cash (currentTotal > 0) is still NOT reconciled
+   * or NOT settled — meaning outstanding cash hasn't been accounted for yet.
+   */
+  get hasUnreconciledOrUnsettledCashiers(): boolean {
+    for (const t of this.eodTellers) {
+      for (const c of t.cashiers) {
+        if (c.currentTotal > 0 && (c.reconciled === false || c.alreadySettled === false)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  /** Names of cashiers blocking the close, for the error message. */
+  get unreconciledOrUnsettledCashierDetails(): { name: string; notReconciled: boolean; notSettled: boolean }[] {
+    const result: { name: string; notReconciled: boolean; notSettled: boolean }[] = [];
+    for (const t of this.eodTellers) {
+      for (const c of t.cashiers) {
+        if (c.currentTotal > 0 && (c.reconciled === false || c.alreadySettled === false)) {
+          result.push({
+            name: c.cashierName,
+            notReconciled: c.reconciled === false,
+            notSettled: c.alreadySettled === false
+          });
+        }
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Whether a reason has to be given before the day can close.
+   *
+   * Only for a late close. Cash still sitting with a cashier is not something a reason excuses —
+   * see canSubmitClose.
+   */
+  get needsForceReason(): boolean {
+    return this.isLateClose;
+  }
+
+  get canSubmitClose(): boolean {
+    const hasFigure = this.closingCash != null || this.closeDenomTotal > 0;
+    if (!this.closeTarget || !hasFigure || this.closing) return false;
+    // Block while cashier/vault data is still loading — the reconciliation check can't run yet.
+    if (this.eodLoading || this.previewLoading) return false;
+    // An unreconciled cashier is a reason-required condition, not an absolute block: the backend
+    // accepts the close once a reason is recorded (and appends the cashiers' names to it), and
+    // refusing outright left a day that could never be closed at all — a cashier who reconciled on
+    // the wrong date, went on leave, or left mid-shift would strand that day and every day after it.
+    if (this.isLateClose || this.hasUnreconciledOrUnsettledCashiers) {
+      return !!this.forceReason.trim();
+    }
+    return true;
+  }
+
+  submitClose(): void {
+    if (this.eodLoading || this.previewLoading) {
+      this.errorMsg = 'Still loading the cashier and vault positions — try again in a moment.';
+      return;
+    }
+    // Safety net mirroring canSubmitClose: never send a close that the backend will refuse for a
+    // missing override reason.
+    if ((this.isLateClose || this.hasUnreconciledOrUnsettledCashiers) && !this.forceReason.trim()) {
+      this.errorMsg = 'Record why this day is being closed before submitting.';
+      return;
+    }
+    const day = this.closeTarget;
+    const denominations = this.denominationPayload(this.closeCounts);
+    const figure = denominations.length ? this.closeDenomTotal : this.closingCash;
+    if (!day || figure == null) return;
+
+    this.closing = true;
+    this.errorMsg = '';
+    this.service
+      .closeBranchDay(
+        day.businessDate,
+        Number(figure),
+        this.closeRemarks.trim() || undefined,
+        // Sent whenever one was typed, not only on a late close: it is also the override the backend
+        // needs for a same-day close over an unreconciled cashier, and gating it on isLateClose
+        // dropped it on exactly the request that could not succeed without it.
+        this.forceReason.trim() || undefined,
+        undefined,
+        denominations
+      )
+      .pipe(
+        catchError((err: any) => {
+          this.errorMsg =
+            err?.error?.errors?.[0]?.defaultUserMessage ?? err?.error?.message ?? 'Could not close the day.';
+          return of(null);
+        })
+      )
+      .subscribe((res: any) => {
+        this.closing = false;
+        if (res) {
+          this.closeTarget = null;
+          const diff = Number(res.cashDifference ?? 0);
+          this.successMsg =
+            diff === 0
+              ? `Business day ${res.businessDate} closed — cash tallied.`
+              : `Business day ${res.businessDate} closed with a difference of ₹${diff.toFixed(2)}.`;
+          this.load();
+        }
+      });
+  }
+
+  absValue(n: number): number {
+    return Math.abs(n);
+  }
+
+  /** Short/excess wording, since a bare signed number reads ambiguously on a cash figure. */
+  differenceLabel(d: number | null): string {
+    if (d == null) return '—';
+    const n = Number(d);
+    if (n === 0) return 'Tallied';
+    return n > 0 ? `Excess ₹${Math.abs(n).toFixed(2)}` : `Short ₹${Math.abs(n).toFixed(2)}`;
+  }
+
+  stamp(iso: string | null): string {
+    if (!iso) return '—';
+    const [
+      d,
+      t
+    ] = iso.split('T');
+    return t ? `${d} ${t.slice(0, 5)}` : d;
+  }
+
+  timeOnly(iso: string | null): string {
+    if (!iso) return '—';
+    const t = iso.split('T')[1];
+    return t ? t.slice(0, 5) : '—';
+  }
+}

src/app/cashier/cash-clearing-transfer-summary/cash-clearing-transfer-summary.component.html

@@ -0,0 +1,292 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="pg">
+  <header class="pg-head">
+    <div>
+      <div class="pg-eyebrow">SUB LEDGER · TRANSACTIONS · {{ scopeName | uppercase }}</div>
+      <h1 class="pg-title">Cash / Clearing / Transfer - Summary Report</h1>
+      <p class="pg-sub">
+        Opening, credit, debit and closing position across Cash, Transfer, Clearing and Digital channels as on
+        {{ asOnDate }}.
+      </p>
+    </div>
+    <div class="pg-toolbar">
+      @if (isHeadOffice) {
+        <label class="pg-field">
+          <span>Branch</span>
+          <select class="pg-select" [ngModel]="selectedBranchCode" (ngModelChange)="setBranch($event)">
+            <option value="ALL">All Branches (Consolidated)</option>
+            @for (b of branches; track b.code) {
+              <option [value]="b.code">{{ b.name }}</option>
+            }
+          </select>
+        </label>
+      }
+      <button type="button" class="pg-btn" [class.pg-btn--active]="showDetails" (click)="toggleDetails()">
+        {{ showDetails ? 'Summary View' : 'Transaction Details' }}
+      </button>
+      <button type="button" class="pg-btn pg-btn--ghost" [disabled]="generating" (click)="exportExcel()">
+        {{ generating ? 'Exporting…' : 'Export to Excel' }}
+      </button>
+    </div>
+  </header>
+
+  <div class="cctr-grand-summary">
+    <div class="cctr-grand-summary__item">
+      <span class="cctr-grand-summary__label">Opening</span>
+      <span class="cctr-grand-summary__value">₹{{ grandOpening | number: '1.2-2' }}</span>
+    </div>
+    <div class="cctr-grand-summary__item">
+      <span class="cctr-grand-summary__label">Credit</span>
+      <span class="cctr-grand-summary__value col-in">₹{{ grandCredit | number: '1.2-2' }}</span>
+    </div>
+    <div class="cctr-grand-summary__item">
+      <span class="cctr-grand-summary__label">Debit</span>
+      <span class="cctr-grand-summary__value col-out">₹{{ grandDebit | number: '1.2-2' }}</span>
+    </div>
+    <div class="cctr-grand-summary__item">
+      <span class="cctr-grand-summary__label">Closing</span>
+      <span class="cctr-grand-summary__value">₹{{ grandClosing | number: '1.2-2' }}</span>
+    </div>
+  </div>
+
+  @if (isHeadOffice && selectedBranchCode === 'ALL') {
+    <div class="pg-card">
+      <div class="pos-section-label">Branch-wise Break-up — click a branch to drill in</div>
+      <table class="pg-table">
+        <thead>
+          <tr>
+            <th>Branch</th>
+            <th class="num">Opening</th>
+            <th class="num col-in">Credit</th>
+            <th class="num col-out">Debit</th>
+            <th class="num col-net">Closing</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (b of branchBreakup; track b.code) {
+            <tr class="cctr-branch-row" (click)="setBranch(b.code)">
+              <td>{{ b.name }}</td>
+              <td class="num">₹{{ b.opening | number: '1.2-2' }}</td>
+              <td class="num col-in">₹{{ b.credit | number: '1.2-2' }}</td>
+              <td class="num col-out">₹{{ b.debit | number: '1.2-2' }}</td>
+              <td class="num col-net">₹{{ b.closing | number: '1.2-2' }}</td>
+            </tr>
+          }
+        </tbody>
+        <tfoot>
+          <tr class="cctr-total-row">
+            <td>All Branches</td>
+            <td class="num">₹{{ grandOpening | number: '1.2-2' }}</td>
+            <td class="num">₹{{ grandCredit | number: '1.2-2' }}</td>
+            <td class="num">₹{{ grandDebit | number: '1.2-2' }}</td>
+            <td class="num">₹{{ grandClosing | number: '1.2-2' }}</td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  }
+
+  <div class="cctr-tabs">
+    <button
+      type="button"
+      class="pg-btn pg-btn--ghost"
+      [class.pg-btn--active]="activeTab === 'cash'"
+      (click)="setTab('cash')"
+    >
+      Cash
+    </button>
+    <button
+      type="button"
+      class="pg-btn pg-btn--ghost"
+      [class.pg-btn--active]="activeTab === 'transfer'"
+      (click)="setTab('transfer')"
+    >
+      Transfer
+    </button>
+    <button
+      type="button"
+      class="pg-btn pg-btn--ghost"
+      [class.pg-btn--active]="activeTab === 'clearing'"
+      (click)="setTab('clearing')"
+    >
+      Clearing
+    </button>
+    <button
+      type="button"
+      class="pg-btn pg-btn--ghost"
+      [class.pg-btn--active]="activeTab === 'digital'"
+      (click)="setTab('digital')"
+    >
+      Digital
+    </button>
+  </div>
+
+  <!-- Summary (Opening | Credit | Debit | Closing) -->
+  @if (!showDetails) {
+    <div class="pg-card">
+      @if (activeTab === 'digital') {
+        <div class="pos-section-label">RTGS · NEFT · UPI · ATM · NACH — Overall Position</div>
+      }
+      <table class="pg-table">
+        <thead>
+          <tr>
+            @if (activeTab !== 'digital') {
+              <th>GL Code</th>
+            }
+            <th>Particulars</th>
+            <th class="num">Opening</th>
+            <th class="num col-in">Credit</th>
+            <th class="num col-out">Debit</th>
+            <th class="num col-net">Closing</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (r of rowsForActiveTab; track r.code) {
+            <tr>
+              @if (activeTab !== 'digital') {
+                <td>
+                  <span class="pg-chip">{{ r.code }}</span>
+                </td>
+              }
+              <td>{{ r.name }}</td>
+              <td class="num">₹{{ r.opening | number: '1.2-2' }}</td>
+              <td class="num col-in">₹{{ rowCredit(r, txnsForActiveTab) | number: '1.2-2' }}</td>
+              <td class="num col-out">₹{{ rowDebit(r, txnsForActiveTab) | number: '1.2-2' }}</td>
+              <td class="num col-net">₹{{ closing(r, txnsForActiveTab) | number: '1.2-2' }}</td>
+            </tr>
+          }
+        </tbody>
+        <tfoot>
+          <tr class="cctr-total-row">
+            <td [attr.colspan]="activeTab !== 'digital' ? 2 : 1">Total</td>
+            <td class="num">₹{{ total(rowsForActiveTab, txnsForActiveTab, 'opening') | number: '1.2-2' }}</td>
+            <td class="num">₹{{ total(rowsForActiveTab, txnsForActiveTab, 'credit') | number: '1.2-2' }}</td>
+            <td class="num">₹{{ total(rowsForActiveTab, txnsForActiveTab, 'debit') | number: '1.2-2' }}</td>
+            <td class="num">₹{{ totalClosing(rowsForActiveTab, txnsForActiveTab) | number: '1.2-2' }}</td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  }
+
+  <!-- Transaction Details (all txns for the selected category, optionally filtered by GL/channel) -->
+  @if (showDetails) {
+    @if (rowsForActiveTab.length > 1) {
+      <div class="cctr-tabs">
+        <button
+          type="button"
+          class="pg-btn pg-btn--ghost"
+          [class.pg-btn--active]="glFilter === null"
+          (click)="setGlFilter(null)"
+        >
+          All
+        </button>
+        @for (r of rowsForActiveTab; track r.code) {
+          <button
+            type="button"
+            class="pg-btn pg-btn--ghost"
+            [class.pg-btn--active]="glFilter === r.code"
+            (click)="setGlFilter(r.code)"
+          >
+            {{ filterLabel(r) }}
+          </button>
+        }
+      </div>
+    }
+
+    <div class="pg-card">
+      <div class="pos-section-label">
+        {{
+          activeTab === 'cash'
+            ? 'Cash'
+            : activeTab === 'transfer'
+              ? 'Transfer'
+              : activeTab === 'clearing'
+                ? 'Clearing'
+                : 'Digital'
+        }}
+        — Transaction Details (Full Double Entry)
+        @if (glFilter !== null) {
+          · {{ glFilter }}
+        }
+      </div>
+      <table class="pg-table cctr-journal">
+        <thead>
+          <tr>
+            <th>Date</th>
+            <th>Voucher / Ref No</th>
+            <th>Dr / Cr</th>
+            <th>GL / Account</th>
+            <th class="num col-out">Debit</th>
+            <th class="num col-in">Credit</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (t of filteredTxns; track t.voucherNo) {
+            <tr class="cctr-journal-row cctr-journal-row--first">
+              <td>{{ asOnDate }}</td>
+              <td>
+                <span class="pg-chip">{{ display(t.voucherNo) }}</span>
+              </td>
+              <td><span class="cctr-drcr cctr-drcr--dr">Dr</span></td>
+              <td>
+                @if (t.debit > 0) {
+                  <span class="pg-chip">{{ t.glCode }}</span> {{ glName(t.glCode) }} — {{ display(t.accountNo) }} ({{
+                    t.accountName
+                  }})
+                } @else {
+                  <span class="cctr-contra">{{ contraLabel(t) }}</span>
+                }
+              </td>
+              <td class="num col-out">₹{{ legAmount(t) | number: '1.2-2' }}</td>
+              <td class="num"></td>
+              <td rowspan="2">
+                <span class="cctr-balanced-chip">✓ Balanced</span>
+              </td>
+            </tr>
+            <tr class="cctr-journal-row cctr-journal-row--second">
+              <td></td>
+              <td></td>
+              <td><span class="cctr-drcr cctr-drcr--cr">Cr</span></td>
+              <td>
+                @if (t.credit > 0) {
+                  <span class="pg-chip">{{ t.glCode }}</span> {{ glName(t.glCode) }} — {{ display(t.accountNo) }} ({{
+                    t.accountName
+                  }})
+                } @else {
+                  <span class="cctr-contra">{{ contraLabel(t) }}</span>
+                }
+              </td>
+              <td class="num"></td>
+              <td class="num col-in">₹{{ legAmount(t) | number: '1.2-2' }}</td>
+            </tr>
+          } @empty {
+            <tr>
+              <td colspan="7" class="pg-empty">No transactions for this filter.</td>
+            </tr>
+          }
+        </tbody>
+        <tfoot>
+          <tr class="cctr-total-row">
+            <td colspan="4">Total ({{ filteredTxns.length }} vouchers)</td>
+            <td class="num">
+              ₹{{ txnTotal(filteredTxns, 'debit') + txnTotal(filteredTxns, 'credit') | number: '1.2-2' }}
+            </td>
+            <td class="num">
+              ₹{{ txnTotal(filteredTxns, 'debit') + txnTotal(filteredTxns, 'credit') | number: '1.2-2' }}
+            </td>
+            <td></td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  }
+</div>

src/app/cashier/cash-clearing-transfer-summary/cash-clearing-transfer-summary.component.scss

@@ -0,0 +1,138 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+.cctr-tabs {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.cctr-total-row {
+  td {
+    background: #f1f5f9;
+    font-weight: 800;
+    border-top: 2px solid #cbd5e1;
+    border-bottom: none;
+    color: #0f172a;
+  }
+}
+
+.cctr-grand-summary {
+  display: flex;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  overflow: hidden;
+
+  &__item {
+    flex: 1;
+    padding: 14px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    border-right: 1px solid #e2e8f0;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  &__label {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: #64748b;
+  }
+
+  &__value {
+    font-size: 20px;
+    font-weight: 800;
+    font-variant-numeric: tabular-nums;
+    color: #0f172a;
+  }
+}
+
+.cctr-subtext {
+  font-size: 11px;
+  color: #94a3b8;
+  margin-top: 2px;
+}
+
+.cctr-branch-row {
+  cursor: pointer;
+
+  &:hover td {
+    background: #eff6ff;
+  }
+}
+
+// Both journal lines of one voucher share a tint and sit flush against each other (no dotted
+// divider between them) so the pair reads as a single entry; a hairline separates one voucher's
+// pair from the next.
+.cctr-journal-row {
+  &--first td {
+    border-bottom: none;
+    padding-bottom: 4px;
+  }
+
+  &--second td {
+    border-top: none;
+    padding-top: 4px;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  &--first,
+  &--second {
+    &:hover td {
+      background: #f8fafc;
+    }
+  }
+}
+
+.cctr-drcr {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  padding: 1px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.03em;
+
+  &--dr {
+    background: #eff6ff;
+    color: #1d4ed8;
+    border: 1px solid #bfdbfe;
+  }
+
+  &--cr {
+    background: #f0fdf4;
+    color: #15803d;
+    border: 1px solid #bbf7d0;
+  }
+}
+
+.cctr-contra {
+  color: #64748b;
+  font-style: italic;
+}
+
+.cctr-balanced-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  background: #f0fdf4;
+  color: #15803d;
+  border: 1px solid #bbf7d0;
+  white-space: nowrap;
+}

src/app/cashier/cash-transfer/cash-transfer.component.html

@@ -50,7 +50,7 @@
 
     <mat-form-field appearance="outline" subscriptSizing="dynamic">
       <mat-label>Date</mat-label>
-      <input matInput type="date" [value]="transferDate" (change)="transferDate = $any($event.target).value" />
+      <input matInput type="date" [value]="transferDate" (change)="onDateChange($any($event.target).value)" />
     </mat-form-field>
 
     <mat-form-field appearance="outline" subscriptSizing="dynamic" class="pg-note-field">
@@ -59,11 +59,28 @@
     </mat-form-field>
   </div>
 
+  <!-- What the vault actually has, before anyone starts counting a handout it can't cover. -->
+  @if (fromTellerId && !loadingVault) {
+    @if (vaultHasBreakdown) {
+      <div class="ct-vault-banner">
+        <mat-icon>account_balance</mat-icon>
+        Vault available: <strong>₹{{ vaultTotalAvailable | number: '1.2-2' }}</strong>
+      </div>
+    } @else {
+      <div class="ct-vault-banner ct-vault-banner--warn">
+        <mat-icon>warning</mat-icon>
+        No denomination breakdown recorded for this vault — per-note availability can't be checked, only the total
+        opening balance.
+      </div>
+    }
+  }
+
   <div class="pg-card">
     <table class="pg-table">
       <thead>
         <tr>
           <th>Denomination</th>
+          <th class="num">Available</th>
           <th style="text-align: center">Count</th>
           <th class="num">Amount</th>
         </tr>
@@ -71,14 +88,17 @@
       <tbody>
         @if (notes.length) {
           <tr class="pg-section">
-            <td colspan="3">Bank Notes</td>
+            <td colspan="4">Bank Notes</td>
           </tr>
         }
         @for (d of notes; track d.id) {
-          <tr>
+          <tr [class.ct-row--over]="exceedsAvailable(d)">
             <td>
               <span class="pg-chip">{{ d.label }}</span>
             </td>
+            <td class="num" [class.ct-available--over]="exceedsAvailable(d)">
+              {{ vaultHasBreakdown ? availableFor(d) : '—' }}
+            </td>
             <td style="display: flex; justify-content: center">
               <div class="pg-step">
                 <button type="button" (click)="bump(d, -1)" [disabled]="countFor(d) === 0">−</button>
@@ -91,14 +111,17 @@
         }
         @if (coins.length) {
           <tr class="pg-section">
-            <td colspan="3">Coins</td>
+            <td colspan="4">Coins</td>
           </tr>
         }
         @for (d of coins; track d.id) {
-          <tr>
+          <tr [class.ct-row--over]="exceedsAvailable(d)">
             <td>
               <span class="pg-chip pg-chip--coin">{{ d.label }}</span>
             </td>
+            <td class="num" [class.ct-available--over]="exceedsAvailable(d)">
+              {{ vaultHasBreakdown ? availableFor(d) : '—' }}
+            </td>
             <td style="display: flex; justify-content: center">
               <div class="pg-step">
                 <button type="button" (click)="bump(d, -1)" [disabled]="countFor(d) === 0">−</button>
@@ -111,13 +134,24 @@
         }
         @if (denoms.length === 0) {
           <tr>
-            <td colspan="3" class="pg-empty">No active denominations. Add some in Cash Denomination.</td>
+            <td colspan="4" class="pg-empty">No active denominations. Add some in Cash Denomination.</td>
           </tr>
         }
       </tbody>
     </table>
   </div>
 
+  @if (anyDenomExceedsAvailable) {
+    <div class="ct-limit-warn">
+      One or more notes/coins above are counted higher than the vault currently holds — reduce them before recording the
+      transfer.
+    </div>
+  } @else if (exceedsVaultTotal) {
+    <div class="ct-limit-warn">
+      Total exceeds what the vault has available (₹{{ vaultTotalAvailable | number: '1.2-2' }}).
+    </div>
+  }
+
   <div class="pg-total-bar">
     Total to transfer: <strong>₹{{ total | number: '1.2-2' }}</strong>
     <button type="button" class="pg-btn pg-btn--primary" [disabled]="!valid || saving" (click)="submit()">

src/app/cashier/cash-transfer/cash-transfer.component.scss

@@ -0,0 +1,51 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+.ct-vault-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  margin-bottom: 10px;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 8px;
+  font-size: 12px;
+  color: #1e40af;
+
+  mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+
+  &--warn {
+    background: #fffbeb;
+    border-color: #fde68a;
+    color: #92400e;
+  }
+}
+
+.ct-row--over {
+  background: #fef2f2;
+}
+
+.ct-available--over {
+  color: #b91c1c;
+  font-weight: 700;
+}
+
+.ct-limit-warn {
+  margin: 8px 0;
+  padding: 8px 14px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  font-size: 12px;
+  color: #991b1b;
+}

src/app/cashier/cash-transfer/cash-transfer.component.ts

@@ -29,7 +29,10 @@ interface Denom {
 @Component({
   selector: 'mifosx-cash-transfer',
   templateUrl: './cash-transfer.component.html',
-  styleUrls: ['../cashier-shared.scss'],
+  styleUrls: [
+    '../cashier-shared.scss',
+    './cash-transfer.component.scss'
+  ],
   standalone: true,
   imports: [
     CommonModule,
@@ -70,6 +73,14 @@ export class CashTransferComponent implements OnInit {
     ];
   }
 
+  /** What the selected vault currently holds, denomination-wise — fetched so a clerk can see
+   *  before counting whether the vault even has enough of a given note, instead of finding out
+   *  only after the backend rejects the transfer. */
+  vaultAvailable: Record<number, number> = {};
+  vaultTotalAvailable = 0;
+  vaultHasBreakdown = true;
+  loadingVault = false;
+
   ngOnInit(): void {
     const d = new Date();
     this.transferDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
@@ -101,7 +112,8 @@ export class CashTransferComponent implements OnInit {
       });
   }
 
-  /** When a From-teller is chosen, load ONLY that teller's cashiers into the To dropdown. */
+  /** When a From-teller is chosen, load ONLY that teller's cashiers into the To dropdown, and the
+   *  vault's own current denomination-wise stock so it can be shown against every count field. */
   onTellerSelect(tellerId: number): void {
     this.fromTellerId = tellerId;
     const teller = this.tellers.find((t) => t.id === tellerId);
@@ -109,6 +121,7 @@ export class CashTransferComponent implements OnInit {
     this.toParty = '';
     this.toCashierId = null;
     this.cashiers = [];
+    this.loadVaultAvailability();
     if (!tellerId) {
       return;
     }
@@ -125,6 +138,45 @@ export class CashTransferComponent implements OnInit {
       });
   }
 
+  /** Refetched whenever the vault or the transfer date changes — the vault's stock is only ever
+   *  meaningful as of a specific business date. */
+  loadVaultAvailability(): void {
+    this.vaultAvailable = {};
+    this.vaultTotalAvailable = 0;
+    this.vaultHasBreakdown = true;
+    if (!this.fromTellerId) return;
+    this.loadingVault = true;
+    this.service
+      .vaultPosition(this.fromTellerId, this.transferDate)
+      .pipe(catchError(() => of(null)))
+      .subscribe((res: any) => {
+        this.loadingVault = false;
+        this.vaultHasBreakdown = !!res?.hasBreakdown;
+        this.vaultTotalAvailable = Number(res?.totalAmount ?? 0);
+        const map: Record<number, number> = {};
+        ((res?.denominations || []) as any[]).forEach((d: any) => (map[d.denominationId] = d.count));
+        this.vaultAvailable = map;
+      });
+  }
+
+  onDateChange(value: string): void {
+    this.transferDate = value;
+    this.loadVaultAvailability();
+  }
+
+  /** How many of this denomination the vault currently holds — 0, not undefined, when the vault's
+   *  breakdown is known but simply doesn't list this denomination (i.e. it truly has none left). */
+  availableFor(d: Denom): number {
+    return this.vaultAvailable[d.id] ?? 0;
+  }
+
+  /** Whether the count entered for this denomination is more than the vault is known to hold —
+   *  only flagged once the vault's breakdown has actually loaded, so an empty in-flight state
+   *  doesn't flash every row as over-limit. */
+  exceedsAvailable(d: Denom): boolean {
+    return this.vaultHasBreakdown && this.countFor(d) > this.availableFor(d);
+  }
+
   /** When a To-cashier is chosen, capture its id and name. */
   onCashierSelect(cashierId: number): void {
     this.toCashierId = cashierId;
@@ -152,8 +204,24 @@ export class CashTransferComponent implements OnInit {
     return this.denoms.reduce((s, d) => s + this.subtotal(d), 0);
   }
 
+  /** True once any counted denomination is over what the vault holds — checked client-side purely
+   *  so the clerk sees it before submitting; the backend enforces this too regardless. */
+  get anyDenomExceedsAvailable(): boolean {
+    return this.denoms.some((d) => this.exceedsAvailable(d));
+  }
+
+  get exceedsVaultTotal(): boolean {
+    return this.vaultHasBreakdown && this.total > this.vaultTotalAvailable && this.total > 0;
+  }
+
   get valid(): boolean {
-    return this.total > 0 && !!this.fromTellerId && !!this.toCashierId;
+    return (
+      this.total > 0 &&
+      !!this.fromTellerId &&
+      !!this.toCashierId &&
+      !this.anyDenomExceedsAvailable &&
+      !this.exceedsVaultTotal
+    );
   }
 
   clear(): void {

src/app/cashier/cashier-export.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+// Shared "Export to Excel" builder for Cashier reports (mirrors ../investment/investment-export.ts)
+// — centralised so the ExcelJS boilerplate (title/meta/header rows, number formatting, safe sheet
+// names, Blob download) is written once and every cashier report's export behaves the same way.
+
+import * as ExcelJS from 'exceljs';
+
+export interface ExportSheetSpec {
+  /** Worksheet tab name — sanitised for Excel's forbidden characters (\ / ? * [ ]) and length. */
+  sheetName: string;
+  /** Bold title row, merged across all columns. */
+  title: string;
+  /** Optional italic subtitle row (e.g. scope/date), merged across all columns. */
+  subtitle?: string;
+  headers: string[];
+  rows: (string | number | null)[][];
+  widths?: number[];
+}
+
+/** Excel worksheet names can't contain \ / ? * [ ] or exceed 31 chars. */
+function safeSheetName(name: string): string {
+  return name.replace(/[\\/?*[\]]/g, '-').slice(0, 31);
+}
+
+function buildSheet(wb: ExcelJS.Workbook, spec: ExportSheetSpec): void {
+  const sheet = wb.addWorksheet(safeSheetName(spec.sheetName));
+  sheet.columns = (spec.widths || spec.headers.map(() => 18)).map((w) => ({ width: w }));
+
+  const title = sheet.addRow([spec.title]);
+  sheet.mergeCells(title.number, 1, title.number, spec.headers.length);
+  title.font = { bold: true, size: 14, color: { argb: 'FFFFFFFF' } };
+  title.alignment = { horizontal: 'center', vertical: 'middle' };
+  title.height = 24;
+  title.getCell(1).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF0F4F3C' } };
+
+  if (spec.subtitle) {
+    const meta = sheet.addRow([spec.subtitle]);
+    sheet.mergeCells(meta.number, 1, meta.number, spec.headers.length);
+    meta.font = { italic: true, size: 10 };
+  }
+  sheet.addRow([]);
+
+  const head = sheet.addRow(spec.headers);
+  head.font = { bold: true };
+  head.alignment = { wrapText: true, horizontal: 'center' };
+  head.eachCell((c) => {
+    c.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE2E8F0' } };
+    c.border = { bottom: { style: 'thin' } };
+  });
+
+  for (const r of spec.rows) {
+    const row = sheet.addRow(r);
+    r.forEach((v, idx) => {
+      if (typeof v === 'number') {
+        row.getCell(idx + 1).numFmt = '#,##0.00';
+      }
+    });
+  }
+  sheet.views = [{ state: 'frozen', ySplit: spec.subtitle ? 4 : 3 }];
+}
+
+/** Builds a (possibly multi-sheet) workbook and triggers a browser download. */
+export async function exportWorkbook(sheets: ExportSheetSpec[], fileName: string): Promise<void> {
+  const wb = new ExcelJS.Workbook();
+  wb.creator = 'CBSNexora';
+  wb.created = new Date();
+  sheets.forEach((s) => buildSheet(wb, s));
+
+  const buffer = await wb.xlsx.writeBuffer();
+  const blob = new Blob([buffer], {
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${fileName.replace(/[^\w]+/g, '-')}.xlsx`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}

src/app/cashier/cashier-routing.module.ts

@@ -19,6 +19,11 @@ import { InterCashierTransferComponent } from './inter-cashier-transfer/inter-ca
 import { CashierPositionComponent } from './cashier-position/cashier-position.component';
 import { ReconciliationComponent } from './reconciliation/reconciliation.component';
 import { CashHistoryComponent } from './cash-history/cash-history.component';
+import { DayBookComponent } from './day-book/day-book.component';
+import { VoucherReportComponent } from './voucher-report/voucher-report.component';
+import { BranchDayComponent } from './branch-day/branch-day.component';
+import { VaultPositionComponent } from './vault-position/vault-position.component';
+import { AccountRegisterComponent } from './account-register/account-register.component';
 import { ClosingCashReportComponent } from './closing-cash-report/closing-cash-report.component';
 import { ExcessTransactionReportComponent } from './excess-transaction-report/excess-transaction-report.component';
 import { ShareCollectionComponent } from './share-collection/share-collection.component';
@@ -60,7 +65,7 @@ const routes: Routes = [
             import('../clerk/my-disbursement-requests/my-disbursement-requests.component').then(
               (m) => m.MyDisbursementRequestsComponent
             ),
-          data: { title: 'My Disbursement Requests', breadcrumb: 'My Disbursement Requests' }
+          data: { title: 'Disbursements & Transfer', breadcrumb: 'Disbursements & Transfer' }
         },
         {
           path: 'share-withdrawal-request',
@@ -79,20 +84,12 @@ const routes: Routes = [
           data: { title: 'My Share Requests', breadcrumb: 'My Share Requests' }
         },
         {
-          path: 'share-closure-request',
+          path: 'closure-requests',
           loadComponent: () =>
-            import('../clerk/share-closure-request/share-closure-request.component').then(
-              (m) => m.ShareClosureRequestComponent
+            import('../clerk/my-closure-requests/my-closure-requests.component').then(
+              (m) => m.MyClosureRequestsComponent
             ),
-          data: { title: 'New Share Closure Request', breadcrumb: 'New Share Closure Request', mode: 'create' }
-        },
-        {
-          path: 'share-closure-requests',
-          loadComponent: () =>
-            import('../clerk/my-share-closure-requests/my-share-closure-requests.component').then(
-              (m) => m.MyShareClosureRequestsComponent
-            ),
-          data: { title: 'My Share Closure Requests', breadcrumb: 'My Share Closure Requests' }
+          data: { title: 'My Closure Requests', breadcrumb: 'My Closure Requests' }
         },
         {
           path: 'account-facilities',
@@ -120,6 +117,59 @@ const routes: Routes = [
             import('../clerk/photo-signature/photo-signature.component').then((m) => m.PhotoSignatureComponent),
           data: { title: 'Photo & Signature', breadcrumb: 'Photo & Signature' }
         },
+        // The same register the cashier screens use, without their cash-only filter: a clerk raises
+        // book entries — a closure settled to savings, a share redemption, an interest posting the
+        // system made on their approval — and cash-only would hide exactly those.
+        {
+          path: 'received-report',
+          component: VoucherReportComponent,
+          data: {
+            title: 'Received Vouchers',
+            breadcrumb: 'Received Vouchers',
+            side: 'CR',
+            cashOnly: false,
+            cashiersOnly: true
+          }
+        },
+        {
+          path: 'payment-report',
+          component: VoucherReportComponent,
+          data: {
+            title: 'Payment Vouchers',
+            breadcrumb: 'Payment Vouchers',
+            side: 'DR',
+            cashOnly: false,
+            cashiersOnly: true
+          }
+        },
+        // Both sides in one list, scoped to whoever is signed in — the "what did I do today"
+        // question the two registers above cannot answer, because an approval raises no voucher.
+        {
+          path: 'my-work',
+          loadComponent: () => import('../cashier/my-work/my-work.component').then((m) => m.MyWorkComponent),
+          data: { title: 'My Vouchers', breadcrumb: 'My Vouchers' }
+        },
+        {
+          path: 'end-of-day',
+          loadComponent: () =>
+            import('../cashier/end-of-day-report/end-of-day-report.component').then((m) => m.EndOfDayReportComponent),
+          data: { title: 'End of the Day Report', breadcrumb: 'End of the Day Report' }
+        },
+        // The system's own postings — interest, charges, escheats, journals. Both sides in one
+        // list: a night's run credits and debits, and splitting it across two screens would hide
+        // half of it from whichever one you opened.
+        {
+          path: 'system-vouchers',
+          component: VoucherReportComponent,
+          data: {
+            title: 'System Vouchers',
+            breadcrumb: 'System Vouchers',
+            side: 'ALL',
+            cashOnly: false,
+            cashiersOnly: false,
+            systemOnly: true
+          }
+        },
         {
           path: 'standing-instructions',
           loadComponent: () =>
@@ -133,6 +183,65 @@ const routes: Routes = [
           loadComponent: () =>
             import('../clerk/today-activity/today-activity.component').then((m) => m.TodayActivityComponent),
           data: { title: "Today's Activity", breadcrumb: "Today's Activity" }
+        },
+        {
+          path: 'dividend-dashboard',
+          loadComponent: () =>
+            import('../clerk/dividend-dashboard/dividend-dashboard.component').then(
+              (m) => m.DividendDashboardComponent
+            ),
+          data: { title: 'Dividend Dashboard', breadcrumb: 'Dividend Dashboard' }
+        }
+      ]
+    },
+    {
+      // Branch-level operations, kept out of the cashier tree on purpose: opening and closing the
+      // day governs the whole branch, and is not something a cashier does.
+      path: 'branch-ops',
+      data: { title: 'Branch Operations', breadcrumb: 'Branch Operations' },
+      children: [
+        {
+          path: 'day-register',
+          component: BranchDayComponent,
+          data: { title: 'Day Open / Day Close', breadcrumb: 'Day Register' }
+        },
+        {
+          // Same screen, narrowed to the days that were never closed. A separate route rather than
+          // a second link to the register, so choosing it visibly does something.
+          path: 'missed-close',
+          component: BranchDayComponent,
+          data: { title: 'Missed Close Register', breadcrumb: 'Missed Close', missedOnly: true }
+        },
+        {
+          // Lives here alongside the day register because both answer "what did this branch look
+          // like on that date"; it is linked from the Reports menu, where people go to find it.
+          path: 'account-register',
+          component: AccountRegisterComponent,
+          data: { title: 'Account Register', breadcrumb: 'Account Register' }
+        },
+        {
+          // Same branch-level scope as the day register: this is the vault's own stock, not any
+          // one cashier's float, so it sits with the other branch-wide screens.
+          path: 'vault-position',
+          component: VaultPositionComponent,
+          data: { title: 'Vault Position', breadcrumb: 'Vault Position' }
+        },
+        {
+          // The same day book the clerk and cashier read, reached from where a principal officer
+          // signing the day off actually looks. It carries the Officer Verification Sheet — each
+          // person's own credit, debit and net — which is the branch-level reading of the day, not
+          // a counter one.
+          path: 'day-book',
+          component: DayBookComponent,
+          data: { title: 'Day Book & Verification', breadcrumb: 'Day Book' }
+        },
+        // The one sheet the day is signed off on: the transaction summary, the drawer counted
+        // against the books, and the notes that say why it cannot be closed yet.
+        {
+          path: 'end-of-day',
+          loadComponent: () =>
+            import('./end-of-day-report/end-of-day-report.component').then((m) => m.EndOfDayReportComponent),
+          data: { title: 'End of the Day Report', breadcrumb: 'End of the Day Report' }
         }
       ]
     },
@@ -180,11 +289,57 @@ const routes: Routes = [
           component: CashHistoryComponent,
           data: { title: 'Cash History', breadcrumb: 'Cash History' }
         },
+        {
+          path: 'day-book',
+          component: DayBookComponent,
+          data: { title: 'Day Book', breadcrumb: 'Day Book' }
+        },
+        // The register is read one side at a time: Received is the CR side, Payment the DR side.
+        // Same component both times — the side it shows comes from `data.side`.
+        //
+        // `cashOnly` is what makes these the cashier's own registers rather than the whole voucher
+        // book: a cashier deals in notes and coins, so only vouchers that actually moved cash
+        // belong here, and the two reports then reconcile against the drawer and the closing
+        // report. A back-office screen wanting every voucher points at the same component without
+        // the flag.
+        {
+          path: 'received-report',
+          component: VoucherReportComponent,
+          data: {
+            title: 'Received Report',
+            breadcrumb: 'Received Report',
+            side: 'CR',
+            cashOnly: true,
+            cashiersOnly: true
+          }
+        },
+        {
+          path: 'payment-report',
+          component: VoucherReportComponent,
+          data: {
+            title: 'Payment Report',
+            breadcrumb: 'Payment Report',
+            side: 'DR',
+            cashOnly: true,
+            cashiersOnly: true
+          }
+        },
+        {
+          path: 'my-work',
+          loadComponent: () => import('./my-work/my-work.component').then((m) => m.MyWorkComponent),
+          data: { title: 'My Vouchers', breadcrumb: 'My Vouchers' }
+        },
         {
           path: 'closing-report',
           component: ClosingCashReportComponent,
           data: { title: 'Closing Cash Report', breadcrumb: 'Closing Cash Report' }
         },
+        {
+          path: 'end-of-day',
+          loadComponent: () =>
+            import('./end-of-day-report/end-of-day-report.component').then((m) => m.EndOfDayReportComponent),
+          data: { title: 'End of the Day Report', breadcrumb: 'End of the Day Report' }
+        },
         {
           path: 'excess-report',
           component: ExcessTransactionReportComponent,
@@ -211,6 +366,17 @@ const routes: Routes = [
           loadComponent: () =>
             import('./my-deposit-requests/my-deposit-requests.component').then((m) => m.MyDepositRequestsComponent),
           data: { title: 'My Deposit Requests', breadcrumb: 'My Deposit Requests' }
+        },
+        {
+          path: 'cash-clearing-transfer-summary',
+          loadComponent: () =>
+            import('./cash-clearing-transfer-summary/cash-clearing-transfer-summary.component').then(
+              (m) => m.CashClearingTransferSummaryComponent
+            ),
+          data: {
+            title: 'Cash / Clearing / Transfer - Summary Report',
+            breadcrumb: 'Cash / Clearing / Transfer - Summary Report'
+          }
         }
       ]
     }

src/app/cashier/cashier-shared.scss

@@ -206,6 +206,7 @@
   border-radius: 6px;
   font-size: 12px;
   font-weight: 700;
+  white-space: nowrap;
   background: linear-gradient(135deg, #ecfeff, #cffafe);
   color: #155e75;
   border: 1px solid #a5f3fc;
@@ -311,6 +312,47 @@
     font-variant-numeric: tabular-nums;
     color: #0f172a;
   }
+
+  // Names the part of a total that has no row in the table below, so the figures do not read as
+  // failing to add up.
+  &__note {
+    margin-top: 2px;
+    font-size: 10px;
+    line-height: 1.4;
+    color: #64748b;
+  }
+
+  // The drawer strip sits under the counter totals and is the figure a physical count is checked
+  // against, so it is marked out as the one to read rather than a second row of the same thing.
+  &--balance {
+    margin-top: 10px;
+    border-color: #cbd5e1;
+    box-shadow: 0 1px 3px rgb(15 23 42 / 8%);
+  }
+}
+
+.closing-note {
+  margin: 8px 0 0;
+  font-size: 11px;
+  line-height: 1.5;
+  color: #64748b;
+}
+
+// Says what a row without a denomination is, next to its chip.
+.closing-row__hint {
+  margin-left: 6px;
+  font-size: 11px;
+  color: #64748b;
+}
+
+// A totals row, marked off from the rows it sums. Defined here rather than only in the day book's
+// own stylesheet, which the other cashier screens do not load.
+.pg-table tfoot td {
+  background: #f8fafc;
+  font-weight: 800;
+  font-size: 12px;
+  color: #334155;
+  border-top: 1px solid #e2e8f0;
 }
 
 .pg-step {
@@ -672,3 +714,15 @@
     }
   }
 }
+
+/* Names a figure strip before the reader meets it. A run of tiles ending in a total reads as
+   arithmetic to somebody who already knows the screen and as five unrelated numbers to somebody
+   who does not. */
+.closing-lede {
+  margin: 0 0 -4px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #475569;
+}

src/app/cashier/cashier.service.ts

@@ -37,8 +37,10 @@ export class CashierService {
   }
 
   // ── Tellers / Cashiers ──
-  getTellers(): Observable<any[]> {
-    return this.http.get<any[]>('/tellers');
+  getTellers(officeId?: number): Observable<any[]> {
+    let params = new HttpParams();
+    if (officeId) params = params.set('officeId', String(officeId));
+    return this.http.get<any[]>('/tellers', { params });
   }
   getAllCashiers(): Observable<any[]> {
     return this.http.get<any[]>('/cashiers');
@@ -113,6 +115,185 @@ export class CashierService {
     const params = new HttpParams().set('date', date);
     return this.http.get('/cashreports/closing', { params });
   }
+  /**
+   * Every voucher raised on one date — deposits, withdrawals, disbursements, collections and
+   * bank transfers in a single list, with the day's credit and debit totals.
+   */
+  dayBook(date: string, side?: 'CR' | 'DR', status?: string): Observable<any> {
+    let params = new HttpParams().set('date', date);
+    if (side) params = params.set('side', side);
+    if (status) params = params.set('status', status);
+    return this.http.get('/cashreports/day-book', { params });
+  }
+
+  /**
+   * The vouchers raised over a period, one row each, with what was debited and what credited.
+   *
+   * Who appears is decided by the server from the caller's own roles — a cashier sees only their
+   * own work whatever they ask for — so `username` is a filter for those allowed to use it, not a
+   * way to choose whose report this is.
+   */
+  voucherReport(
+    from: string,
+    to: string,
+    username?: string,
+    voucherType?: string,
+    cashOnly?: boolean,
+    cashiersOnly?: boolean,
+    systemOnly?: boolean
+  ): Observable<any> {
+    let params = new HttpParams().set('from', from).set('to', to);
+    if (username) {
+      params = params.set('username', username);
+    }
+    if (voucherType) {
+      params = params.set('voucherType', voucherType);
+    }
+    // Only sent when asked for: the server treats a missing flag as the full register, so the
+    // cashier screens opt in to cash and the back-office ones keep seeing everything.
+    if (cashOnly) {
+      params = params.set('cashOnly', 'true');
+    }
+    // Opt-in the same way: the counter registers ask for the drawer-holders only, the back-office
+    // ones keep seeing whoever raised a voucher.
+    if (cashiersOnly) {
+      params = params.set('cashiersOnly', 'true');
+    }
+    // The postings nobody filed a request for: interest a nightly run credited, a charge taken from
+    // a balance, an escheat, a journal keyed to the ledger. Nowhere else shows them — My Vouchers is
+    // the reader's own work and a scheduled job is nobody's.
+    if (systemOnly) {
+      params = params.set('systemOnly', 'true');
+    }
+    return this.http.get('/vouchers/report', { params });
+  }
+
+  /**
+   * The signed-in user's own day: every voucher they raised and every one they verified, receipts
+   * and payments in one list. Always scoped to the caller by the server — there is no username
+   * parameter, because "my work" for somebody else is the register's job, not this screen's.
+   */
+  myVoucherWork(from: string, to: string): Observable<any> {
+    const params = new HttpParams().set('from', from).set('to', to);
+    return this.http.get('/vouchers/my-work', { params });
+  }
+
+  /**
+   * Account register for one date: what opened and closed that day, each account's balance as it
+   * stood then, and what it holds now.
+   */
+  accountRegister(date: string, section?: string): Observable<any> {
+    let params = new HttpParams().set('date', date);
+    if (section && section !== 'ALL') params = params.set('section', section);
+    return this.http.get('/accountregister', { params });
+  }
+
+  // ── Branch day register ──
+
+  /** The branch's day register, plus which day is currently open. Defaults to the caller's office. */
+  branchDayRegister(officeId?: number, limit?: number): Observable<any> {
+    let params = new HttpParams();
+    if (officeId) params = params.set('officeId', String(officeId));
+    if (limit) params = params.set('limit', String(limit));
+    return this.http.get('/branchday', { params });
+  }
+
+  /** Days opened and never closed — today's own open day excluded. */
+  branchDayMissed(officeId?: number): Observable<any> {
+    let params = new HttpParams();
+    if (officeId) params = params.set('officeId', String(officeId));
+    return this.http.get('/branchday/missed', { params });
+  }
+
+  /**
+   * What the day should close at, and the arithmetic behind it, so the closing figure does not
+   * have to be worked out by hand.
+   */
+  branchDayClosePreview(businessDate?: string, officeId?: number): Observable<any> {
+    let params = new HttpParams();
+    if (businessDate) params = params.set('businessDate', businessDate);
+    if (officeId) params = params.set('officeId', String(officeId));
+    return this.http.get('/branchday/close-preview', { params });
+  }
+
+  /** openingDifferenceReason is required when the opening figure differs from yesterday's closing. */
+  openBranchDay(
+    businessDate: string,
+    openingCash?: number,
+    officeId?: number,
+    denominations?: { denominationId: number; denominationValue: number; count: number }[],
+    openingDifferenceReason?: string
+  ): Observable<any> {
+    return this.http.post('/branchday/open', {
+      businessDate,
+      openingCash: openingCash != null ? String(openingCash) : null,
+      officeId: officeId ?? null,
+      denominations: denominations?.length ? denominations : null,
+      openingDifferenceReason: openingDifferenceReason ?? null,
+      locale: 'en'
+    });
+  }
+
+  /** forceCloseReason is required when closing a date earlier than today. */
+  closeBranchDay(
+    businessDate: string,
+    closingCash: number,
+    remarks?: string,
+    forceCloseReason?: string,
+    officeId?: number,
+    denominations?: { denominationId: number; denominationValue: number; count: number }[]
+  ): Observable<any> {
+    return this.http.post('/branchday/close', {
+      businessDate,
+      closingCash: String(closingCash),
+      remarks: remarks ?? null,
+      forceCloseReason: forceCloseReason ?? null,
+      officeId: officeId ?? null,
+      denominations: denominations?.length ? denominations : null,
+      locale: 'en'
+    });
+  }
+
+  /** The opening/closing denomination breakdown recorded for one business day, if any was captured. */
+  branchDayDenominations(officeId?: number, businessDate?: string): Observable<any> {
+    let params = new HttpParams();
+    if (officeId) params = params.set('officeId', String(officeId));
+    if (businessDate) params = params.set('businessDate', businessDate);
+    return this.http.get('/branchday/denominations', { params });
+  }
+
+  /** What the office's cash-at-vault GL account currently holds — zero means the count itself will
+   *  define its opening balance; non-zero means the count must match it exactly. */
+  cashGlStatus(officeId?: number): Observable<any> {
+    let params = new HttpParams();
+    if (officeId) params = params.set('officeId', String(officeId));
+    return this.http.get('/branchday/cash-gl-status', { params });
+  }
+
+  /** One-step new-institution path: defines (or reconciles against) the cash GL's opening balance
+   *  from a counted denomination breakdown, then opens the business day with that same count. */
+  migrateCashDenomination(
+    officeId: number,
+    businessDate: string,
+    denominations: { denominationId: number; denominationValue: number; count: number }[],
+    openingDifferenceReason?: string
+  ): Observable<any> {
+    return this.http.post('/branchday/migrate-cash-denomination', {
+      officeId,
+      businessDate,
+      denominations,
+      openingDifferenceReason: openingDifferenceReason ?? null,
+      locale: 'en'
+    });
+  }
+
+  /** Denomination-wise stock a vault (teller) currently holds — "how much of what does the bank have". */
+  vaultPosition(tellerId?: number, asOfDate?: string): Observable<any> {
+    let params = new HttpParams();
+    if (tellerId) params = params.set('tellerId', String(tellerId));
+    if (asOfDate) params = params.set('asOfDate', asOfDate);
+    return this.http.get('/cashreports/vault-position', { params });
+  }
   excessTransactionReport(threshold: number, fromDate?: string, toDate?: string): Observable<any[]> {
     let params = new HttpParams().set('threshold', String(threshold));
     if (fromDate) params = params.set('fromDate', fromDate);
@@ -188,4 +369,54 @@ export class CashierService {
   getShareCollectionStatus(shareAccountId: number): Observable<any> {
     return this.http.get(`/cashier/sharecollection/${shareAccountId}`);
   }
+
+  /** One unapplied Share Sundry receipt, found by the voucher number the member quotes. */
+  getShareAdvanceByVoucher(voucherNo: string, glAccountNo: string, clientId?: number): Observable<any> {
+    // The voucher travels as a query parameter, not a path segment: numbers are formatted
+    // CR/001/2108/0001, and Spring Security's strict firewall rejects the encoded slashes
+    // (%2F) outright with a 400 before the request ever reaches the resource.
+    // clientId lets the backend adopt a cashier deposit made straight to a GL account, which
+    // carries no member of its own. glAccountNo is required — which GL account to search in is
+    // always chosen by hand, never resolved from a share product's accounting setup, so a broken
+    // or missing product mapping can never make a genuine voucher unreachable.
+    let params = new HttpParams().set('voucherNo', voucherNo).set('glAccountNo', glAccountNo);
+    if (clientId) {
+      params = params.set('clientId', String(clientId));
+    }
+    return this.http.get('/shareadvancecollection/by-voucher', { params });
+  }
+
+  /** GL accounts selectable when searching for a voucher, for the picker on the Apply Collection screen. */
+  getShareAdvanceGlAccounts(): Observable<any> {
+    return this.http.get('/shareadvancecollection/glaccounts');
+  }
+
+  /** Share value + any outstanding entry fee for one share account, shown before a voucher search. */
+  getShareAdvanceRequirement(shareAccountId: number): Observable<any> {
+    return this.http.get('/shareadvancecollection/requirement', { params: { shareAccountId: String(shareAccountId) } });
+  }
+
+  /** Receipts still sitting in Share Sundry, optionally for a single member. */
+  getUnappliedShareAdvances(clientId?: number): Observable<any> {
+    const suffix = clientId ? `?clientId=${clientId}` : '';
+    return this.http.get(`/shareadvancecollection${suffix}`);
+  }
+
+  /** Moves a receipt out of Sundry into share capital for an activated account. */
+  applyShareAdvance(collectionId: number, data: any): Observable<any> {
+    return this.http.post(`/shareadvancecollection/${collectionId}/apply`, data);
+  }
+
+  /** Every additional-share tranche awaiting approval, across every share account. */
+  getShareAdditionRequests(): Observable<any> {
+    return this.http.get('/shareadditionrequests');
+  }
+
+  /**
+   * Full detail for one pending tranche — the list row plus route-specific proof of funding: the
+   * voucher(s) behind a cash tranche, or the savings account already debited for a savings tranche.
+   */
+  getShareAdditionRequest(transactionId: number): Observable<any> {
+    return this.http.get(`/shareadditionrequests/${transactionId}`);
+  }
 }

src/app/cashier/clerk-closure-request.service.ts

@@ -0,0 +1,80 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpContext, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { SILENT_HTTP_ERROR } from '../core/http/silent-error.token';
+
+/** HTTP service for the Clerk Closure Request maker-checker workflow (Cash-only savings account
+ *  closure). Mirrors ClerkWithdrawalService's shape against the /clerk/closure-requests endpoints. */
+@Injectable({ providedIn: 'root' })
+export class ClerkClosureRequestService {
+  private http = inject(HttpClient);
+
+  submit(data: any): Observable<any> {
+    return this.http.post('/clerk/closure-requests', data);
+  }
+
+  getMyRequests(status?: string, offset = 0, limit = 20, fromDate?: string, toDate?: string): Observable<any> {
+    let params = new HttpParams().set('offset', String(offset)).set('limit', String(limit));
+    if (status) params = params.set('status', status);
+    if (fromDate) params = params.set('fromDate', fromDate);
+    if (toDate) params = params.set('toDate', toDate);
+    return this.http.get('/clerk/closure-requests/my', { params });
+  }
+
+  getPendingRequests(
+    status = 'PENDING',
+    offset = 0,
+    limit = 20,
+    fromDate?: string,
+    toDate?: string,
+    search?: string
+  ): Observable<any> {
+    let params = new HttpParams().set('status', status).set('offset', String(offset)).set('limit', String(limit));
+    if (fromDate) params = params.set('fromDate', fromDate);
+    if (toDate) params = params.set('toDate', toDate);
+    if (search) params = params.set('search', search);
+    return this.http.get('/clerk/closure-requests', { params });
+  }
+
+  getById(id: number): Observable<any> {
+    return this.http.get(`/clerk/closure-requests/${id}`);
+  }
+
+  /** Posts every rupee of interest the member has earned up to today straight onto the account —
+   *  the same posting close() itself performs — and returns the resulting real balance. Not a dry
+   *  run: ticking "Close this account" is meant to credit the interest immediately, not estimate it. */
+  postClosureInterest(savingsAccountId: number): Observable<any> {
+    return this.http.post(`/clerk/closure-requests/post-interest/${savingsAccountId}`, {});
+  }
+
+  approve(id: number): Observable<any> {
+    return this.http.post(`/clerk/closure-requests/${id}/approve`, {});
+  }
+
+  reject(id: number, reason: string): Observable<any> {
+    return this.http.post(`/clerk/closure-requests/${id}/reject`, { reason });
+  }
+
+  // Silenced: onTokNoBlur() probes this expecting a possible legitimate 404 (token not from this
+  // pool, could be a withdrawal/dividend claim's instead) and shows its own tailored message either way.
+  getByToken(token: string): Observable<any> {
+    return this.http.get(`/clerk/closure-requests/by-token/${encodeURIComponent(token)}`, {
+      context: new HttpContext().set(SILENT_HTTP_ERROR, true)
+    });
+  }
+
+  disburse(id: number, denominationData: string | null, transactionAmount?: number): Observable<any> {
+    return this.http.post(`/clerk/closure-requests/${id}/disburse`, {
+      denominationData,
+      transactionAmount: transactionAmount != null ? String(transactionAmount) : null
+    });
+  }
+}

src/app/cashier/clerk-share-closure.service.ts

@@ -1,53 +0,0 @@
-/**
- * Copyright since 2025 Mifos Initiative
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
-
-import { Injectable, inject } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { Observable } from 'rxjs';
-
-/** HTTP service for the Share Closure maker-checker workflow — mirrors
- *  ClerkShareWithdrawalService, adapted for closing an already-zero-share account. */
-@Injectable({ providedIn: 'root' })
-export class ClerkShareClosureService {
-  private http = inject(HttpClient);
-
-  submit(data: any): Observable<any> {
-    return this.http.post('/clerk/share-closure-requests', data);
-  }
-
-  getMyRequests(status?: string, offset = 0, limit = 20, fromDate?: string, toDate?: string): Observable<any> {
-    let params = new HttpParams().set('offset', String(offset)).set('limit', String(limit));
-    if (status) params = params.set('status', status);
-    if (fromDate) params = params.set('fromDate', fromDate);
-    if (toDate) params = params.set('toDate', toDate);
-    return this.http.get('/clerk/share-closure-requests/my', { params });
-  }
-
-  getPendingRequests(status = 'PENDING', offset = 0, limit = 20, fromDate?: string, toDate?: string): Observable<any> {
-    let params = new HttpParams().set('status', status).set('offset', String(offset)).set('limit', String(limit));
-    if (fromDate) params = params.set('fromDate', fromDate);
-    if (toDate) params = params.set('toDate', toDate);
-    return this.http.get('/clerk/share-closure-requests', { params });
-  }
-
-  getById(id: number): Observable<any> {
-    return this.http.get(`/clerk/share-closure-requests/${id}`);
-  }
-
-  validate(id: number): Observable<any> {
-    return this.http.post(`/clerk/share-closure-requests/${id}/validate`, {});
-  }
-
-  approve(id: number): Observable<any> {
-    return this.http.post(`/clerk/share-closure-requests/${id}/approve`, {});
-  }
-
-  reject(id: number, reason: string): Observable<any> {
-    return this.http.post(`/clerk/share-closure-requests/${id}/reject`, { reason });
-  }
-}

src/app/cashier/clerk-share-withdrawal.service.ts

@@ -28,10 +28,18 @@ export class ClerkShareWithdrawalService {
     return this.http.get('/clerk/share-withdrawal-requests/my', { params });
   }
 
-  getPendingRequests(status = 'PENDING', offset = 0, limit = 20, fromDate?: string, toDate?: string): Observable<any> {
+  getPendingRequests(
+    status = 'PENDING',
+    offset = 0,
+    limit = 20,
+    fromDate?: string,
+    toDate?: string,
+    search?: string
+  ): Observable<any> {
     let params = new HttpParams().set('status', status).set('offset', String(offset)).set('limit', String(limit));
     if (fromDate) params = params.set('fromDate', fromDate);
     if (toDate) params = params.set('toDate', toDate);
+    if (search) params = params.set('search', search);
     return this.http.get('/clerk/share-withdrawal-requests', { params });
   }
 

src/app/cashier/clerk-withdrawal.service.ts

@@ -7,8 +7,9 @@
  */
 
 import { Injectable, inject } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpContext, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
+import { SILENT_HTTP_ERROR } from '../core/http/silent-error.token';
 
 /** HTTP service for Clerk Withdrawal Request maker-checker workflow. */
 @Injectable({ providedIn: 'root' })
@@ -31,10 +32,18 @@ export class ClerkWithdrawalService {
     return this.http.get('/clerk/withdrawal-requests/my', { params });
   }
 
-  getPendingRequests(status = 'PENDING', offset = 0, limit = 20, fromDate?: string, toDate?: string): Observable<any> {
+  getPendingRequests(
+    status = 'PENDING',
+    offset = 0,
+    limit = 20,
+    fromDate?: string,
+    toDate?: string,
+    search?: string
+  ): Observable<any> {
     let params = new HttpParams().set('status', status).set('offset', String(offset)).set('limit', String(limit));
     if (fromDate) params = params.set('fromDate', fromDate);
     if (toDate) params = params.set('toDate', toDate);
+    if (search) params = params.set('search', search);
     return this.http.get('/clerk/withdrawal-requests', { params });
   }
 
@@ -50,8 +59,12 @@ export class ClerkWithdrawalService {
     return this.http.post(`/clerk/withdrawal-requests/${id}/reject`, { reason });
   }
 
+  // Silenced: onTokNoBlur() probes this expecting a possible legitimate 404 (token not from this
+  // pool, could be a dividend claim's instead) and shows its own tailored message either way.
   getByToken(token: string): Observable<any> {
-    return this.http.get(`/clerk/withdrawal-requests/by-token/${encodeURIComponent(token)}`);
+    return this.http.get(`/clerk/withdrawal-requests/by-token/${encodeURIComponent(token)}`, {
+      context: new HttpContext().set(SILENT_HTTP_ERROR, true)
+    });
   }
 
   disburse(id: number, denominationData: string | null, transactionAmount?: number): Observable<any> {

src/app/cashier/closing-cash-report/closing-cash-report.component.html

@@ -9,9 +9,8 @@
 <div class="pg">
   <header class="pg-head">
     <div>
-      <div class="pg-eyebrow">CASHIER · REPORT</div>
       <h1 class="pg-title">Closing Cash Report</h1>
-      <p class="pg-sub">Denomination-wise deposit, withdrawal and net cash position for the selected day.</p>
+      <p class="pg-sub">How much cash you started with, what came in and went out, and how much you must hand back.</p>
     </div>
     <div class="pg-toolbar">
       <label class="pg-field">
@@ -27,44 +26,92 @@
     </div>
   </header>
 
-  @if (!showGl && rows.length > 0) {
-    <!-- Summary totals bar -->
-    <div class="closing-summary">
+  <!-- The day's own cash, leg by leg, ending in what should physically be in the drawer.
+       A cashier carries no balance: they draw from the vault in the morning and hand back at close,
+       so this is the figure a physical count is checked against.
+
+       This used to sit under a second strip reading Deposits − Withdrawals = Net Counter Movement.
+       That strip stated the same two figures again and then a net the cashier has no use for: it
+       excludes the vault legs, so on a day the vault gave ₹600 and customer business cancelled out
+       it read ₹0 while the drawer held ₹600. Two panels, four repeated figures, and the one that
+       came first was the one to ignore. -->
+  @if (!showGl && scopedToCashier && hasTodayLegs) {
+    <!-- Says what the strip is before the reader meets five figures and a running sum. Somebody
+         opening this screen for the first time has no way to know that the last tile is the one
+         that matters. -->
+    <p class="closing-lede">Your cash for the day, step by step</p>
+    <div class="closing-summary closing-summary--balance">
       <div class="closing-summary__item closing-summary__item--in">
-        <span class="closing-summary__label">Total Deposits (IN)</span>
-        <span class="closing-summary__value">₹{{ depositTotal | number: '1.2-2' }}</span>
+        <span class="closing-summary__label">Cash you got this morning</span>
+        <span class="closing-summary__value">₹{{ todayVaultIn | number: '1.2-2' }}</span>
+      </div>
+      <div class="closing-summary__sep">+</div>
+      <div class="closing-summary__item closing-summary__item--in">
+        <span class="closing-summary__label">Cash customers gave you</span>
+        <span class="closing-summary__value">₹{{ depositTotalWithDd | number: '1.2-2' }}</span>
+        @if (ddCashTotal > 0) {
+          <!-- Named on the tile as well as in the table: this part of the total carries no
+               denomination, so without saying so the figures read as failing to add up. -->
+          <span class="closing-summary__note">
+            ₹{{ ddCashTotal | number: '1.2-2' }} of this was for {{ ddCashCount }} draft{{
+              ddCashCount === 1 ? '' : 's'
+            }}, notes not listed
+          </span>
+        }
       </div>
       <div class="closing-summary__sep">−</div>
       <div class="closing-summary__item closing-summary__item--out">
-        <span class="closing-summary__label">Total Withdrawals (OUT)</span>
+        <span class="closing-summary__label">Cash you gave customers</span>
         <span class="closing-summary__value">₹{{ withdrawalTotal | number: '1.2-2' }}</span>
       </div>
+      <div class="closing-summary__sep">−</div>
+      <div class="closing-summary__item closing-summary__item--out">
+        <span class="closing-summary__label">Cash already returned</span>
+        <span class="closing-summary__value">₹{{ todaySettledOut | number: '1.2-2' }}</span>
+      </div>
       <div class="closing-summary__sep">=</div>
+      <!-- The figure the day ends on. Named for what the cashier does with it — hand this back to
+           the vault — rather than "closing balance", which reads as something they keep. -->
       <div
         class="closing-summary__item"
-        [class.closing-summary__item--net-pos]="netTotal >= 0"
-        [class.closing-summary__item--net-neg]="netTotal < 0"
+        [class.closing-summary__item--net-pos]="expectedInDrawer >= 0"
+        [class.closing-summary__item--net-neg]="expectedInDrawer < 0"
       >
-        <span class="closing-summary__label">Net Closing Cash</span>
-        <span class="closing-summary__value">₹{{ netTotal | number: '1.2-2' }}</span>
+        <span class="closing-summary__label">Cash left with you now</span>
+        <span class="closing-summary__value">₹{{ expectedInDrawer | number: '1.2-2' }}</span>
       </div>
     </div>
+    <p class="closing-note">
+      Count your cash now &mdash; it should come to ₹{{ expectedInDrawer | number: '1.2-2' }}. Hand that amount back and
+      your day is done.
+    </p>
+    <!-- Cashier-to-cashier hand-overs are left out of the row above to keep it to the four legs a
+         teller sees, and stated here when they happened rather than silently folded in. -->
+    @if ((todayInterCashierIn ?? 0) > 0 || (todayInterCashierOut ?? 0) > 0) {
+      <p class="closing-note">
+        This already counts cash swapped with another cashier &mdash; ₹{{ todayInterCashierIn | number: '1.2-2' }} taken
+        from them, ₹{{ todayInterCashierOut | number: '1.2-2' }} given to them.
+      </p>
+    }
   }
 
   @if (!showGl) {
     <div class="pg-card">
-      @if (noteRows.length > 0) {
+      @if (noteRows.length > 0 || ddCashTotal > 0) {
         <div class="pos-section-label">Notes</div>
         <table class="pg-table">
           <thead>
             <tr>
-              <th>Denomination</th>
-              <th class="num col-in">Deposit Pcs</th>
-              <th class="num col-in">Deposit Amt</th>
-              <th class="num col-out">Withdrawal Pcs</th>
-              <th class="num col-out">Withdrawal Amt</th>
-              <th class="num col-net">Net Pcs</th>
-              <th class="num col-net">Net Amount</th>
+              <th>Note</th>
+              <!-- Counted in pieces, because that is what a teller does with notes. Nine columns of
+                   pieces-and-amount for every leg was a reconciliation nobody could read at a
+                   counter; these five are the sentence the day actually makes: this many came in
+                   from the vault, this many over the counter, this many went out, this many are
+                   left, and that is worth this much. -->
+              <th class="num col-in">Came in</th>
+              <th class="num col-out">Went out</th>
+              <th class="num col-net">Left with you</th>
+              <th class="num col-net">Worth</th>
             </tr>
           </thead>
           <tbody>
@@ -73,15 +120,16 @@
                 <td>
                   <span class="pg-chip">₹{{ r.denominationValue }}</span>
                 </td>
-                <td class="num col-in">{{ r.depositCount }}</td>
-                <td class="num col-in">₹{{ r.depositAmount | number: '1.2-2' }}</td>
-                <td class="num col-out">{{ r.withdrawalCount }}</td>
-                <td class="num col-out">₹{{ r.withdrawalAmount | number: '1.2-2' }}</td>
+                <!-- Vault and counter added together: to a teller both are notes arriving, and
+                     splitting them made the reader do the sum. A dash rather than a zero where
+                     nothing happened, so the eye passes over it. -->
+                <td class="num col-in">{{ r.vaultInCount + r.depositCount || '—' }}</td>
+                <td class="num col-out">{{ r.withdrawalCount + r.settledOutCount || '—' }}</td>
                 <td
                   class="num col-net"
                   [style.color]="r.netCount > 0 ? '#16a34a' : r.netCount < 0 ? '#dc2626' : '#94a3b8'"
                 >
-                  {{ r.netCount > 0 ? '+' : '' }}{{ r.netCount }}
+                  {{ r.netCount }}
                 </td>
                 <td
                   class="num col-net"
@@ -93,7 +141,38 @@
                 </td>
               </tr>
             }
+
+            <!-- Cash taken for a Demand Draft, on the deposit side where it belongs. It has no
+                 denomination to sit against -- the notes were never itemised -- so the piece
+                 counts show a dash rather than a zero, which would read as "no notes". -->
+            @if (ddCashTotal > 0) {
+              <tr>
+                <td>
+                  <span class="pg-chip">Notes not listed</span>
+                  <span class="closing-row__hint"> {{ ddCashCount }} cash DD{{ ddCashCount === 1 ? '' : 's' }} </span>
+                </td>
+                <td class="num col-in">—</td>
+                <td class="num col-out">—</td>
+                <td class="num col-net">—</td>
+                <td class="num col-net" style="color: #16a34a">₹{{ ddCashTotal | number: '1.2-2' }}</td>
+              </tr>
+            }
           </tbody>
+          <!-- Totals, so the table reconciles against the summary above rather than having to be
+               added up by hand — and so the deposit column visibly accounts for the DD row. -->
+          <tfoot>
+            <tr>
+              <td>Total</td>
+              <td class="num col-in">{{ noteVaultInCount + noteDepositCount || '—' }}</td>
+              <td class="num col-out">{{ noteWithdrawalCount + noteSettledOutCount || '—' }}</td>
+              <td class="num col-net">{{ noteNetCount }}</td>
+              <td class="num col-net">
+                {{ noteNetAmount >= 0 ? '' : '−' }}₹{{
+                  (noteNetAmount < 0 ? -noteNetAmount : noteNetAmount) | number: '1.2-2'
+                }}
+              </td>
+            </tr>
+          </tfoot>
         </table>
       }
 
@@ -102,13 +181,11 @@
         <table class="pg-table">
           <thead>
             <tr>
-              <th>Denomination</th>
-              <th class="num col-in">Deposit Pcs</th>
-              <th class="num col-in">Deposit Amt</th>
-              <th class="num col-out">Withdrawal Pcs</th>
-              <th class="num col-out">Withdrawal Amt</th>
-              <th class="num col-net">Net Pcs</th>
-              <th class="num col-net">Net Amount</th>
+              <th>Coin</th>
+              <th class="num col-in">Came in</th>
+              <th class="num col-out">Went out</th>
+              <th class="num col-net">Left with you</th>
+              <th class="num col-net">Worth</th>
             </tr>
           </thead>
           <tbody>
@@ -117,15 +194,16 @@
                 <td>
                   <span class="pg-chip pg-chip--coin">₹{{ r.denominationValue }}</span>
                 </td>
-                <td class="num col-in">{{ r.depositCount }}</td>
-                <td class="num col-in">₹{{ r.depositAmount | number: '1.2-2' }}</td>
-                <td class="num col-out">{{ r.withdrawalCount }}</td>
-                <td class="num col-out">₹{{ r.withdrawalAmount | number: '1.2-2' }}</td>
+                <!-- Vault and counter added together: to a teller both are notes arriving, and
+                     splitting them made the reader do the sum. A dash rather than a zero where
+                     nothing happened, so the eye passes over it. -->
+                <td class="num col-in">{{ r.vaultInCount + r.depositCount || '—' }}</td>
+                <td class="num col-out">{{ r.withdrawalCount + r.settledOutCount || '—' }}</td>
                 <td
                   class="num col-net"
                   [style.color]="r.netCount > 0 ? '#16a34a' : r.netCount < 0 ? '#dc2626' : '#94a3b8'"
                 >
-                  {{ r.netCount > 0 ? '+' : '' }}{{ r.netCount }}
+                  {{ r.netCount }}
                 </td>
                 <td
                   class="num col-net"
@@ -141,8 +219,20 @@
         </table>
       }
 
-      @if (loaded && rows.length === 0 && exchangeRows.length === 0) {
-        <div class="pg-empty">No cash denomination data for this date.</div>
+      <!-- Not shown when a Demand Draft row is on the table: there is something to read then, and
+           an "empty" notice under it contradicts it. -->
+      @if (loaded && rows.length === 0 && exchangeRows.length === 0 && ddCashTotal === 0) {
+        <!-- A day with no counter work is not an empty report: the cashier is still holding
+             whatever they held yesterday, and that balance is shown in the strip above. Saying
+             only "no data" here read as though the drawer were empty. -->
+        <div class="pg-empty">
+          @if (scopedToCashier && hasTodayLegs && expectedInDrawer !== 0) {
+            No cash crossed the counter on this date. The drawer should hold ₹{{ expectedInDrawer | number: '1.2-2' }}
+            from the day's vault and settlement legs.
+          } @else {
+            No cash denomination data for this date.
+          }
+        </div>
       }
     </div>
   }
@@ -213,8 +303,8 @@
             <tr>
               <th class="gl-th--voucher">Voucher No</th>
               <th class="gl-th--date">Date</th>
-              <th>A/C No</th>
-              <th>A/C Name</th>
+              <th>Debit</th>
+              <th>Credit</th>
               <th class="gl-th--pt">Payment Type</th>
               <th class="gl-th--teller">Teller</th>
               <th class="num gl-th--dr">DR (₹)</th>
@@ -227,9 +317,8 @@
                 <td class="gl-voucher">
                   @if (r.txnSource === 'GL') {
                     <span class="gl-badge">GL</span>
-                  } @else {
-                    {{ r.voucherNo }}
                   }
+                  {{ r.voucherNo }}
                 </td>
                 <td class="gl-date">
                   <div>{{ r.txnDate }}</div>
@@ -237,8 +326,25 @@
                     <div class="gl-time">{{ r.txnTime }}</div>
                   }
                 </td>
-                <td class="gl-acno">{{ r.acNo }}</td>
-                <td class="gl-acname">{{ r.acName }}</td>
+                <!-- Both legs of the voucher, the same pair My Vouchers shows — not just the one
+                     side this row's own denomination breakdown happens to know about. Falls back
+                     to that one side (acNo/acName) when the voucher predates m_voucher_line. -->
+                <td class="gl-acname">
+                  <div>{{ r.debitParty || r.acName }}</div>
+                  @if (r.debitAccount || r.acNo) {
+                    <div class="gl-acno">{{ r.debitAccount || r.acNo }}</div>
+                  }
+                </td>
+                <td class="gl-acname">
+                  @if (r.creditParty) {
+                    <div>{{ r.creditParty }}</div>
+                    @if (r.creditAccount) {
+                      <div class="gl-acno">{{ r.creditAccount }}</div>
+                    }
+                  } @else {
+                    <span class="gl-pt-none">—</span>
+                  }
+                </td>
                 <td class="gl-pt">
                   @if (r.paymentType) {
                     <span class="gl-pt-badge">{{ r.paymentType }}</span>

src/app/cashier/closing-cash-report/closing-cash-report.component.ts

@@ -38,6 +38,51 @@ export class ClosingCashReportComponent implements OnInit {
   loading = false;
   loaded = false;
 
+  /**
+   * Cash taken at the counter for a Demand Draft.
+   *
+   * A cash DD asks for a denomination breakdown but does not require one, and this report is built
+   * entirely from breakdowns — so that cash was missing from the drawer figure even though the
+   * ledger held it and the cashier held the notes. It is counted from the request itself and shown
+   * on its own line, because the denomination rows below cannot account for it.
+   */
+  ddCashTotal = 0;
+  ddCashCount = 0;
+  /** Deposits including the DD cash — the figure the drawer is actually checked against. */
+  depositTotalWithDd = 0;
+
+  /**
+   * The drawer, opening to closing.
+   *
+   * `netTotal` above is only the day's counter movement — deposits less withdrawals. It is not what
+   * the cashier is holding, because it carries nothing forward from yesterday and ignores vault
+   * allocations and inter-cashier legs. The closing balance is the figure that has to match a
+   * physical count at the end of the day, so it is reported separately rather than inferred from
+   * the counter totals.
+   *
+   * Null when the server did not scope the report to one cashier: a branch-wide opening balance is
+   * the branch day register's business, not this report's.
+   */
+  openingBalance: number | null = null;
+  closingBalance: number | null = null;
+
+  /**
+   * The day's own cash legs, which is what a cashier reconciles against the drawer.
+   *
+   * A cashier carries no balance: they draw from the vault in the morning and hand back at close.
+   * The cumulative opening/closing figures answer a question nobody at the counter asks, and one
+   * carrying years of history answers it with a number that cannot be counted against anything on
+   * the desk.
+   */
+  todayVaultIn: number | null = null;
+  todaySettledOut: number | null = null;
+  todayInterCashierIn: number | null = null;
+  todayInterCashierOut: number | null = null;
+  /** Every leg of the day's cash movement, which is wider than deposits less withdrawals. */
+  cashMovement: number | null = null;
+  /** Whether the figures above are one cashier's drawer or the whole branch's counter work. */
+  scopedToCashier = false;
+
   // GL View
   showGl = false;
   glRows: any[] = [];
@@ -63,9 +108,86 @@ export class ClosingCashReportComponent implements OnInit {
   selectedTellerId: number | null = null;
   selectedCashierId: number | null = null;
 
+  /**
+   * What should be in the drawer at the end of the day, from the day's own legs.
+   *
+   * Drawn from the vault, plus anything taken over the counter and from another cashier, less what
+   * went back out. This is the figure a cashier counts against — it does not carry a balance
+   * forward, because a cashier does not.
+   */
+  get expectedInDrawer(): number {
+    return (
+      Number(this.todayVaultIn ?? 0) +
+      Number(this.todayInterCashierIn ?? 0) +
+      Number(this.depositTotalWithDd ?? 0) -
+      Number(this.withdrawalTotal ?? 0) -
+      Number(this.todaySettledOut ?? 0) -
+      Number(this.todayInterCashierOut ?? 0)
+    );
+  }
+
+  /** True when any of the day's own legs carries a figure, so the panel is worth showing. */
+  get hasTodayLegs(): boolean {
+    return this.todayVaultIn !== null;
+  }
+
   get noteRows(): any[] {
     return this.rows.filter((r) => r.kind !== 'coin');
   }
+
+  /**
+   * Totals for the notes table, including the un-itemised Demand Draft cash.
+   *
+   * The DD row carries an amount but no piece count, so pieces and amounts are summed separately
+   * rather than one being derived from the other — a denomination times a count would not reach the
+   * DD's figure, and adding a fictional count to make it balance would misstate the drawer.
+   */
+  get noteDepositCount(): number {
+    return this.noteRows.reduce((s, r) => s + Number(r.depositCount ?? 0), 0);
+  }
+
+  get noteDepositAmount(): number {
+    return this.noteRows.reduce((s, r) => s + Number(r.depositAmount ?? 0), 0) + this.ddCashTotal;
+  }
+
+  get noteWithdrawalCount(): number {
+    return this.noteRows.reduce((s, r) => s + Number(r.withdrawalCount ?? 0), 0);
+  }
+
+  get noteWithdrawalAmount(): number {
+    return this.noteRows.reduce((s, r) => s + Number(r.withdrawalAmount ?? 0), 0);
+  }
+
+  get noteVaultInCount(): number {
+    return this.noteRows.reduce((s, r) => s + Number(r.vaultInCount ?? 0), 0);
+  }
+
+  get noteVaultInAmount(): number {
+    return this.noteRows.reduce((s, r) => s + Number(r.vaultInAmount ?? 0), 0);
+  }
+
+  get noteSettledOutCount(): number {
+    return this.noteRows.reduce((s, r) => s + Number(r.settledOutCount ?? 0), 0);
+  }
+
+  get noteSettledOutAmount(): number {
+    return this.noteRows.reduce((s, r) => s + Number(r.settledOutAmount ?? 0), 0);
+  }
+
+  get noteNetCount(): number {
+    return this.noteVaultInCount + this.noteDepositCount - this.noteWithdrawalCount - this.noteSettledOutCount;
+  }
+
+  /**
+   * What is left in the drawer in notes: everything that came in, less everything that went out.
+   *
+   * Was deposits minus withdrawals, which is the counter's movement rather than the drawer's
+   * contents — it left out the cash drawn from the vault, so a teller holding a ₹500 note saw a net
+   * of zero and had nothing to count against.
+   */
+  get noteNetAmount(): number {
+    return this.noteVaultInAmount + this.noteDepositAmount - this.noteWithdrawalAmount - this.noteSettledOutAmount;
+  }
   get coinRows(): any[] {
     return this.rows.filter((r) => r.kind === 'coin');
   }
@@ -84,7 +206,6 @@ export class ClosingCashReportComponent implements OnInit {
   }
 
   load(): void {
-    this.showGl = false;
     this.loading = true;
     this.service.closingCashReport(this.date).subscribe({
       next: (res: any) => {
@@ -93,6 +214,19 @@ export class ClosingCashReportComponent implements OnInit {
         this.depositTotal = Number(res?.depositTotal || 0);
         this.withdrawalTotal = Number(res?.withdrawalTotal || 0);
         this.netTotal = Number(res?.netTotal || 0);
+        this.ddCashTotal = Number(res?.ddCashTotal || 0);
+        this.ddCashCount = Number(res?.ddCashCount || 0);
+        this.depositTotalWithDd = Number(res?.depositTotalWithDd ?? res?.depositTotal ?? 0);
+        this.scopedToCashier = res?.scopedToCashier === true;
+        // Sent only for a cashier-scoped call, and read as absent rather than zero when missing —
+        // a zero opening balance and no opening balance at all are different statements.
+        this.openingBalance = res?.openingBalance == null ? null : Number(res.openingBalance);
+        this.closingBalance = res?.closingBalance == null ? null : Number(res.closingBalance);
+        this.cashMovement = res?.cashMovement == null ? null : Number(res.cashMovement);
+        this.todayVaultIn = res?.todayVaultIn == null ? null : Number(res.todayVaultIn);
+        this.todaySettledOut = res?.todaySettledOut == null ? null : Number(res.todaySettledOut);
+        this.todayInterCashierIn = res?.todayInterCashierIn == null ? null : Number(res.todayInterCashierIn);
+        this.todayInterCashierOut = res?.todayInterCashierOut == null ? null : Number(res.todayInterCashierOut);
         this.loading = false;
         this.loaded = true;
       },
@@ -102,10 +236,34 @@ export class ClosingCashReportComponent implements OnInit {
         this.depositTotal = 0;
         this.withdrawalTotal = 0;
         this.netTotal = 0;
+        this.ddCashTotal = 0;
+        this.ddCashCount = 0;
+        this.depositTotalWithDd = 0;
+        this.scopedToCashier = false;
+        this.openingBalance = null;
+        this.closingBalance = null;
+        this.cashMovement = null;
+        this.todayVaultIn = null;
+        this.todaySettledOut = null;
+        this.todayInterCashierIn = null;
+        this.todayInterCashierOut = null;
         this.loading = false;
         this.loaded = true;
       }
     });
+
+    // GL Entries is scoped to `this.date` too, but was never re-fetched here -- changing the date and
+    // clicking Load left glLoaded=true from whatever date was open before, so a stale, wrong-date GL
+    // table stayed on screen under a header that had already relabelled itself to the new date. If
+    // the panel was open, refresh it for the date just loaded; otherwise just invalidate it so the
+    // next time it's opened it fetches fresh instead of showing leftover rows.
+    this.glOffset = 0;
+    this.glLoaded = false;
+    if (this.showGl) {
+      this.loadGl();
+    } else {
+      this.glRows = [];
+    }
   }
 
   toggleGl(): void {

src/app/cashier/day-book/day-book.component.html

@@ -0,0 +1,270 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="pg">
+  <header class="pg-head">
+    <div>
+      <h1 class="pg-title">{{ title }}</h1>
+      <p class="pg-sub">
+        Every voucher raised on the selected date — cash deposits, withdrawals, disbursements, collections, interest and
+        journals, with each person's own credit, debit and net.
+      </p>
+    </div>
+    <div class="pg-toolbar">
+      <button type="button" class="pg-btn" (click)="shiftDate(-1)" title="Previous day">
+        <mat-icon>chevron_left</mat-icon>
+      </button>
+      <label class="pg-field">
+        <span>Date</span>
+        <input type="date" [value]="date" (change)="date = $any($event.target).value; load()" />
+      </label>
+      <button type="button" class="pg-btn" (click)="shiftDate(1)" title="Next day">
+        <mat-icon>chevron_right</mat-icon>
+      </button>
+      <button type="button" class="pg-btn" (click)="goToday()">Today</button>
+      <button type="button" class="pg-btn pg-btn--primary" (click)="load()" [disabled]="loading">
+        <mat-icon>refresh</mat-icon> Reload
+      </button>
+    </div>
+  </header>
+
+  <!-- Filters -->
+  <div class="db-filters">
+    <label class="pg-field">
+      <span>Side</span>
+      <select [(ngModel)]="side" (change)="load()">
+        <option value="">All</option>
+        <option value="CR">CR · Credit (money in)</option>
+        <option value="DR">DR · Debit (money out)</option>
+      </select>
+    </label>
+    <label class="pg-field">
+      <span>Status</span>
+      <select [(ngModel)]="status" (change)="load()">
+        <option value="">All</option>
+        <option value="APPROVED">Approved</option>
+        <option value="PENDING">Pending</option>
+        <option value="REJECTED">Rejected</option>
+      </select>
+    </label>
+    <label class="pg-field db-filters__search">
+      <span>Search</span>
+      <input type="text" [(ngModel)]="search" placeholder="Voucher no, account, party, payment type, narration…" />
+    </label>
+    <button type="button" class="pg-btn" (click)="exportCsv()" [disabled]="filteredRows.length === 0">
+      <mat-icon>download</mat-icon> CSV
+    </button>
+  </div>
+
+  @if (errorMsg) {
+    <div class="pg-alert pg-alert--error">{{ errorMsg }}</div>
+  }
+  @if (loading) {
+    <div class="pg-empty">Loading…</div>
+  }
+
+  @if (!loading && loaded && rows.length === 0) {
+    <div class="pg-empty">
+      <mat-icon>receipt_long</mat-icon>
+      <p>No vouchers were raised on {{ date }}.</p>
+    </div>
+  }
+
+  @if (!loading && filteredRows.length > 0) {
+    <!-- Totals bar. Reflects what is on screen, so a search or side filter still reconciles. -->
+    <div class="closing-summary">
+      <div class="closing-summary__item closing-summary__item--in">
+        <span class="closing-summary__label">Credit · CR (money in)</span>
+        <span class="closing-summary__value">₹{{ shownCredit | number: '1.2-2' }}</span>
+      </div>
+      <div class="closing-summary__sep">−</div>
+      <div class="closing-summary__item closing-summary__item--out">
+        <span class="closing-summary__label">Debit · DR (money out)</span>
+        <span class="closing-summary__value">₹{{ shownDebit | number: '1.2-2' }}</span>
+      </div>
+      <div class="closing-summary__sep">=</div>
+      <div
+        class="closing-summary__item"
+        [class.closing-summary__item--net-pos]="shownCredit - shownDebit >= 0"
+        [class.closing-summary__item--net-neg]="shownCredit - shownDebit < 0"
+      >
+        <span class="closing-summary__label">Net</span>
+        <span class="closing-summary__value">₹{{ shownCredit - shownDebit | number: '1.2-2' }}</span>
+      </div>
+    </div>
+
+    <p class="db-note">
+      Totals count approved vouchers only — pending and rejected rows are listed but never move the money.
+    </p>
+
+    <!-- The day per person, for the officer who signs the book off. The sections below trace one
+         voucher at a time; this is the other reading a branch needs — what each member of staff
+         handled, and whether their column adds up. Built from whoever appears in the day's rows, so
+         one person working alone gets one line and five people get five. -->
+    @if (byUser.length > 0) {
+      <div class="pg-card db-section db-byuser">
+        <div class="db-section__head">
+          <strong>Officer Verification Sheet</strong>
+          <span class="db-muted">Each person's own credit, debit and net for the day</span>
+          <span class="db-section__count"> {{ byUser.length }} {{ byUser.length === 1 ? 'person' : 'people' }} </span>
+        </div>
+        <div class="pg-table-wrap">
+          <table class="pg-table db-table">
+            <thead>
+              <tr>
+                <th>Handled by</th>
+                <th class="num">Items</th>
+                <th class="num">Credit (CR)</th>
+                <th class="num">Debit (DR)</th>
+                <th class="num">Net</th>
+                <th class="num">Pending</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (u of byUser; track u.name) {
+                <tr>
+                  <td class="db-byuser__name">{{ u.name }}</td>
+                  <td class="num">{{ u.items }}</td>
+                  <td class="num db-byuser__cr">₹{{ u.credit | number: '1.2-2' }}</td>
+                  <td class="num db-byuser__dr">₹{{ u.debit | number: '1.2-2' }}</td>
+                  <td
+                    class="num db-byuser__net"
+                    [class.db-byuser__net--pos]="u.net >= 0"
+                    [class.db-byuser__net--neg]="u.net < 0"
+                  >
+                    ₹{{ u.net | number: '1.2-2' }}
+                  </td>
+                  <td class="num">
+                    @if (u.pending > 0) {
+                      <span class="db-badge db-badge--pending">{{ u.pending }}</span>
+                    } @else {
+                      —
+                    }
+                  </td>
+                </tr>
+              }
+            </tbody>
+            <!-- The sheet's own total, which must equal the day's totals above. That equality is
+                 what makes the sheet verifiable rather than just informative. -->
+            <tfoot>
+              <tr class="db-byuser__total">
+                <td>All staff</td>
+                <td class="num">{{ byUserTotals.items }}</td>
+                <td class="num db-byuser__cr">₹{{ byUserTotals.credit | number: '1.2-2' }}</td>
+                <td class="num db-byuser__dr">₹{{ byUserTotals.debit | number: '1.2-2' }}</td>
+                <td
+                  class="num db-byuser__net"
+                  [class.db-byuser__net--pos]="byUserTotals.net >= 0"
+                  [class.db-byuser__net--neg]="byUserTotals.net < 0"
+                >
+                  ₹{{ byUserTotals.net | number: '1.2-2' }}
+                </td>
+                <td class="num">
+                  @if (byUserTotals.pending > 0) {
+                    {{ byUserTotals.pending }}
+                  } @else {
+                    —
+                  }
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      </div>
+    }
+
+    <!-- One table per source register rather than one long list. The two read differently: the
+         cashier's rows are cash that actually crossed the counter, the clerk's are requests nobody
+         has actioned yet. Mixed together they invited the wrong sum. -->
+    @for (s of sections; track s.key) {
+      <!-- The section's own colour on the left edge: cash that actually crossed the counter, work
+           still waiting to be actioned, and postings the system made are three different things to
+           a person closing the day. -->
+      <div [class]="'pg-card db-section db-section--' + s.key">
+        <div class="db-section__head">
+          <strong>{{ s.label }}</strong>
+          <span class="db-muted">{{ s.hint }}</span>
+          <span class="db-section__count">{{ s.rows.length }} row{{ s.rows.length === 1 ? '' : 's' }}</span>
+        </div>
+        <table class="pg-table">
+          <thead>
+            <tr>
+              <th>Voucher No</th>
+              <th>Dr/Cr</th>
+              <th>Type</th>
+              <th>Account</th>
+              <th>Party</th>
+              <th class="num">Amount</th>
+              <th>Payment</th>
+              <th>Status</th>
+              <th>By</th>
+              <th>Approved By</th>
+              <th>Time</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (r of s.rows; track r.voucherNo ?? r.section + r.txnId) {
+              <tr [class.db-row--cr]="r.side === 'CR'" [class.db-row--dr]="r.side === 'DR'">
+                <td>
+                  <span class="pg-chip">{{ r.voucherNo ?? '—' }}</span>
+                </td>
+                <td>
+                  <span class="db-side" [class.db-side--cr]="r.side === 'CR'" [class.db-side--dr]="r.side === 'DR'">
+                    {{ r.side }}
+                  </span>
+                </td>
+                <td>{{ r.kind }}</td>
+                <td>
+                  {{ r.accountNo ?? '—' }}
+                  @if (r.accountType) {
+                    <span class="db-muted">· {{ r.accountType }}</span>
+                  }
+                </td>
+                <td>{{ r.party ?? '—' }}</td>
+                <td class="num">₹{{ r.amount | number: '1.2-2' }}</td>
+                <td>{{ r.paymentTypeName ?? '—' }}</td>
+                <td>
+                  <span [class]="statusClass(r.status)">{{ r.status }}</span>
+                </td>
+                <td>{{ r.handledBy ?? '—' }}</td>
+                <td>
+                  {{ r.approvedBy ?? '—' }}
+                  @if (r.approvedBy && r.actionedAt) {
+                    <span class="db-muted">· {{ timeOf(r.actionedAt) }}</span>
+                  }
+                </td>
+                <td>{{ timeOf(r.submittedAt) }}</td>
+              </tr>
+            }
+          </tbody>
+          <tfoot>
+            <tr>
+              <td colspan="5">{{ s.label }} subtotal</td>
+              <td class="num">
+                @if (s.credit > 0 && s.debit > 0) {
+                  ₹{{ s.credit | number: '1.2-2' }} CR · ₹{{ s.debit | number: '1.2-2' }} DR
+                } @else if (s.credit > 0) {
+                  ₹{{ s.credit | number: '1.2-2' }} CR
+                } @else if (s.debit > 0) {
+                  ₹{{ s.debit | number: '1.2-2' }} DR
+                } @else {
+                  —
+                }
+              </td>
+              <td colspan="5"></td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    }
+  }
+
+  @if (!loading && loaded && rows.length > 0 && filteredRows.length === 0) {
+    <div class="pg-empty">No voucher matches “{{ search }}”.</div>
+  }
+</div>

src/app/cashier/day-book/day-book.component.scss

@@ -0,0 +1,441 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/* Layout and page chrome come from cashier-shared.scss; only what is specific to the day book
+   lives here. */
+
+.db-filters {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 12px 16px;
+  margin-bottom: 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+
+  /* The search box takes the slack so the two selects keep their natural width. */
+  &__search {
+    flex: 1 1 260px;
+  }
+}
+
+.db-note {
+  margin: 8px 0 12px;
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+/* One card per source register. The heading says which register, and why its rows read differently
+   from the others, so the three are not added up as though they were one list. */
+.db-section {
+  margin-bottom: 14px;
+  border-left: 3px solid #cbd5e1;
+
+  /* Cash that actually crossed the counter — the section a drawer is checked against, so it
+     carries the darker green. */
+  &--CASHIER {
+    border-left-color: #15803d;
+
+    .db-section__head {
+      background: #f0fdf4;
+    }
+  }
+
+  /* Raised but not actioned: no cash has moved yet, so the lighter shade of the same green. */
+  &--CLERK {
+    border-left-color: #86efac;
+
+    .db-section__head {
+      background: #f7fef9;
+    }
+  }
+
+  /* Postings with no counter behind them — interest, charges, journals. Not the branch's cash at
+     all, so a different colour rather than a third green that would read as a third cash state. */
+  &--SYSTEM {
+    border-left-color: #6366f1;
+
+    .db-section__head {
+      background: #f5f5ff;
+    }
+  }
+
+  &__head {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    padding: 10px 14px;
+    background: #f8fafc;
+    border-bottom: 1px solid #e2e8f0;
+    font-size: 12px;
+
+    strong {
+      font-size: 13px;
+      color: #0d1b2a;
+    }
+  }
+
+  &__count {
+    margin-left: auto;
+    font-size: 11px;
+    font-weight: 700;
+    color: #64748b;
+  }
+}
+
+/* Dr/Cr marker — the one thing the eye should catch when scanning a day's vouchers. */
+.db-side {
+  display: inline-block;
+  min-width: 28px;
+  text-align: center;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  background: #f1f5f9;
+  color: #475569;
+
+  &--cr {
+    background: #dcfce7;
+    color: #15803d;
+  }
+
+  &--dr {
+    background: #fee2e2;
+    color: #b91c1c;
+  }
+}
+
+/* A hairline on the leading edge, tinted by side: readable without colouring the whole row,
+   which would fight the table's own hover state. */
+.db-row--cr td:first-child {
+  box-shadow: inset 3px 0 0 #22c55e;
+}
+
+.db-row--dr td:first-child {
+  box-shadow: inset 3px 0 0 #ef4444;
+}
+
+.db-muted {
+  color: #94a3b8;
+  font-size: 11px;
+}
+
+.db-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: #f1f5f9;
+  color: #475569;
+
+  /* Passed, but nothing handed over yet — the lighter green. */
+  &--ok {
+    background: #dcfce7;
+    color: #15803d;
+  }
+
+  /* Cash has actually left the counter. Filled and dark, so the final state is the one the eye
+     lands on: on this page the difference between "approved" and "paid out" is the whole question. */
+  &--done {
+    background: #15803d;
+    color: #fff;
+  }
+
+  &--pending {
+    background: #fef3c7;
+    color: #b45309;
+  }
+
+  &--rejected {
+    background: #fee2e2;
+    color: #b91c1c;
+  }
+}
+
+/* Not defined in cashier-shared.scss, so the day book carries its own. */
+.pg-alert {
+  padding: 10px 14px;
+  margin-bottom: 12px;
+  border-radius: 6px;
+  font-size: 13px;
+
+  &--error {
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    color: #b91c1c;
+  }
+}
+
+/* Exception summary, above the table: the day's flagged vouchers listed in full so nobody has to
+   hunt for a badge. */
+.db-exceptions {
+  margin-bottom: 14px;
+  padding: 12px 16px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-left: 4px solid #dc2626;
+  border-radius: 8px;
+
+  &__head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+    color: #b91c1c;
+    font-size: 13px;
+
+    mat-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+
+    /* Pushed to the right so the count reads first. */
+    .pg-btn {
+      margin-left: auto;
+      height: 30px;
+      font-size: 12px;
+    }
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    padding: 6px 0;
+    font-size: 12px;
+    border-top: 1px dotted #fecaca;
+  }
+
+  &__amt {
+    font-variant-numeric: tabular-nums;
+    color: #334155;
+  }
+
+  &__diff {
+    color: #b91c1c;
+  }
+
+  &__why {
+    color: #0d1b2a;
+    font-weight: 600;
+  }
+}
+
+/* Raising an exception is a deliberate, consequential act — styled to read that way without
+   looking destructive, since nothing is deleted. */
+.pg-btn--warn {
+  background: #fffbeb;
+  border-color: #fde68a;
+  color: #92400e;
+
+  &:hover {
+    background: #fef3c7;
+  }
+}
+
+.db-icon-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  background: #fff;
+  color: #475569;
+  cursor: pointer;
+
+  &:hover {
+    background: #f1f5f9;
+    color: #0d1b2a;
+  }
+
+  mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Attachment count rides on the paperclip so a voucher with a scanned slip reads as different
+     at a glance, without a separate column. */
+  &__count {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    min-width: 14px;
+    height: 14px;
+    padding: 0 3px;
+    border-radius: 999px;
+    background: #2563eb;
+    color: #fff;
+    font-size: 9px;
+    font-weight: 800;
+    line-height: 14px;
+  }
+}
+
+/* Inline panel, opened under the row it belongs to. */
+.db-panel-row td {
+  background: #f8fafc !important;
+  padding: 0 !important;
+}
+
+.db-panel {
+  padding: 14px 16px;
+  border-left: 3px solid #2563eb;
+
+  &__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    font-size: 13px;
+    color: #0d1b2a;
+  }
+
+  &__body {
+    display: flex;
+    align-items: flex-end;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+
+  &__remarks {
+    display: block;
+    margin-top: 12px;
+    max-width: 640px;
+  }
+
+  &__warn {
+    margin: 10px 0 0;
+    padding: 8px 12px;
+    border-radius: 6px;
+    background: #fffbeb;
+    border: 1px solid #fde68a;
+    color: #92400e;
+    font-size: 12px;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 14px;
+  }
+}
+
+/* The two amounts being compared, side by side. */
+.db-cmp {
+  padding: 8px 14px;
+  border-radius: 6px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+
+  &__label {
+    display: block;
+    font-size: 10px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #94a3b8;
+  }
+
+  &__value {
+    display: block;
+    margin-top: 2px;
+    font-size: 15px;
+    font-weight: 800;
+    font-variant-numeric: tabular-nums;
+    color: #0d1b2a;
+  }
+
+  &--good {
+    background: #f0fdf4;
+    border-color: #bbf7d0;
+
+    .db-cmp__value {
+      color: #15803d;
+    }
+  }
+
+  &--bad {
+    background: #fef2f2;
+    border-color: #fecaca;
+
+    .db-cmp__value {
+      color: #b91c1c;
+    }
+  }
+}
+
+.pg-table tfoot td {
+  background: #f8fafc;
+  font-weight: 800;
+  font-size: 12px;
+  color: #334155;
+  border-top: 1px solid #e2e8f0;
+}
+
+/* Officer Verification Sheet — the day totalled per person, for whoever signs the book off.
+   Numeric cells use the shared `.num` from cashier-shared.scss rather than a class of their own:
+   that one already right-aligns and tabular-figures both the heading and the cell, which is what
+   lines a money column up. A local class only styled the cells, leaving every heading left-aligned
+   over right-aligned figures. */
+.db-byuser {
+  /* Not one of the three sections below, so no section colour: this is the whole day summed by
+     person, and giving it one of their edges would read as a fourth section. */
+  border-left-color: #94a3b8;
+
+  &__name {
+    font-weight: 600;
+    color: #0f172a;
+  }
+
+  /* Received green, paid-out red — the convention a passbook already uses, so the two columns are
+     told apart without reading the headings. */
+  &__cr {
+    color: #15803d;
+  }
+
+  &__dr {
+    color: #b91c1c;
+  }
+
+  &__net {
+    font-weight: 600;
+
+    &--pos {
+      color: #15803d;
+    }
+
+    &--neg {
+      color: #b91c1c;
+    }
+  }
+
+  /* The sheet's own total sits against a tinted band so the eye lands on the line that has to
+     agree with the day's figures above. */
+  &__total {
+    background: #f8fafc;
+    font-weight: 600;
+
+    td {
+      border-top: 2px solid #cbd5e1;
+    }
+  }
+}

src/app/cashier/day-book/day-book.component.ts

@@ -0,0 +1,378 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { Router } from '@angular/router';
+import { catchError, of } from 'rxjs';
+import { CashierService } from '../cashier.service';
+
+/**
+ * Which part of the day's work a row came from. Set by the server, one per source register.
+ *
+ * Only counter business appears in the day book. Cash moved between the vault and the drawers is
+ * the bank shifting its own money, not a customer transaction, and it is read on the Cashier
+ * Position and Closing Cash Report where the drawer itself is the subject.
+ */
+type DayBookSection = 'CASHIER' | 'CLERK' | 'SYSTEM';
+
+interface DayBookRow {
+  voucherNo: string | null;
+  section: DayBookSection;
+  side: 'CR' | 'DR';
+  kind: string;
+  accountNo: string | null;
+  accountType: string | null;
+  party: string | null;
+  amount: number | null;
+  paymentTypeName: string | null;
+  description: string | null;
+  status: string;
+  handledBy: string | null;
+  approvedBy: string | null;
+  txnId: string | null;
+  submittedAt: string | null;
+  actionedAt: string | null;
+}
+
+/**
+ * Day book — every voucher raised on one date in a single list: cash deposits, withdrawals,
+ * disbursements, collections and bank transfers, with the day's credit and debit totals.
+ */
+@Component({
+  selector: 'mifosx-day-book',
+  templateUrl: './day-book.component.html',
+  styleUrls: [
+    '../cashier-shared.scss',
+    './day-book.component.scss'
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIconModule
+  ]
+})
+export class DayBookComponent implements OnInit {
+  private service = inject(CashierService);
+  private router = inject(Router);
+
+  /**
+   * The heading, taken from the route the screen was opened by.
+   *
+   * One screen serves three menus, and only the Branch Ops reading is a different thing: there it
+   * is the branch's book with the verification sheet an officer signs off, rather than one desk's
+   * view of the day.
+   */
+  get title(): string {
+    return this.router.url.includes('/branch-ops/') ? 'Day Book & Officer Verification' : 'Day Book';
+  }
+
+  date = '';
+  side: '' | 'CR' | 'DR' = '';
+  status = '';
+  search = '';
+
+  rows: DayBookRow[] = [];
+  creditTotal = 0;
+  debitTotal = 0;
+  netTotal = 0;
+  loading = false;
+  loaded = false;
+  errorMsg = '';
+
+  ngOnInit(): void {
+    this.date = this.today();
+    this.load();
+  }
+
+  /** Local date as yyyy-MM-dd — toISOString() would shift the day in any timezone behind UTC. */
+  private today(): string {
+    const d = new Date();
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+  }
+
+  load(): void {
+    if (!this.date) return;
+    this.loading = true;
+    this.errorMsg = '';
+    this.service
+      .dayBook(this.date, this.side || undefined, this.status || undefined)
+      .pipe(
+        catchError((err: any) => {
+          this.errorMsg =
+            err?.error?.errors?.[0]?.defaultUserMessage ?? err?.error?.message ?? 'Could not load the day book.';
+          return of(null);
+        })
+      )
+      .subscribe((res: any) => {
+        this.loading = false;
+        this.loaded = true;
+        this.rows = res?.rows ?? [];
+        this.creditTotal = Number(res?.creditTotal ?? 0);
+        this.debitTotal = Number(res?.debitTotal ?? 0);
+        this.netTotal = Number(res?.netTotal ?? 0);
+      });
+  }
+
+  /** Shifts the selected date by whole days, so yesterday is one click rather than a date picker. */
+  shiftDate(days: number): void {
+    const [
+      y,
+      m,
+      d
+    ] = this.date.split('-').map(Number);
+    const dt = new Date(y, m - 1, d + days);
+    this.date = `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, '0')}-${String(dt.getDate()).padStart(2, '0')}`;
+    this.load();
+  }
+
+  goToday(): void {
+    this.date = this.today();
+    this.load();
+  }
+
+  /**
+   * The day's rows split by where they came from, in the order they are read.
+   *
+   * Cashier work first — that is the counter — then the clerk's outstanding requests. An empty
+   * section is dropped rather than shown as a heading over nothing.
+   *
+   * A section is not "who typed it": a clerk raises a withdrawal that a cashier pays out, so the
+   * heading says which register the entry belongs to, and the By column still names the person.
+   */
+  get sections(): {
+    key: DayBookSection;
+    label: string;
+    hint: string;
+    rows: DayBookRow[];
+    credit: number;
+    debit: number;
+  }[] {
+    const order: { key: DayBookSection; label: string; hint: string }[] = [
+      { key: 'CASHIER', label: 'Cashier', hint: 'Cash actually taken in and paid out over the counter' },
+      { key: 'CLERK', label: 'Clerk', hint: 'Requests raised but not yet actioned — no cash has moved' },
+      // Postings that reached the ledger without a request behind them: interest the nightly run
+      // credited, a charge taken from a balance, a manual journal. These are the day's work too,
+      // and an officer accounting for the day cannot do it from the counter registers alone.
+      {
+        key: 'SYSTEM',
+        label: 'System & Journal',
+        hint: 'Interest, charges and journals posted without a counter request'
+      }
+    ];
+    return order
+      .map((s) => {
+        const rows = this.filteredRows.filter((r) => r.section === s.key);
+        return {
+          ...s,
+          rows,
+          credit: rows
+            .filter((r) => r.side === 'CR' && this.countsAsMoney(r))
+            .reduce((t, r) => t + Number(r.amount ?? 0), 0),
+          debit: rows
+            .filter((r) => r.side === 'DR' && this.countsAsMoney(r))
+            .reduce((t, r) => t + Number(r.amount ?? 0), 0)
+        };
+      })
+      .filter((s) => s.rows.length > 0);
+  }
+
+  /** Free-text narrowing over the rows already fetched — no extra round trip per keystroke. */
+  get filteredRows(): DayBookRow[] {
+    const base = this.rows;
+    const q = this.search.trim().toLowerCase();
+    if (!q) return base;
+    return base.filter((r) =>
+      [
+        r.voucherNo,
+        r.accountNo,
+        r.party,
+        r.kind,
+        r.paymentTypeName,
+        r.handledBy,
+        r.description
+      ]
+        .filter(Boolean)
+        .some((v) => String(v).toLowerCase().includes(q))
+    );
+  }
+
+  /** Totals for what is on screen, so a search or side filter still reconciles. */
+  get shownCredit(): number {
+    return this.filteredRows
+      .filter((r) => r.side === 'CR' && this.countsAsMoney(r))
+      .reduce((s, r) => s + Number(r.amount ?? 0), 0);
+  }
+
+  get shownDebit(): number {
+    return this.filteredRows
+      .filter((r) => r.side === 'DR' && this.countsAsMoney(r))
+      .reduce((s, r) => s + Number(r.amount ?? 0), 0);
+  }
+
+  /** Only approved money is real money — a pending or rejected voucher must not move the totals.
+   *  The three source registers don't share one terminal status string: deposits and disbursements
+   *  land on APPROVED, but a clerk withdrawal's own finished state is WITHDRAWN — missing it here
+   *  meant a completed withdrawal moved real money out yet the DR total stayed at zero. */
+  private countsAsMoney(r: DayBookRow): boolean {
+    const s = (r.status ?? '').toUpperCase();
+    return s === 'APPROVED' || s === 'COMPLETED' || s === 'WITHDRAWN';
+  }
+
+  /**
+   * The day totalled per person, for the officer who signs the book off.
+   *
+   * A branch's day book is read two ways. Entry by entry, to trace one voucher — which the sections
+   * below already give. And person by person, to ask what each member of staff handled and whether
+   * their column adds up: that is the reconciliation a principal officer actually performs, and
+   * without it they are adding a day of rows in their head.
+   *
+   * Built from whoever appears in the day's own rows rather than from a list of staff, so it needs
+   * no configuring: one person working alone gets one line, five people get five, and somebody who
+   * handled nothing today is simply absent instead of showing as a row of zeros.
+   *
+   * Only approved money counts, the same rule the section totals use — a pending request is not
+   * cash anybody is answerable for yet. Pending and rejected rows are still counted as ITEMS, so a
+   * person whose work is all awaiting approval does not vanish from the sheet.
+   *
+   * Ordered by the largest turnover first: the columns worth checking hardest are the ones that
+   * moved the most money.
+   */
+  get byUser(): {
+    name: string;
+    credit: number;
+    debit: number;
+    net: number;
+    items: number;
+    pending: number;
+  }[] {
+    const map = new Map<string, { name: string; credit: number; debit: number; items: number; pending: number }>();
+
+    for (const r of this.filteredRows) {
+      // Rows the registers could not attribute are grouped rather than dropped: an unattributed
+      // amount is exactly what an officer needs to see, and hiding it would leave the sheet's own
+      // total disagreeing with the day's.
+      const name = (r.handledBy ?? '').trim() || 'Unattributed';
+      const entry = map.get(name) ?? { name, credit: 0, debit: 0, items: 0, pending: 0 };
+
+      entry.items++;
+      if (this.countsAsMoney(r)) {
+        const amount = Number(r.amount ?? 0);
+        if (r.side === 'CR') {
+          entry.credit += amount;
+        } else {
+          entry.debit += amount;
+        }
+      } else {
+        entry.pending++;
+      }
+      map.set(name, entry);
+    }
+
+    return Array.from(map.values())
+      .map((e) => ({ ...e, net: e.credit - e.debit }))
+      .sort((a, b) => b.credit + b.debit - (a.credit + a.debit));
+  }
+
+  /** The sheet's own totals, which must equal the day's — that is what makes it verifiable. */
+  get byUserTotals(): { credit: number; debit: number; net: number; items: number; pending: number } {
+    return this.byUser.reduce(
+      (t, u) => ({
+        credit: t.credit + u.credit,
+        debit: t.debit + u.debit,
+        net: t.net + u.net,
+        items: t.items + u.items,
+        pending: t.pending + u.pending
+      }),
+      { credit: 0, debit: 0, net: 0, items: 0, pending: 0 }
+    );
+  }
+
+  /**
+   * Approved and paid out are not the same state, and the day book is where the difference matters:
+   * an approved withdrawal is a promise, a withdrawn one is money gone. Both used to render in the
+   * same green, so a reader could not tell from the badge whether the customer had actually been
+   * handed the cash — the one thing this page is read to find out.
+   */
+  statusClass(status: string): string {
+    switch ((status ?? '').toUpperCase()) {
+      case 'WITHDRAWN':
+      case 'COMPLETED':
+      case 'CLOSED':
+        // Cash has left the counter. The darker, filled badge — the final state.
+        return 'db-badge db-badge--done';
+      case 'APPROVED':
+        // Passed, but nobody has handed anything over yet.
+        return 'db-badge db-badge--ok';
+      case 'PENDING':
+        return 'db-badge db-badge--pending';
+      case 'REJECTED':
+        return 'db-badge db-badge--rejected';
+      default:
+        return 'db-badge';
+    }
+  }
+
+  /** Time of day only — the date is already the page's subject. */
+  timeOf(iso: string | null): string {
+    if (!iso) return '—';
+    const t = iso.split('T')[1];
+    return t ? t.slice(0, 5) : '—';
+  }
+
+  exportCsv(): void {
+    const header = [
+      'Section',
+      'Voucher No',
+      'Side',
+      'Type',
+      'Account',
+      'Party',
+      'Amount',
+      'Payment Type',
+      'Status',
+      'Handled By',
+      'Approved By',
+      'Time'
+    ];
+    const lines = this.filteredRows.map((r) =>
+      [
+        r.section,
+        r.voucherNo ?? '',
+        r.side,
+        r.kind,
+        r.accountNo ?? '',
+        r.party ?? '',
+        String(r.amount ?? 0),
+        r.paymentTypeName ?? '',
+        r.status,
+        r.handledBy ?? '',
+        r.approvedBy ?? '',
+        this.timeOf(r.submittedAt)
+      ]
+        // Quote every field and double any embedded quote: names and narrations routinely
+        // contain commas, which would otherwise split into extra columns.
+        .map((v) => `"${String(v).replace(/"/g, '""')}"`)
+        .join(',')
+    );
+    const csv = [
+      header.join(','),
+      ...lines
+    ].join('\n');
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `day-book-${this.date}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+}

src/app/cashier/end-of-day-report/end-of-day-report.component.html

@@ -0,0 +1,606 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="pg eod">
+  <!-- Toolbar: never printed, because a printed sheet has nothing to click. -->
+  <div class="pg-head no-print">
+    <div>
+      <h1 class="pg-title">End of the Day Report</h1>
+      <p class="pg-sub">What moved today, whether the cash agrees with the books, and who signs off.</p>
+    </div>
+    <div class="pg-toolbar">
+      <label class="pg-field">
+        <span>Business date</span>
+        <input type="date" [(ngModel)]="date" (change)="reload()" />
+      </label>
+      <button class="pg-btn pg-btn--ghost" (click)="reload()" [disabled]="loading">
+        <mat-icon>refresh</mat-icon>
+        Reload
+      </button>
+      <button class="pg-btn pg-btn--primary" (click)="print()" [disabled]="!loaded">
+        <mat-icon>print</mat-icon>
+        Print / Save as PDF
+      </button>
+    </div>
+  </div>
+
+  @if (loading) {
+    <div class="pg-empty">Loading the day&rsquo;s figures&hellip;</div>
+  }
+
+  @if (loaded) {
+    <div class="eod-sheet">
+      <!-- ── Header ── -->
+      <div class="eod-sheet__head">
+        <h2 class="eod-sheet__title">Daily EOD &amp; Transaction Report</h2>
+        <div class="eod-sheet__meta">
+          <div class="eod-meta">
+            <span class="eod-meta__label">Date</span>
+            <span class="eod-meta__value">{{ date | date: 'dd MMM yyyy' }}</span>
+          </div>
+          <div class="eod-meta">
+            <span class="eod-meta__label">Branch</span>
+            <span class="eod-meta__value">{{ branchName || '—' }}</span>
+          </div>
+          <div class="eod-meta">
+            <span class="eod-meta__label">Prepared by</span>
+            <span class="eod-meta__value">{{ preparedBy || '—' }}</span>
+          </div>
+          <div class="eod-meta">
+            <span class="eod-meta__label">Scope</span>
+            <span class="eod-meta__value">{{ scopedToCashier ? 'My counter' : 'Branch counter' }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- ── 1. Transaction summary ── -->
+      <section class="eod-section">
+        <h3 class="eod-section__title"><span class="eod-section__no">1</span> Transaction Summary</h3>
+
+        @if (sectionLines.length) {
+          <p class="eod-caption">Where the money came from</p>
+          <table class="pg-table">
+            <thead>
+              <tr>
+                <th>Source</th>
+                <th class="num">Entries</th>
+                <th class="num col-in">Money in</th>
+                <th class="num col-out">Money out</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (l of sectionLines; track l.label) {
+                <tr>
+                  <td>{{ l.label }}</td>
+                  <td class="num">{{ l.count }}</td>
+                  <td class="num col-in">{{ l.credit ? (l.credit | currency: 'INR') : '—' }}</td>
+                  <td class="num col-out">{{ l.debit ? (l.debit | currency: 'INR') : '—' }}</td>
+                </tr>
+              }
+            </tbody>
+            <tfoot>
+              <tr>
+                <td><strong>Total</strong></td>
+                <td class="num">
+                  <strong>{{ txnCount }}</strong>
+                </td>
+                <td class="num col-in">
+                  <strong>{{ summaryCreditTotal | currency: 'INR' }}</strong>
+                </td>
+                <td class="num col-out">
+                  <strong>{{ summaryDebitTotal | currency: 'INR' }}</strong>
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+
+          <p class="eod-caption eod-caption--spaced">What kind of entries</p>
+          <table class="pg-table">
+            <thead>
+              <tr>
+                <th>Kind</th>
+                <th class="num">Entries</th>
+                <th class="num col-in">Money in</th>
+                <th class="num col-out">Money out</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (l of kindLines; track l.label) {
+                <tr>
+                  <td>{{ l.label }}</td>
+                  <td class="num">{{ l.count }}</td>
+                  <td class="num col-in">{{ l.credit ? (l.credit | currency: 'INR') : '—' }}</td>
+                  <td class="num col-out">{{ l.debit ? (l.debit | currency: 'INR') : '—' }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+
+          <p class="eod-note">
+            Only entries that actually moved money. Anything still pending is listed at the bottom. These figures match
+            the Day Book for the same date.
+          </p>
+        } @else {
+          <div class="pg-empty">No transactions on this date.</div>
+        }
+      </section>
+
+      <!-- ── 2. Cash ──
+           Movement first, because that is the part every figure here agrees on. A comparison
+           against what is held is only offered where both sides describe the same period. -->
+      <section class="eod-section">
+        <h3 class="eod-section__title"><span class="eod-section__no">2</span> Cash</h3>
+
+        @if (scopedToCashier) {
+          <p class="eod-caption">Your drawer today</p>
+          <table class="pg-table eod-recon">
+            <tbody>
+              <tr>
+                <td>Cash you took from the vault this morning</td>
+                <td class="num">{{ openingFloat | currency: 'INR' }}</td>
+              </tr>
+              <tr>
+                <td>Cash you took from members <span class="eod-hint">deposits, including DD cash</span></td>
+                <td class="num col-in">+{{ cashDeposits | currency: 'INR' }}</td>
+              </tr>
+              @if (interCashierIn) {
+                <tr>
+                  <td>Cash another cashier gave you</td>
+                  <td class="num col-in">+{{ interCashierIn | currency: 'INR' }}</td>
+                </tr>
+              }
+              <tr>
+                <td>Cash you paid to members <span class="eod-hint">withdrawals</span></td>
+                <td class="num col-out">−{{ cashWithdrawals | currency: 'INR' }}</td>
+              </tr>
+              @if (settledOut) {
+                <tr>
+                  <td>Cash you handed back to the vault</td>
+                  <td class="num col-out">−{{ settledOut | currency: 'INR' }}</td>
+                </tr>
+              }
+              @if (interCashierOut) {
+                <tr>
+                  <td>Cash you gave another cashier</td>
+                  <td class="num col-out">−{{ interCashierOut | currency: 'INR' }}</td>
+                </tr>
+              }
+              <tr class="eod-recon__expected">
+                <td><strong>So your drawer should hold</strong></td>
+                <td class="num">
+                  @if (expectedCash !== null) {
+                    <strong>{{ expectedCash | currency: 'INR' }}</strong>
+                  } @else {
+                    <span class="eod-blank">&mdash;</span>
+                  }
+                </td>
+              </tr>
+              <tr>
+                <td><strong>System says you hold</strong></td>
+                <td class="num">
+                  @if (actualCash !== null) {
+                    <strong>{{ actualCash | currency: 'INR' }}</strong>
+                  } @else {
+                    <span class="eod-blank">nothing recorded</span>
+                  }
+                </td>
+              </tr>
+              @if (variance !== null) {
+                <tr class="eod-recon__variance" [class]="varianceClass">
+                  <td><strong>Difference</strong></td>
+                  <td class="num">
+                    <strong>{{ variance | currency: 'INR' }}</strong>
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
+
+          @if (variance !== null) {
+            @if (varianceOk) {
+              <p class="eod-verdict eod-verdict--ok">
+                <mat-icon>check_circle</mat-icon>
+                Your cash agrees. Nothing short, nothing over.
+              </p>
+            } @else {
+              <p class="eod-verdict eod-verdict--bad">
+                <mat-icon>error</mat-icon>
+                {{ variance! > 0 ? 'Extra' : 'Short' }} by
+                {{ (variance! > 0 ? variance : -variance!) | currency: 'INR' }}. Explain this before closing.
+              </p>
+            }
+          } @else {
+            <p class="eod-note">Today&rsquo;s cash legs were not sent for this login, so nothing is compared.</p>
+          }
+        } @else {
+          <p class="eod-caption">Cash that moved across the branch today</p>
+          <table class="pg-table eod-recon">
+            <tbody>
+              <tr>
+                <td>Cash taken from members <span class="eod-hint">deposits</span></td>
+                <td class="num col-in">+{{ branchDeposits ?? 0 | currency: 'INR' }}</td>
+              </tr>
+              <tr>
+                <td>Cash paid to members <span class="eod-hint">withdrawals and closures</span></td>
+                <td class="num col-out">−{{ branchWithdrawals ?? 0 | currency: 'INR' }}</td>
+              </tr>
+              <tr class="eod-recon__expected">
+                <td><strong>Net change today</strong></td>
+                <td class="num col-net">
+                  <strong>{{ branchNetMovement | currency: 'INR' }}</strong>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <p class="eod-caption eod-caption--spaced">Cash the branch is holding right now</p>
+          <table class="pg-table eod-recon">
+            <tbody>
+              <tr>
+                <td>In the vaults</td>
+                <td class="num">{{ vaultTotal ?? 0 | currency: 'INR' }}</td>
+              </tr>
+              <tr>
+                <td>With the cashiers</td>
+                <td class="num">{{ drawersTotal ?? 0 | currency: 'INR' }}</td>
+              </tr>
+              <tr class="eod-recon__expected">
+                <td><strong>Total cash in the branch</strong></td>
+                <td class="num">
+                  @if (branchHeldTotal !== null) {
+                    <strong>{{ branchHeldTotal | currency: 'INR' }}</strong>
+                  } @else {
+                    <span class="eod-blank">nothing recorded</span>
+                  }
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <p class="eod-note">
+            These are two different things and are not subtracted from each other. The first is today&rsquo;s movement;
+            the second is everything the branch has accumulated to date. Each cashier&rsquo;s own drawer is checked
+            against their own day on their login, and the branch figure is signed off on the Day Open / Day Close
+            screen.
+          </p>
+        }
+      </section>
+
+      <!-- ── 3. Who handled the day, and what each drawer holds ──
+           A clerk signs off other people's work, so the sheet has to name them. On a cashier's own
+           login this collapses to one row, which is still the right thing to print. -->
+      <section class="eod-section">
+        <h3 class="eod-section__title"><span class="eod-section__no">3</span> Handled By</h3>
+
+        @if (byUser.length) {
+          <p class="eod-caption">What each person handled</p>
+          <table class="pg-table">
+            <thead>
+              <tr>
+                <th>Handled by</th>
+                <th class="num">Entries</th>
+                <th class="num col-in">Money in</th>
+                <th class="num col-out">Money out</th>
+                <th class="num col-net">Net</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (u of byUser; track u.label) {
+                <tr>
+                  <td>{{ u.label }}</td>
+                  <td class="num">{{ u.count }}</td>
+                  <td class="num col-in">{{ u.credit ? (u.credit | currency: 'INR') : '—' }}</td>
+                  <td class="num col-out">{{ u.debit ? (u.debit | currency: 'INR') : '—' }}</td>
+                  <td class="num col-net">{{ u.credit - u.debit | currency: 'INR' }}</td>
+                </tr>
+              }
+            </tbody>
+            <tfoot>
+              <tr>
+                <td><strong>Total</strong></td>
+                <td class="num">
+                  <strong>{{ txnCount }}</strong>
+                </td>
+                <td class="num col-in">
+                  <strong>{{ summaryCreditTotal | currency: 'INR' }}</strong>
+                </td>
+                <td class="num col-out">
+                  <strong>{{ summaryDebitTotal | currency: 'INR' }}</strong>
+                </td>
+                <td class="num col-net">
+                  <strong>{{ summaryCreditTotal - summaryDebitTotal | currency: 'INR' }}</strong>
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        } @else {
+          <div class="pg-empty">Nobody moved money on this date.</div>
+        }
+
+        @if (cashierPositions.length) {
+          <p class="eod-caption eod-caption--spaced">What each cashier is holding</p>
+          <table class="pg-table">
+            <thead>
+              <tr>
+                <th>Cashier</th>
+                <th class="num">Cash held</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (p of cashierPositions; track p.cashierId) {
+                <tr>
+                  <td>{{ p.cashierName }}</td>
+                  <td class="num">{{ p.totalAmount | currency: 'INR' }}</td>
+                </tr>
+              }
+            </tbody>
+            @if (cashierPositions.length > 1) {
+              <tfoot>
+                <tr>
+                  <td><strong>Total</strong></td>
+                  <td class="num">
+                    <strong>{{ cashierPositionTotal | currency: 'INR' }}</strong>
+                  </td>
+                </tr>
+              </tfoot>
+            }
+          </table>
+          <p class="eod-note">
+            This is what each drawer should contain right now &mdash; a running total, not just today. Count against it
+            before settling to the vault.
+          </p>
+        }
+      </section>
+
+      <!-- ── 4. Every transaction ──
+           The sections above are totals, and a total nobody can break down is a total nobody can
+           check. This is the day itself, line by line, so a figure above can be traced to the
+           entries that made it. -->
+      <section class="eod-section eod-section--wide">
+        <h3 class="eod-section__title"><span class="eod-section__no">4</span> Every Transaction</h3>
+
+        @if (approvedRows.length) {
+          <table class="pg-table eod-txns">
+            <thead>
+              <tr>
+                <th>Voucher</th>
+                <th>Kind</th>
+                <th>Account</th>
+                <th>Party</th>
+                <th>Handled by</th>
+                <th class="num col-in">Money in</th>
+                <th class="num col-out">Money out</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (r of approvedRows; track r.voucherNo + '|' + r.txnId) {
+                <tr>
+                  <td class="eod-mono">{{ r.voucherNo || '—' }}</td>
+                  <td>{{ kindLabel(r.kind) }}</td>
+                  <td class="eod-mono">{{ r.accountNo || '—' }}</td>
+                  <td>{{ r.party || '—' }}</td>
+                  <td>{{ r.handledBy || '—' }}</td>
+                  <td class="num col-in">{{ r.side === 'CR' ? (r.amount | currency: 'INR') : '—' }}</td>
+                  <td class="num col-out">{{ r.side === 'DR' ? (r.amount | currency: 'INR') : '—' }}</td>
+                </tr>
+              }
+            </tbody>
+            <tfoot>
+              <tr>
+                <td colspan="5">
+                  <strong>Total &mdash; {{ txnCount }} entries</strong>
+                </td>
+                <td class="num col-in">
+                  <strong>{{ summaryCreditTotal | currency: 'INR' }}</strong>
+                </td>
+                <td class="num col-out">
+                  <strong>{{ summaryDebitTotal | currency: 'INR' }}</strong>
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        } @else {
+          <div class="pg-empty">No transactions on this date.</div>
+        }
+
+        @if (pendingRows.length) {
+          <p class="eod-caption eod-caption--spaced">Still pending &mdash; no money has moved on these</p>
+          <table class="pg-table eod-txns">
+            <thead>
+              <tr>
+                <th>Voucher</th>
+                <th>Kind</th>
+                <th>Account</th>
+                <th>Party</th>
+                <th>Raised by</th>
+                <th class="num">Amount</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (r of pendingRows; track r.voucherNo + '|' + r.txnId) {
+                <tr>
+                  <td class="eod-mono">{{ r.voucherNo || '—' }}</td>
+                  <td>{{ kindLabel(r.kind) }}</td>
+                  <td class="eod-mono">{{ r.accountNo || '—' }}</td>
+                  <td>{{ r.party || '—' }}</td>
+                  <td>{{ r.handledBy || '—' }}</td>
+                  <td class="num">{{ r.amount | currency: 'INR' }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        }
+      </section>
+
+      <!-- ── Last night's batch ──
+           Yesterday's work, posted after that day had already been counted and signed. Shown here
+           so it is not lost, kept out of every total above so today's figures still tie to the
+           ledger. Only appears when there is such a batch. -->
+      @if (priorDayRows.length) {
+        <section class="eod-section eod-section--wide eod-section--prior">
+          <h3 class="eod-section__title">
+            <mat-icon class="eod-section__icon">nights_stay</mat-icon>
+            Posted Overnight &mdash; work of
+            {{ priorDayDate ? (priorDayDate | date: 'dd MMM yyyy') : 'the previous day' }}
+          </h3>
+
+          <!-- Both dates side by side, because the whole point of this block is that they differ.
+               A reader who only sees one of them cannot tell whether the entry is being counted
+               today or merely reported today. -->
+          <div class="eod-datepair">
+            <div class="eod-datepair__item">
+              <span class="eod-datepair__label">These belong to</span>
+              <span class="eod-datepair__value">{{
+                priorDayDate ? (priorDayDate | date: 'dd MMM yyyy') : 'the previous day'
+              }}</span>
+              <span class="eod-datepair__hint">the day the system posted them against &mdash; already closed</span>
+            </div>
+            <div class="eod-datepair__arrow">→</div>
+            <div class="eod-datepair__item">
+              <span class="eod-datepair__label">Showing on</span>
+              <span class="eod-datepair__value">{{ date | date: 'dd MMM yyyy' }}</span>
+              <span class="eod-datepair__hint">today&rsquo;s report, because the run finished after midnight</span>
+            </div>
+          </div>
+
+          <p class="eod-note eod-note--lead">
+            The nightly run posted these after
+            {{ priorDayDate ? (priorDayDate | date: 'dd MMM') : 'the previous day' }} had already closed and been signed
+            off, so they surface on today&rsquo;s report instead. In the ledger they sit on
+            {{ priorDayDate ? (priorDayDate | date: 'dd MMM') : 'that date' }}, and they are
+            <strong>not counted</strong> in any figure above.
+          </p>
+
+          <table class="pg-table eod-txns">
+            <thead>
+              <tr>
+                <th>Voucher</th>
+                <th>Kind</th>
+                <th>Account</th>
+                <th>Party</th>
+                <th>Ledger date</th>
+                <th class="num col-in">Money in</th>
+                <th class="num col-out">Money out</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (r of priorDayRows; track r.voucherNo + '|' + r.txnId) {
+                <tr>
+                  <td class="eod-mono">{{ r.voucherNo || '—' }}</td>
+                  <td>{{ kindLabel(r.kind) }}</td>
+                  <td class="eod-mono">{{ r.accountNo || '—' }}</td>
+                  <td>{{ r.party || '—' }}</td>
+                  <!-- Per row, not just in the heading: one run can span a date boundary, and a
+                       reader checking a single figure against the ledger needs the date on the line
+                       they are looking at. -->
+                  <td class="eod-datecell">{{ r.effectiveDate ? (r.effectiveDate | date: 'dd MMM yyyy') : '—' }}</td>
+                  <td class="num col-in">{{ r.side === 'CR' ? (r.amount | currency: 'INR') : '—' }}</td>
+                  <td class="num col-out">{{ r.side === 'DR' ? (r.amount | currency: 'INR') : '—' }}</td>
+                </tr>
+              }
+            </tbody>
+            <tfoot>
+              <tr>
+                <td colspan="5">
+                  <strong>Total &mdash; {{ priorDayRows.length }} entries</strong>
+                </td>
+                <td class="num col-in">
+                  <strong>{{ priorDayCredit | currency: 'INR' }}</strong>
+                </td>
+                <td class="num col-out">
+                  <strong>{{ priorDayDebit | currency: 'INR' }}</strong>
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </section>
+      }
+
+      <!-- ── 5. Operational notes ── -->
+      <section class="eod-section">
+        <h3 class="eod-section__title"><span class="eod-section__no">5</span> Anything Outstanding</h3>
+
+        <ul class="eod-notes">
+          <li>
+            <span class="eod-notes__label">Entries handled</span>
+            <span class="eod-notes__value">{{ txnCount }} entries &middot; {{ kindLines.length }} kind(s)</span>
+          </li>
+          <li [class.eod-notes--warn]="pendingRows.length > 0">
+            <span class="eod-notes__label">Waiting for approval</span>
+            <span class="eod-notes__value">
+              @if (pendingRows.length) {
+                {{ pendingRows.length }} entry(ies) &mdash; the day cannot close until these are done
+              } @else {
+                None
+              }
+            </span>
+          </li>
+          <li [class.eod-notes--warn]="mismatchRows.length > 0">
+            <span class="eod-notes__label">Slips that did not match</span>
+            <span class="eod-notes__value">
+              @if (mismatchRows.length) {
+                {{ mismatchRows.length }} slip(s) do not agree with the system
+              } @else {
+                None
+              }
+            </span>
+          </li>
+          <li>
+            <span class="eod-notes__label">Slips not checked yet</span>
+            <span class="eod-notes__value">
+              {{
+                unverifiedRows.length
+                  ? unverifiedRows.length + ' entry(ies) still to be checked against paper'
+                  : 'All checked'
+              }}
+            </span>
+          </li>
+          @if (priorDayRows.length) {
+            <li>
+              <span class="eod-notes__label">Posted overnight</span>
+              <span class="eod-notes__value">
+                {{ priorDayRows.length }} entry(ies) for
+                {{ priorDayDate ? (priorDayDate | date: 'dd MMM') : 'the previous day' }} &mdash; listed in their own
+                section, not in today&rsquo;s figures
+              </span>
+            </li>
+          }
+          <li [class.eod-notes--ok]="allClear">
+            <span class="eod-notes__label">Status</span>
+            <span class="eod-notes__value">
+              {{
+                allClear
+                  ? 'Everything is clear — the day is ready to close.'
+                  : 'Sort out the items above before closing the day.'
+              }}
+            </span>
+          </li>
+        </ul>
+      </section>
+
+      <!-- ── Signatures ── -->
+      <section class="eod-sign">
+        <div class="eod-sign__block">
+          <div class="eod-sign__line"></div>
+          <div class="eod-sign__role">{{ supervising ? 'Prepared by' : 'Cashier' }}</div>
+          <div class="eod-sign__name">{{ preparedBy || '' }}</div>
+        </div>
+        <div class="eod-sign__block">
+          <div class="eod-sign__line"></div>
+          <div class="eod-sign__role">Manager / Principal Officer</div>
+          <div class="eod-sign__name">&nbsp;</div>
+        </div>
+      </section>
+
+      <p class="eod-foot">
+        Generated from the day book and the closing cash report for {{ date | date: 'dd MMM yyyy' }}. Figures move with
+        the underlying vouchers &mdash; reprint after any reversal.
+      </p>
+    </div>
+  }
+</div>

src/app/cashier/end-of-day-report/end-of-day-report.component.scss

@@ -0,0 +1,448 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/* The sheet itself, which is what gets signed. Bordered on screen so it reads as one document
+   rather than three panels, and the same borders carry into print. */
+
+/* Centred in the page, because it is a document rather than a screen: a signed sheet pinned to the
+   left edge of a wide monitor reads as a panel that failed to fill its space. */
+.eod-sheet {
+  background: #fff;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 28px 32px 24px;
+  max-width: 900px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* The toolbar and the loading line above it share the sheet's own edges, not the viewport's. */
+.eod .pg-head,
+.eod > .pg-empty {
+  max-width: 900px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.eod-sheet__head {
+  border-bottom: 2px solid #0f172a;
+  padding-bottom: 14px;
+  margin-bottom: 22px;
+}
+
+.eod-sheet__title {
+  margin: 0 0 14px;
+  font-size: 19px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: #0f172a;
+  text-align: center;
+}
+
+.eod-sheet__meta {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px 18px;
+}
+
+.eod-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.eod-meta__label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.eod-meta__value {
+  font-size: 13px;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+/* ── Sections ── */
+.eod-section {
+  margin-bottom: 26px;
+
+  /* A section must not be split across two printed pages: a reconciliation whose expected line is
+     on page one and whose variance is on page two is not a document anybody can sign. */
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+
+.eod-section__title {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 0 0 12px;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #0f172a;
+  border-bottom: 1px solid #e2e8f0;
+  padding-bottom: 7px;
+}
+
+.eod-section__no {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  background: #0f172a;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  flex: 0 0 auto;
+}
+
+.eod-note {
+  margin: 8px 0 0;
+  font-size: 11.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+/* Names the table below it, so two tables in one section do not read as one long list. */
+.eod-caption {
+  margin: 0 0 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #475569;
+}
+
+.eod-caption--spaced {
+  margin-top: 18px;
+}
+
+/* The line-by-line list is wider than the rest of the sheet, so it scrolls in its own box rather
+   than making the whole page scroll sideways. */
+.eod-section--wide {
+  .pg-table {
+    min-width: 100%;
+  }
+}
+
+.eod-txns {
+  font-size: 12px;
+
+  td,
+  th {
+    white-space: nowrap;
+  }
+}
+
+/* Voucher numbers and account numbers are read digit by digit, so they get a fixed pitch. */
+.eod-mono {
+  font-family: 'Roboto Mono', ui-monospace, 'Courier New', monospace;
+  font-size: 11.5px;
+}
+
+/* Last night's batch. Set apart on purpose: these figures belong to a day that has already been
+   signed off, so the block has to read as an appendix rather than as part of the day being counted.
+   Indigo, because that is already the day book's colour for system postings. */
+.eod-section--prior {
+  background: #f5f3ff;
+  border: 1px solid #ddd6fe;
+  border-radius: 8px;
+  padding: 16px 18px 14px;
+  margin-top: 30px;
+
+  .eod-section__title {
+    color: #5b21b6;
+    border-bottom-color: #ddd6fe;
+  }
+
+  .pg-table th {
+    background: #ede9fe;
+    color: #5b21b6;
+  }
+}
+
+/* Sits in the title row in place of the numbered chip: this block is outside the numbered sequence,
+   because it is not a step in counting today. */
+.eod-section__icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+  color: #7c3aed;
+  flex: 0 0 auto;
+}
+
+.eod-note--lead {
+  margin: 0 0 12px;
+  color: #5b21b6;
+}
+
+/* The two dates, stated as a pair with an arrow between them. Spelling out "belongs to X, showing
+   on Y" is the only way a reader can be sure which of the two a figure is counted under — a single
+   date in a heading leaves exactly the ambiguity this block exists to remove. */
+.eod-datepair {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin: 0 0 14px;
+  padding: 12px 14px;
+  background: #fff;
+  border: 1px solid #ddd6fe;
+  border-radius: 6px;
+  flex-wrap: wrap;
+}
+
+.eod-datepair__item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1 1 200px;
+}
+
+.eod-datepair__label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #7c3aed;
+}
+
+.eod-datepair__value {
+  font-size: 15px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.eod-datepair__hint {
+  font-size: 10.5px;
+  color: #64748b;
+  line-height: 1.4;
+}
+
+.eod-datepair__arrow {
+  font-size: 20px;
+  color: #a78bfa;
+  flex: 0 0 auto;
+}
+
+/* Dates in the row are read against the ledger, so they do not shrink into the grey the way a
+   secondary column normally would. */
+.eod-datecell {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: #5b21b6;
+  white-space: nowrap;
+}
+
+.eod-hint {
+  display: block;
+  font-size: 10.5px;
+  font-weight: 400;
+  color: #94a3b8;
+}
+
+.eod-blank {
+  color: #94a3b8;
+  font-style: italic;
+}
+
+/* ── Reconciliation table ── */
+
+/* Two columns only, so the label takes the room and the figure sits in a fixed money column. */
+.eod-recon {
+  td:first-child {
+    width: auto;
+  }
+
+  td:last-child {
+    width: 190px;
+  }
+}
+
+.eod-recon__expected td {
+  border-top: 1px solid #94a3b8;
+  background: #f8fafc;
+}
+
+.eod-recon__variance td {
+  border-top: 2px solid #0f172a;
+}
+
+.eod-recon__variance.eod-ok td {
+  background: #f0fdf4;
+  color: #15803d;
+}
+
+.eod-recon__variance.eod-bad td {
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+/* ── Verdict line ── */
+.eod-verdict {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin: 12px 0 0;
+  padding: 9px 12px;
+  border-radius: 6px;
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 1.45;
+
+  mat-icon {
+    font-size: 17px;
+    width: 17px;
+    height: 17px;
+    flex: 0 0 auto;
+  }
+}
+
+.eod-verdict--ok {
+  background: #f0fdf4;
+  border: 1px solid #86efac;
+  color: #15803d;
+}
+
+.eod-verdict--bad {
+  background: #fef2f2;
+  border: 1px solid #fca5a5;
+  color: #b91c1c;
+}
+
+/* ── Operational notes ── */
+.eod-notes {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    display: flex;
+    gap: 14px;
+    padding: 8px 10px;
+    border-bottom: 1px solid #f1f5f9;
+    font-size: 12.5px;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+}
+
+.eod-notes__label {
+  flex: 0 0 190px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.eod-notes__value {
+  color: #0f172a;
+}
+
+.eod-notes--warn {
+  background: #fffbeb;
+
+  .eod-notes__value {
+    color: #b45309;
+    font-weight: 600;
+  }
+}
+
+.eod-notes--ok {
+  background: #f0fdf4;
+
+  .eod-notes__value {
+    color: #15803d;
+    font-weight: 600;
+  }
+}
+
+/* ── Signatures ── */
+.eod-sign {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 40px;
+  margin-top: 46px;
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+
+.eod-sign__block {
+  text-align: center;
+}
+
+.eod-sign__line {
+  border-bottom: 1px solid #0f172a;
+  height: 34px;
+  margin-bottom: 7px;
+}
+
+.eod-sign__role {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #475569;
+}
+
+.eod-sign__name {
+  font-size: 12px;
+  color: #64748b;
+  margin-top: 2px;
+}
+
+.eod-foot {
+  margin: 26px 0 0;
+  padding-top: 12px;
+  border-top: 1px dashed #cbd5e1;
+  font-size: 10.5px;
+  color: #94a3b8;
+  text-align: center;
+  line-height: 1.5;
+}
+
+/* ── Print ──
+   The sheet is the document; the shell, the toolbar and the app chrome are not. Colours are forced
+   so the variance verdict survives a printer that would otherwise drop backgrounds. */
+@media print {
+  .no-print,
+  .pg-head {
+    display: none !important;
+  }
+
+  .eod-sheet {
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+    max-width: none;
+  }
+
+  .eod-sheet,
+  .eod-recon__variance td,
+  .eod-verdict,
+  .eod-notes--warn,
+  .eod-notes--ok {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .eod-sheet__title {
+    font-size: 16px;
+  }
+
+  .pg-table {
+    font-size: 11px;
+  }
+}

src/app/cashier/end-of-day-report/end-of-day-report.component.ts

@@ -0,0 +1,536 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { CashierService } from '../cashier.service';
+import { SettingsService } from 'app/settings/settings.service';
+import { AuthenticationService } from 'app/core/authentication/authentication.service';
+
+/** One part of the day's work — a section of the day book, or a kind of entry within it. */
+interface SummaryLine {
+  label: string;
+  credit: number;
+  debit: number;
+  count: number;
+}
+
+/**
+ * The single sheet a cashier signs the day off with.
+ *
+ * Every other cashier screen answers one question — what is in the drawer, which vouchers are
+ * unverified, what did each person handle. At close of day somebody has to sign one piece of paper
+ * saying the money was counted and it agreed, and until now that meant reading four screens and
+ * copying figures onto a form by hand.
+ *
+ * Nothing here is computed on the server that was not already being computed: the closing report
+ * supplies the drawer legs, the day book supplies the transactions, and the cashier position
+ * supplies what the system believes is held. This screen assembles them in the order a person
+ * verifying the day reads them in, and prints.
+ */
+@Component({
+  selector: 'mifosx-end-of-day-report',
+  templateUrl: './end-of-day-report.component.html',
+  styleUrls: [
+    '../cashier-shared.scss',
+    './end-of-day-report.component.scss'
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIconModule
+  ]
+})
+export class EndOfDayReportComponent implements OnInit {
+  private service = inject(CashierService);
+  private settings = inject(SettingsService);
+  private auth = inject(AuthenticationService);
+
+  date = '';
+  loading = false;
+  loaded = false;
+
+  /** Who is signing, and for which branch — read from the session, never typed in. */
+  preparedBy = '';
+  branchName = '';
+
+  // ── Section 1: transaction summary ──
+  rows: any[] = [];
+  creditTotal = 0;
+  debitTotal = 0;
+
+  // ── Section 2: cash drawer ──
+  /** Drawn from the vault in the morning: a cashier's opening float. */
+  openingFloat = 0;
+  cashDeposits = 0;
+  interCashierIn = 0;
+  cashWithdrawals = 0;
+  settledOut = 0;
+  interCashierOut = 0;
+  /** Whether the server sent this day's own cash legs, which only a cashier-scoped call gets. */
+  hasDayLegs = false;
+  /** Whether the drawer figures are one cashier's or the whole branch's counter work. */
+  scopedToCashier = false;
+
+  /** What the drawers hold between them, per the system. */
+  drawersTotal: number | null = null;
+
+  /**
+   * Each cashier and what their drawer holds.
+   *
+   * A clerk holds no drawer of their own — they supervise the counter — so a single "actual cash"
+   * figure says nothing to them. The position endpoint already answers for whoever is asking: one
+   * drawer for a cashier, every drawer for a clerk or officer, so the same call serves both and the
+   * screen reads differently depending on who opened it.
+   */
+  cashierPositions: { cashierId: number | null; cashierName: string; totalAmount: number }[] = [];
+
+  /**
+   * The branch's own expected cash, from the day register.
+   *
+   * A branch-wide reading cannot be assembled from the per-cashier day legs: those are only
+   * returned when the call is scoped to one cashier. The branch day register already keeps this
+   * arithmetic for the close-day gate — opening cash, plus approved deposits, less what was
+   * withdrawn — so the sheet reads it rather than inventing a second version of the same sum.
+   *
+   * Null when no day has been opened for this date, which is a real state: there is nothing to
+   * reconcile against on a day the branch never opened.
+   */
+  branchOpeningCash: number | null = null;
+  branchDeposits: number | null = null;
+  branchWithdrawals: number | null = null;
+  branchExpectedCash: number | null = null;
+
+  /**
+   * What the vaults hold, which a branch-wide count must include.
+   *
+   * The branch register's expected cash covers the whole branch — vault and every drawer together —
+   * because cash moved from the vault to a cashier has not left the branch. Counting only the
+   * drawers against it would report the entire vault as a shortage.
+   */
+  vaultTotal: number | null = null;
+
+  ngOnInit(): void {
+    this.date = this.businessDate();
+    this.preparedBy = this.currentUserName();
+    this.branchName = this.currentOfficeName();
+    this.load();
+  }
+
+  /**
+   * The date the books are open on, not the wall clock.
+   *
+   * An EOD sheet dated by the browser would be filed against the wrong day whenever the branch is
+   * still working yesterday's business date, which is exactly when a day is being closed.
+   */
+  private businessDate(): string {
+    const d = this.settings.businessDate;
+    const safe = d instanceof Date && !isNaN(d.getTime()) ? d : new Date();
+    return `${safe.getFullYear()}-${String(safe.getMonth() + 1).padStart(2, '0')}-${String(safe.getDate()).padStart(2, '0')}`;
+  }
+
+  /** The member of staff behind the login, falling back to the username when no staff is linked. */
+  private currentUserName(): string {
+    const c = this.auth.getCredentials();
+    return c ? c.staffDisplayName || c.username || '' : '';
+  }
+
+  private currentOfficeName(): string {
+    return this.auth.getCredentials()?.officeName || '';
+  }
+
+  load(): void {
+    this.loading = true;
+    this.loaded = false;
+
+    this.service.dayBook(this.date).subscribe({
+      next: (res: any) => {
+        this.rows = res?.rows || [];
+        this.creditTotal = Number(res?.creditTotal || 0);
+        this.debitTotal = Number(res?.debitTotal || 0);
+        this.loading = false;
+        this.loaded = true;
+      },
+      error: () => {
+        this.rows = [];
+        this.creditTotal = 0;
+        this.debitTotal = 0;
+        this.loading = false;
+        this.loaded = true;
+      }
+    });
+
+    this.service.closingCashReport(this.date).subscribe({
+      next: (res: any) => {
+        // The four day legs are only sent for a cashier-scoped call. Read as absent rather than
+        // zero: a leg that is missing and a leg that is genuinely nil mean different things, and
+        // treating the first as the second is what let the sheet claim an expected balance of zero
+        // for a whole branch.
+        this.hasDayLegs = res?.todayVaultIn != null;
+        this.openingFloat = Number(res?.todayVaultIn || 0);
+        this.cashDeposits = Number(res?.depositTotalWithDd ?? res?.depositTotal ?? 0);
+        this.cashWithdrawals = Number(res?.withdrawalTotal || 0);
+        this.settledOut = Number(res?.todaySettledOut || 0);
+        this.interCashierIn = Number(res?.todayInterCashierIn || 0);
+        this.interCashierOut = Number(res?.todayInterCashierOut || 0);
+        this.scopedToCashier = res?.scopedToCashier === true;
+      },
+      error: () => {
+        this.openingFloat = 0;
+        this.cashDeposits = 0;
+        this.cashWithdrawals = 0;
+        this.settledOut = 0;
+        this.interCashierIn = 0;
+        this.interCashierOut = 0;
+        this.scopedToCashier = false;
+        this.hasDayLegs = false;
+      }
+    });
+
+    // The branch's expected cash for the date, which is the only basis a branch-wide reading can
+    // reconcile on. Fails quietly for a plain cashier, who is not allowed to operate the day.
+    this.service.branchDayClosePreview(this.date).subscribe({
+      next: (res: any) => {
+        this.branchOpeningCash = res?.openingCash == null ? null : Number(res.openingCash);
+        this.branchDeposits = res?.deposits == null ? null : Number(res.deposits);
+        this.branchWithdrawals = res?.withdrawals == null ? null : Number(res.withdrawals);
+        this.branchExpectedCash = res?.expectedCash == null ? null : Number(res.expectedCash);
+      },
+      error: () => {
+        this.branchOpeningCash = null;
+        this.branchDeposits = null;
+        this.branchWithdrawals = null;
+        this.branchExpectedCash = null;
+      }
+    });
+
+    // One object for a cashier, an array of every cashier for a clerk or officer — the server
+    // decides from the caller's own roles, so this screen does not have to ask who is reading it.
+    this.service.cashierPositionReport(undefined, this.date).subscribe({
+      next: (res: any) => {
+        const list = Array.isArray(res) ? res : res ? [res] : [];
+        this.cashierPositions = list
+          .filter((p: any) => p && p.cashierId != null)
+          .map((p: any) => ({
+            cashierId: p.cashierId == null ? null : Number(p.cashierId),
+            cashierName: p.cashierName || `Cashier ${p.cashierId}`,
+            totalAmount: Number(p.totalAmount || 0)
+          }))
+          .sort((a: any, b: any) => b.totalAmount - a.totalAmount);
+        this.drawersTotal = this.cashierPositions.length
+          ? this.cashierPositions.reduce((s, p) => s + p.totalAmount, 0)
+          : null;
+      },
+      error: () => {
+        // Nothing to count against, so the variance line stays blank rather than reading zero — a
+        // variance of zero is a claim that somebody counted and it agreed.
+        this.cashierPositions = [];
+        this.drawersTotal = null;
+      }
+    });
+
+    // Vault stock, so a branch-wide count is of the whole branch and not just the counters.
+    this.service.vaultPosition(undefined, this.date).subscribe({
+      next: (res: any) => {
+        const list = Array.isArray(res) ? res : res ? [res] : [];
+        this.vaultTotal = list.reduce((s: number, v: any) => s + Number(v?.totalAmount || 0), 0);
+      },
+      error: () => {
+        this.vaultTotal = null;
+      }
+    });
+  }
+
+  // ── Section 1 ──
+
+  /**
+   * Only the entries that actually moved money.
+   *
+   * A pending request is listed on the day book so nobody loses sight of it, but it has taken no
+   * cash — counting it into an EOD summary would make the sheet disagree with the drawer.
+   */
+  /**
+   * Last night's batch: posted against yesterday, surfacing on this report.
+   *
+   * A voucher's timestamp is the minute the job ran, while the transaction and the journal entry
+   * behind it carry the business date. So the interest run that fires just after midnight stamps
+   * itself with today although the ledger says yesterday — and yesterday was counted, reported and
+   * signed off hours before. Re-opening that day would invalidate a signed sheet, so the work is
+   * listed here instead, under its own heading, saying which day it belongs to. It is excluded from
+   * every total on this page: it is not today's money.
+   */
+  get priorDayRows(): any[] {
+    return this.rows.filter((r) => r.section === 'SYSTEM_PRIOR');
+  }
+
+  get priorDayCredit(): number {
+    return this.priorDayRows.reduce((s, r) => s + (r.side === 'CR' ? Number(r.amount || 0) : 0), 0);
+  }
+
+  get priorDayDebit(): number {
+    return this.priorDayRows.reduce((s, r) => s + (r.side === 'DR' ? Number(r.amount || 0) : 0), 0);
+  }
+
+  /** The business date last night's batch worked on, for the heading. */
+  get priorDayDate(): string | null {
+    const withDate = this.priorDayRows.find((r) => r.effectiveDate);
+    return withDate ? withDate.effectiveDate : null;
+  }
+
+  get approvedRows(): any[] {
+    return this.rows.filter(
+      (r) =>
+        r.section !== 'SYSTEM_PRIOR' &&
+        (r.status === 'APPROVED' || r.status === 'COMPLETED' || r.status === 'WITHDRAWN')
+    );
+  }
+
+  /**
+   * The day split the way this system actually records it: where the entry came from.
+   *
+   * Not split by payment mode, which is the obvious shape for a retail till but the wrong one here.
+   * A payment type is only recorded against a denomination breakdown, and a breakdown is only
+   * written for physical cash — so a UPI or transfer deposit carries no payment type at all, and a
+   * mode-wise table would file every non-cash entry under "not specified" while claiming to be a
+   * breakdown by mode. The day book's own sections are recorded on every row, so this agrees with
+   * the day book for the same date instead of quietly disagreeing with it.
+   */
+  get sectionLines(): SummaryLine[] {
+    const order = [
+      'CASHIER',
+      'CLERK',
+      'SYSTEM'
+    ];
+    const labels: Record<string, string> = {
+      CASHIER: 'Cash counter',
+      CLERK: 'Clerk desk',
+      SYSTEM: 'System — interest, charges, journals'
+    };
+    const map = new Map<string, SummaryLine>();
+    for (const r of this.approvedRows) {
+      const key = order.includes(r.section) ? r.section : 'SYSTEM';
+      let line = map.get(key);
+      if (!line) {
+        line = { label: labels[key] || key, credit: 0, debit: 0, count: 0 };
+        map.set(key, line);
+      }
+      this.addTo(line, r);
+    }
+    return order.filter((k) => map.has(k)).map((k) => map.get(k)!);
+  }
+
+  /**
+   * What kind of entry it was — deposit, withdrawal, interest posting, charge.
+   *
+   * The sections above say where the day's work came from; this says what the work was, which is
+   * the question somebody checking a figure against a register actually asks.
+   */
+  get kindLines(): SummaryLine[] {
+    const map = new Map<string, SummaryLine>();
+    for (const r of this.approvedRows) {
+      const key = (r.kind || 'OTHER').toString();
+      let line = map.get(key);
+      if (!line) {
+        line = { label: this.titleCase(key), credit: 0, debit: 0, count: 0 };
+        map.set(key, line);
+      }
+      this.addTo(line, r);
+    }
+    return Array.from(map.values()).sort((a, b) => b.credit + b.debit - (a.credit + a.debit));
+  }
+
+  /** Adds one day-book row onto a summary line, on the side the row belongs to. */
+  private addTo(line: SummaryLine, row: any): void {
+    const amt = Number(row.amount || 0);
+    if (row.side === 'CR') {
+      line.credit += amt;
+    } else {
+      line.debit += amt;
+    }
+    line.count += 1;
+  }
+
+  /** DD CASH, INTEREST_POSTING and the like, as a person would read them. */
+  kindLabel(raw: string | null | undefined): string {
+    if (!raw) {
+      return '—';
+    }
+    return raw
+      .toString()
+      .replace(/_/g, ' ')
+      .toLowerCase()
+      .replace(/\b\w/g, (c) => c.toUpperCase());
+  }
+
+  private titleCase(raw: string): string {
+    return this.kindLabel(raw);
+  }
+
+  get txnCount(): number {
+    return this.approvedRows.length;
+  }
+
+  /** More than one drawer in view means a supervisor is reading, not a cashier. */
+  get supervising(): boolean {
+    return this.cashierPositions.length > 1 || (!this.scopedToCashier && this.cashierPositions.length > 0);
+  }
+
+  get cashierPositionTotal(): number {
+    return this.cashierPositions.reduce((s, p) => s + p.totalAmount, 0);
+  }
+
+  /**
+   * Each person who handled the day's work, with their own credit, debit and net.
+   *
+   * The clerk signing the day off is verifying other people's work, so the sheet has to say whose.
+   * Read off the day book's own handledBy, which every register stamps.
+   */
+  get byUser(): SummaryLine[] {
+    const map = new Map<string, SummaryLine>();
+    for (const r of this.approvedRows) {
+      const key = (r.handledBy || 'Unattributed').toString();
+      let line = map.get(key);
+      if (!line) {
+        line = { label: key, credit: 0, debit: 0, count: 0 };
+        map.set(key, line);
+      }
+      this.addTo(line, r);
+    }
+    return Array.from(map.values()).sort((a, b) => b.credit + b.debit - (a.credit + a.debit));
+  }
+
+  get summaryCreditTotal(): number {
+    return this.sectionLines.reduce((s, l) => s + l.credit, 0);
+  }
+
+  get summaryDebitTotal(): number {
+    return this.sectionLines.reduce((s, l) => s + l.debit, 0);
+  }
+
+  // ── Section 2 ──
+
+  /** Everything that came into the drawer today, over the counter and from another cashier. */
+  get totalReceived(): number {
+    return this.cashDeposits + this.interCashierIn;
+  }
+
+  /** Everything that left it: paid to members, handed to the vault, passed to another cashier. */
+  get totalPaidOut(): number {
+    return this.cashWithdrawals + this.settledOut + this.interCashierOut;
+  }
+
+  /** What should be on the desk: the float, plus what came in, less what went out. */
+  get expectedClosing(): number {
+    return this.openingFloat + this.totalReceived - this.totalPaidOut;
+  }
+
+  /**
+   * Whether an expected-against-held comparison can honestly be made.
+   *
+   * Only for a single cashier, and only when the server sent that cashier's day legs. Both halves
+   * then describe the same thing: today's legs, against a drawer that carries nothing forward
+   * because a cashier draws in the morning and hands back at close.
+   *
+   * Never branch-wide. The branch register's expected cash is *today's* arithmetic — yesterday's
+   * closing, plus today's deposits, less today's withdrawals — while the vault and drawer positions
+   * are running totals accumulated since the system went live. Subtracting one from the other
+   * compares an afternoon against a lifetime: it reported ₹2,11,932 extra on a day when ₹100 came
+   * in and ₹100 went out. There is no branch-wide running total to compare against, so the sheet
+   * shows the branch its movement and each drawer's position, and states no difference at all
+   * rather than a confident wrong one.
+   */
+  get canReconcile(): boolean {
+    return this.scopedToCashier && this.hasDayLegs;
+  }
+
+  /** The cash the system believes this cashier is holding. */
+  get actualCash(): number | null {
+    return this.scopedToCashier ? this.drawersTotal : null;
+  }
+
+  /** What today's legs say should be in the drawer. */
+  get expectedCash(): number | null {
+    return this.canReconcile ? this.expectedClosing : null;
+  }
+
+  /** Held less expected, for one cashier's own day. Null wherever that comparison is not honest. */
+  get variance(): number | null {
+    const expected = this.expectedCash;
+    if (expected === null || this.actualCash === null) {
+      return null;
+    }
+    return this.actualCash - expected;
+  }
+
+  /** Vaults and drawers together — what the branch is holding, per the system. */
+  get branchHeldTotal(): number | null {
+    if (this.drawersTotal === null && this.vaultTotal === null) {
+      return null;
+    }
+    return Number(this.drawersTotal ?? 0) + Number(this.vaultTotal ?? 0);
+  }
+
+  /** Today's net cash movement across the branch: what came in less what went out. */
+  get branchNetMovement(): number {
+    return Number(this.branchDeposits ?? 0) - Number(this.branchWithdrawals ?? 0);
+  }
+
+  /** True only when a count exists and it agrees to the paisa. */
+  get varianceOk(): boolean {
+    return this.variance !== null && Math.abs(this.variance) < 0.005;
+  }
+
+  get varianceClass(): string {
+    if (this.variance === null) {
+      return '';
+    }
+    return this.varianceOk ? 'eod-ok' : 'eod-bad';
+  }
+
+  // ── Section 3 ──
+
+  /** Entries still waiting on somebody, which is what a day cannot be closed over. */
+  get pendingRows(): any[] {
+    return this.rows.filter((r) => r.status === 'PENDING' || r.status === 'SUBMITTED');
+  }
+
+  /** Cash entries whose paper slip nobody has checked against the screen. */
+  get unverifiedRows(): any[] {
+    return this.approvedRows.filter((r) => !r.verifyStatus);
+  }
+
+  /** A slip that was checked and did not agree with what was keyed in. */
+  get mismatchRows(): any[] {
+    return this.rows.filter((r) => r.verifyStatus === 'MISMATCH' || r.verifyStatus === 'DISPUTED');
+  }
+
+  /**
+   * Whether the day is ready to close.
+   *
+   * Nothing pending, no slip disagreeing, and — where a cash comparison was actually made — the
+   * cash agreeing. A branch-wide reading makes no comparison, so it is not held to one: requiring
+   * `varianceOk` there meant the sheet could never say a day was clear however clean it was.
+   */
+  get allClear(): boolean {
+    if (this.pendingRows.length > 0 || this.mismatchRows.length > 0) {
+      return false;
+    }
+    return this.variance === null || this.varianceOk;
+  }
+
+  reload(): void {
+    this.load();
+  }
+
+  print(): void {
+    window.print();
+  }
+}

src/app/cashier/my-work/my-work.component.html

@@ -0,0 +1,204 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="pg">
+  <header class="pg-head">
+    <div>
+      <div class="pg-eyebrow">MY WORK</div>
+      <h1 class="pg-title">My Vouchers</h1>
+      <p class="pg-sub">
+        Everything you entered and everything you approved — receipts, payments and journals in one list.
+      </p>
+    </div>
+    <div class="pg-toolbar">
+      <label class="pg-field">
+        <span>Period</span>
+        <select [(ngModel)]="period" (change)="load()">
+          <option value="DAY">Day</option>
+          <option value="MONTH">Month</option>
+        </select>
+      </label>
+      <label class="pg-field">
+        <span>{{ period === 'DAY' ? 'Date' : 'Month of' }}</span>
+        <input type="date" [(ngModel)]="anchor" (change)="load()" />
+      </label>
+      <button type="button" class="pg-btn pg-btn--primary" (click)="load()" [disabled]="loading">
+        <mat-icon>refresh</mat-icon> Run
+      </button>
+    </div>
+  </header>
+
+  @if (error) {
+    <div class="pg-alert pg-alert--error">{{ error }}</div>
+  }
+
+  @if (loading) {
+    <div class="pg-empty">Loading…</div>
+  }
+
+  @if (report && !loading) {
+    <div class="mw-who">
+      <strong>{{ report.displayName || report.username }}</strong>
+      <span class="mw-who__sep">·</span>
+      {{ report.from | date: 'dd MMM yyyy' }}
+      @if (report.from !== report.to) {
+        <span> to {{ report.to | date: 'dd MMM yyyy' }}</span>
+      }
+    </div>
+
+    <!-- The day at a glance, read off the same rows the table below shows: narrow "My part" to
+         Entered or Approved and these five follow, instead of staying pinned to the combined
+         day total regardless of the filter. -->
+    <div class="mw-tiles">
+      <div class="mw-tile">
+        <div class="mw-tile__label">Received</div>
+        <div class="mw-tile__value mw-tile__value--cr">₹{{ receivedTotal | number: '1.2-2' }}</div>
+      </div>
+      <div class="mw-tile">
+        <div class="mw-tile__label">Payments</div>
+        <div class="mw-tile__value mw-tile__value--dr">₹{{ paymentTotal | number: '1.2-2' }}</div>
+      </div>
+      <div class="mw-tile">
+        <div class="mw-tile__label">Journal</div>
+        <div class="mw-tile__value">₹{{ journalTotal | number: '1.2-2' }}</div>
+      </div>
+      <div class="mw-tile">
+        <div class="mw-tile__label">Entered</div>
+        <div class="mw-tile__value">{{ raisedCount }}</div>
+      </div>
+      <div class="mw-tile">
+        <div class="mw-tile__label">Approved</div>
+        <div class="mw-tile__value">{{ verifiedCount }}</div>
+      </div>
+    </div>
+
+    @if (report.count > 0) {
+      <div class="mw-filters">
+        <label class="pg-field">
+          <span>Side</span>
+          <select [(ngModel)]="sideFilter">
+            <option value="">All</option>
+            <option value="CR">Received</option>
+            <option value="DR">Payment</option>
+            <option value="JV">Journal</option>
+          </select>
+        </label>
+        <label class="pg-field">
+          <span>My part</span>
+          <select [(ngModel)]="roleFilter">
+            <option value="">All</option>
+            <option value="RAISED">Entered</option>
+            <option value="VERIFIED">Approved</option>
+            <option value="RAISED_AND_VERIFIED">Entered &amp; approved</option>
+          </select>
+        </label>
+        @if (isFiltered) {
+          <button type="button" class="pg-btn" (click)="clearFilters()"><mat-icon>clear</mat-icon> Clear</button>
+        }
+      </div>
+    }
+
+    @if (rows.length === 0) {
+      <div class="pg-empty">
+        @if (report.count === 0) {
+          Nothing recorded against you for this period.
+        } @else {
+          No vouchers match these filters — {{ report.count }} hidden.
+        }
+      </div>
+    } @else {
+      <div class="mw-count">
+        Showing {{ rows.length }}
+        @if (isFiltered) {
+          <span>of {{ report.count }}</span>
+        }
+        {{ rows.length === 1 ? 'voucher' : 'vouchers' }}
+        <span class="mw-count__total">Total ₹{{ filteredTotal | number: '1.2-2' }}</span>
+      </div>
+
+      <!-- One table per part played, not one long list. Entering a request and passing somebody
+           else's are different jobs answerable to different people, and each carries its own total
+           so a maker's tally and a checker's can both be read off the page. -->
+      @for (g of groups; track g.key) {
+        <div class="pg-card mw-group" [class]="'mw-group--' + g.key">
+          <div class="mw-group__head">
+            <strong>{{ g.label }}</strong>
+            <span class="mw-group__hint">{{ g.hint }}</span>
+            <span class="mw-group__count">
+              {{ g.rows.length }} {{ g.rows.length === 1 ? 'voucher' : 'vouchers' }}
+              <span class="mw-group__total">₹{{ g.total | number: '1.2-2' }}</span>
+            </span>
+          </div>
+          <div class="pg-table-wrap">
+            <table class="pg-table mw-table">
+              <thead>
+                <tr>
+                  <th>Voucher</th>
+                  <th>Side</th>
+                  <th>Type</th>
+                  <th>Debit</th>
+                  <th>Credit</th>
+                  <th class="num">Amount</th>
+                  <th>My part</th>
+                  <th>Status</th>
+                  <th>Time</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (r of g.rows; track r.voucherNo) {
+                  <!-- The left edge repeats the section's own colour, so a row still says which part it
+                   is when the heading has scrolled away. -->
+                  <tr [class]="'mw-row mw-row--' + r.myRole">
+                    <td class="mw-vno">{{ r.voucherNo }}</td>
+                    <td>
+                      <span class="mw-badge" [class]="'mw-badge--' + (r.side || 'JV')">{{ sideLabel(r.side) }}</span>
+                    </td>
+                    <td class="mw-type">{{ r.voucherType }}</td>
+                    <td>
+                      {{ r.debitParty || '—' }}
+                      @if (r.debitAccount) {
+                        <span class="mw-acct">{{ r.debitAccount }}</span>
+                      }
+                    </td>
+                    <td>
+                      {{ r.creditParty || '—' }}
+                      @if (r.creditAccount) {
+                        <span class="mw-acct">{{ r.creditAccount }}</span>
+                      }
+                      @if (r.extraLines > 0) {
+                        <span class="mw-more">+{{ r.extraLines }} more</span>
+                      }
+                    </td>
+                    <td class="num">₹{{ r.amount | number: '1.2-2' }}</td>
+                    <td>
+                      <span class="mw-part" [class]="'mw-part--' + r.myRole">
+                        <mat-icon class="mw-part__icon">{{ roleIcon(r.myRole) }}</mat-icon>
+                        {{ roleLabel(r.myRole) }}
+                      </span>
+                      <!-- Whose entry it was, when it was not this user's — that is the whole point of
+                       an approval row appearing here at all. -->
+                      @if (r.myRole === 'VERIFIED' && r.raisedBy) {
+                        <span class="mw-acct">by {{ r.raisedBy }}</span>
+                      }
+                    </td>
+                    <td>
+                      <span class="mw-status" [class]="'mw-status--' + statusClass(r.verificationStatus)">
+                        {{ statusLabel(r.verificationStatus) }}
+                      </span>
+                    </td>
+                    <td class="mw-time">{{ r.createdAt | date: 'HH:mm' }}</td>
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </div>
+      }
+    }
+  }
+</div>

src/app/cashier/my-work/my-work.component.scss

@@ -0,0 +1,294 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/* Who and when, above the day's figures. */
+.mw-who {
+  font-size: 13px;
+  color: #475569;
+  margin: 0 0 12px;
+
+  strong {
+    color: #0f172a;
+  }
+
+  &__sep {
+    margin: 0 6px;
+    color: #cbd5e1;
+  }
+}
+
+/* The day at a glance: the two sides a branch balances, then what the user's part was. */
+.mw-tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.mw-tile {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  padding: 10px 12px;
+
+  &__label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #64748b;
+    margin-bottom: 4px;
+  }
+
+  &__value {
+    font-size: 18px;
+    font-weight: 600;
+    color: #0f172a;
+
+    /* Received green, paid-out red — the convention a passbook already uses, so the two totals
+       are told apart without reading the labels. */
+    &--cr {
+      color: #15803d;
+    }
+
+    &--dr {
+      color: #b91c1c;
+    }
+  }
+}
+
+.mw-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.mw-count {
+  font-size: 12px;
+  color: #64748b;
+  margin-bottom: 8px;
+
+  &__total {
+    float: right;
+    font-weight: 600;
+    color: #0f172a;
+  }
+}
+
+.mw-table {
+  font-size: 13px;
+}
+
+/* Money cells use the shared `.num` from cashier-shared.scss, which right-aligns and
+   tabular-figures the heading as well as the cell. A local class only reached the cells, leaving
+   every heading left-aligned over right-aligned figures. */
+
+.mw-vno {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.mw-type {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: #64748b;
+  white-space: nowrap;
+}
+
+.mw-time {
+  white-space: nowrap;
+  color: #64748b;
+}
+
+/* The account number or the maker's name, under the party it belongs to. */
+.mw-acct {
+  display: block;
+  font-size: 11px;
+  color: #94a3b8;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.mw-more {
+  display: inline-block;
+  margin-left: 6px;
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 8px;
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.mw-badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 7px;
+  border-radius: 10px;
+  white-space: nowrap;
+
+  &--CR {
+    background: #dcfce7;
+    color: #15803d;
+  }
+
+  &--DR {
+    background: #fee2e2;
+    color: #b91c1c;
+  }
+
+  &--JV {
+    background: #e0e7ff;
+    color: #4338ca;
+  }
+}
+
+/* Whose work the row is, marked on the row itself.
+   A coloured left edge and a faint tint, rather than a different text colour: the eye finds the
+   edge while scanning a column of figures, which is how a day's list is actually read. Kept faint
+   so the amounts stay the thing being read. */
+.mw-row {
+  border-left: 3px solid transparent;
+
+  &--RAISED {
+    border-left-color: #86efac;
+  }
+
+  /* Somebody else's entry that this person passed. The row a reviewer came looking for, so it
+     carries the darker of the two greens. */
+  &--VERIFIED {
+    border-left-color: #15803d;
+    background: #f0fdf4;
+  }
+
+  /* Entered and approved by the same person. Legitimate in a small branch, but the one combination
+     an auditor stops on, so it is the only row given a warm tint. */
+  &--RAISED_AND_VERIFIED {
+    border-left-color: #d97706;
+    background: #fffbf3;
+  }
+}
+
+/* One section per part played. The heading carries the section's own count and total, so a maker's
+   tally and a checker's are each readable without adding rows up. */
+.mw-group {
+  margin-bottom: 16px;
+
+  /* Two shades of one colour rather than two colours: entering and approving are stages of the
+     same piece of work, and the darker edge reads as the later one. */
+  border-left: 3px solid #86efac;
+
+  /* Same shades the row edges use, so a section and its rows read as one thing. */
+  &--VERIFIED {
+    border-left-color: #15803d;
+  }
+
+  &--RAISED_AND_VERIFIED {
+    border-left-color: #d97706;
+  }
+
+  &__head {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    padding: 10px 14px;
+    border-bottom: 1px solid #e2e8f0;
+    background: #f8fafc;
+
+    strong {
+      font-size: 13px;
+      color: #0f172a;
+    }
+  }
+
+  &__hint {
+    font-size: 11px;
+    color: #64748b;
+  }
+
+  &__count {
+    margin-left: auto;
+    font-size: 11px;
+    color: #64748b;
+    white-space: nowrap;
+  }
+
+  &__total {
+    margin-left: 8px;
+    font-weight: 700;
+    color: #0f172a;
+  }
+}
+
+/* Where the voucher stands. Three states, because there are three things a reader does: nothing
+   (done), chase it (pending), or look into it (bad). */
+.mw-status {
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+
+  /* Approved, posted — settled but nothing handed over. Lighter than 'paid' but still dark enough
+     to read as body text; a pale green on white fails at this size. */
+  &--done {
+    color: #16a34a;
+  }
+
+  /* Cash actually gone. Darker and filled, the same way the day book marks it. */
+  &--paid {
+    background: #15803d;
+    color: #fff;
+    padding: 2px 8px;
+    border-radius: 999px;
+  }
+
+  &--pending {
+    color: #b45309;
+  }
+
+  &--bad {
+    color: #b91c1c;
+  }
+}
+
+/* The part played, as a small pill with its own glyph. */
+.mw-part {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px 2px 6px;
+  border-radius: 10px;
+  white-space: nowrap;
+
+  &__icon {
+    font-size: 13px;
+    width: 13px;
+    height: 13px;
+    line-height: 13px;
+  }
+
+  &--RAISED {
+    background: #dcfce7;
+    color: #166534;
+  }
+
+  &--VERIFIED {
+    background: #15803d;
+    color: #fff;
+  }
+
+  &--RAISED_AND_VERIFIED {
+    background: #fef3c7;
+    color: #b45309;
+  }
+}

src/app/cashier/my-work/my-work.component.ts

@@ -0,0 +1,330 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { catchError, of } from 'rxjs';
+import { CashierService } from '../cashier.service';
+
+/** What the signed-in user's part in a voucher was. */
+export type MyRole = 'RAISED' | 'VERIFIED' | 'RAISED_AND_VERIFIED';
+
+/** Which register the voucher was numbered in: receipt, payment, or journal. */
+export type VoucherSide = 'CR' | 'DR' | 'JV';
+
+interface MyWorkRow {
+  voucherNo: string;
+  side: VoucherSide | null;
+  voucherType: string | null;
+  amount: number | null;
+  createdAt: string | null;
+  raisedBy: string | null;
+  branchName: string | null;
+  verificationStatus: string | null;
+  verifiedByName: string | null;
+  verifiedAt: string | null;
+  debitParty: string | null;
+  debitAccount: string | null;
+  creditParty: string | null;
+  creditAccount: string | null;
+  /** Sides beyond the one debit and one credit shown — a deposit that also took a charge. */
+  extraLines: number;
+  myRole: MyRole;
+}
+
+interface MyWorkReport {
+  from: string;
+  to: string;
+  username: string;
+  displayName: string;
+  vouchers: MyWorkRow[];
+  count: number;
+  raisedCount: number;
+  verifiedCount: number;
+  receivedTotal: number;
+  paymentTotal: number;
+  journalTotal: number;
+}
+
+/**
+ * One person's day at the branch: what they entered and what they approved, in one list.
+ *
+ * The Received and Payment registers answer "what moved today" across everyone. This answers the
+ * question each member of staff asks at a close — "what did I do today" — which those two cannot,
+ * because a checker's approval raises no voucher of its own and leaves its only trace on the
+ * verification row.
+ */
+@Component({
+  selector: 'mifosx-my-work',
+  templateUrl: './my-work.component.html',
+  styleUrls: [
+    '../cashier-shared.scss',
+    './my-work.component.scss'
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIconModule
+  ]
+})
+export class MyWorkComponent implements OnInit {
+  private service = inject(CashierService);
+
+  /** Day is the working default; a month is what a close or an audit asks for. */
+  period: 'DAY' | 'MONTH' = 'DAY';
+  anchor = this.todayIso();
+
+  /**
+   * Narrow to one side, or to the part the user played. Both applied in the browser, and only to
+   * the table below — the five summary tiles are pinned to Entered work regardless (see
+   * enteredRows), so this can default to showing everything without muddying them.
+   */
+  sideFilter: '' | VoucherSide = '';
+  roleFilter: '' | MyRole = '';
+
+  report: MyWorkReport | null = null;
+  loading = false;
+  error: string | null = null;
+
+  ngOnInit(): void {
+    this.load();
+  }
+
+  load(): void {
+    this.loading = true;
+    this.error = null;
+
+    const { from, to } = this.range();
+    this.service
+      .myVoucherWork(from, to)
+      .pipe(
+        catchError((err: any) => {
+          this.error =
+            err?.error?.errors?.[0]?.defaultUserMessage ??
+            err?.error?.developerMessage ??
+            'Your work for this period could not be loaded.';
+          return of(null);
+        })
+      )
+      .subscribe((res: MyWorkReport | null) => {
+        this.loading = false;
+        this.report = res;
+      });
+  }
+
+  /**
+   * The rows after the two on-screen filters.
+   *
+   * Filtered here rather than at the server: the day's own work is a small list, and narrowing it
+   * without a round trip is what makes the filters feel like part of reading the page.
+   */
+  get rows(): MyWorkRow[] {
+    const all = this.report?.vouchers ?? [];
+    return all.filter(
+      (r) => (!this.sideFilter || r.side === this.sideFilter) && (!this.roleFilter || r.myRole === this.roleFilter)
+    );
+  }
+
+  /**
+   * The rows split by the part the user played, each group with its own total.
+   *
+   * Entering a request and passing somebody else's are different jobs answerable to different
+   * people, and a branch reads them separately: "what did I put through" is a maker's own tally,
+   * "what did I let through" is a checker's. One list mixed them, so neither total could be read
+   * off the page — a manager who entered one voucher and approved twenty saw twenty-one rows and
+   * had to sort them by eye.
+   *
+   * An empty group is dropped rather than shown as a heading over nothing, so a clerk who never
+   * approves anything sees one section and not a permanently empty second one.
+   */
+  get groups(): { key: MyRole; label: string; hint: string; rows: MyWorkRow[]; total: number }[] {
+    const order: { key: MyRole; label: string; hint: string }[] = [
+      { key: 'RAISED', label: 'Entered by me', hint: 'Requests and postings you put through' },
+      { key: 'VERIFIED', label: 'Approved by me', hint: "Other people's work you passed" },
+      {
+        key: 'RAISED_AND_VERIFIED',
+        label: 'Entered & approved by me',
+        hint: 'Both roles on the same voucher — kept separate for the record'
+      }
+    ];
+    return order
+      .map((g) => {
+        const rows = this.rows.filter((r) => r.myRole === g.key);
+        return { ...g, rows, total: rows.reduce((sum, r) => sum + Number(r.amount ?? 0), 0) };
+      })
+      .filter((g) => g.rows.length > 0);
+  }
+
+  /** True when a filter is hiding part of what was loaded, so the count can say so. */
+  get isFiltered(): boolean {
+    return !!this.sideFilter || !!this.roleFilter;
+  }
+
+  clearFilters(): void {
+    this.sideFilter = '';
+    this.roleFilter = '';
+  }
+
+  /** The total of the rows on screen, which is not the day's total once a filter is on. */
+  get filteredTotal(): number {
+    return this.rows.reduce((sum, r) => sum + Number(r.amount ?? 0), 0);
+  }
+
+  /**
+   * What this person themselves put through today — never narrowed by the Side or My part
+   * filters, which exist only to browse the table below.
+   *
+   * The five summary tiles are pinned to this set on purpose. They answer one question, "what did
+   * I personally do today", and that answer cannot depend on which slice of the list a person
+   * happens to have the table filtered to at the moment — a Received figure that changed whenever
+   * someone picked "Approved" to go look at what they'd passed would not be their own total any
+   * more, it would be whatever the table was showing.
+   */
+  get enteredRows(): MyWorkRow[] {
+    const all = this.report?.vouchers ?? [];
+    return all.filter((r) => r.myRole === 'RAISED' || r.myRole === 'RAISED_AND_VERIFIED');
+  }
+
+  get receivedTotal(): number {
+    return this.enteredRows.filter((r) => r.side === 'CR').reduce((sum, r) => sum + Number(r.amount ?? 0), 0);
+  }
+
+  get paymentTotal(): number {
+    return this.enteredRows.filter((r) => r.side === 'DR').reduce((sum, r) => sum + Number(r.amount ?? 0), 0);
+  }
+
+  get journalTotal(): number {
+    return this.enteredRows
+      .filter((r) => r.side !== 'CR' && r.side !== 'DR')
+      .reduce((sum, r) => sum + Number(r.amount ?? 0), 0);
+  }
+
+  get raisedCount(): number {
+    return this.enteredRows.length;
+  }
+
+  get verifiedCount(): number {
+    const all = this.report?.vouchers ?? [];
+    return all.filter((r) => r.myRole === 'VERIFIED' || r.myRole === 'RAISED_AND_VERIFIED').length;
+  }
+
+  sideLabel(side: VoucherSide | null): string {
+    if (side === 'CR') {
+      return 'Received';
+    }
+    if (side === 'DR') {
+      return 'Payment';
+    }
+    return 'Journal';
+  }
+
+  roleLabel(role: MyRole): string {
+    if (role === 'RAISED') {
+      return 'Entered';
+    }
+    if (role === 'VERIFIED') {
+      return 'Approved';
+    }
+    return 'Entered & approved';
+  }
+
+  /**
+   * Where the voucher stands, in words a branch uses.
+   *
+   * A voucher with no status at all is not unknown — it is a posting that never went through a
+   * request: interest the nightly run credited, a charge taken from a balance. Those are done the
+   * moment they exist, so they read as Posted rather than as a blank a reader has to interpret.
+   */
+  statusLabel(status: string | null): string {
+    const s = (status ?? '').toUpperCase();
+    if (!s) {
+      return 'Posted';
+    }
+    if (s === 'WITHDRAWN') {
+      return 'Paid out';
+    }
+    if (s === 'APPROVED') {
+      return 'Approved';
+    }
+    if (s === 'PENDING') {
+      return 'Pending';
+    }
+    if (s === 'REJECTED') {
+      return 'Rejected';
+    }
+    if (s === 'CLOSED') {
+      return 'Closed';
+    }
+    // OK / MISMATCH come from a physical cash verification rather than a request.
+    return s.charAt(0) + s.slice(1).toLowerCase();
+  }
+
+  /**
+   * Groups the statuses by what a reader does about them.
+   *
+   * 'paid' is kept apart from 'done' because approved and paid out are different facts: one is a
+   * promise, the other is money gone. Sharing a colour hid exactly the thing somebody opens this
+   * page to check.
+   */
+  statusClass(status: string | null): string {
+    const s = (status ?? '').toUpperCase();
+    if (s === 'PENDING') {
+      return 'pending';
+    }
+    if (s === 'REJECTED' || s === 'MISMATCH') {
+      return 'bad';
+    }
+    if (s === 'WITHDRAWN' || s === 'COMPLETED' || s === 'CLOSED') {
+      return 'paid';
+    }
+    return 'done';
+  }
+
+  /**
+   * A glyph per role, so the part played reads before the words do.
+   *
+   * A pen for an entry the user made, a tick for one they approved, and a warning for both on the
+   * same voucher — which a small branch does legitimately, and an auditor should still see marked.
+   */
+  roleIcon(role: MyRole): string {
+    if (role === 'RAISED') {
+      return 'edit';
+    }
+    if (role === 'VERIFIED') {
+      return 'check_circle';
+    }
+    return 'warning';
+  }
+
+  /** The period the anchor date names: that day, or the whole calendar month around it. */
+  private range(): { from: string; to: string } {
+    if (this.period === 'DAY') {
+      return { from: this.anchor, to: this.anchor };
+    }
+    const [
+      y,
+      m
+    ] = this.anchor.split('-').map(Number);
+    const first = `${y}-${String(m).padStart(2, '0')}-01`;
+    // Day 0 of the next month is the last day of this one, which avoids a table of month lengths
+    // and gets February right in a leap year.
+    const last = new Date(y, m, 0);
+    const lastIso = `${last.getFullYear()}-${String(last.getMonth() + 1).padStart(2, '0')}-${String(
+      last.getDate()
+    ).padStart(2, '0')}`;
+    return { from: first, to: lastIso };
+  }
+
+  private todayIso(): string {
+    const d = new Date();
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+  }
+}

src/app/cashier/transaction-entry/cashier-issue-dd-dialog.component.ts

@@ -0,0 +1,500 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+export interface CashierIssueDdDialogData {
+  leaflet: any;
+  branchName: string;
+  sponsorBankName: string;
+  faceValue: number;
+  chargesAmount: number;
+  gstPercentage: number;
+  gstAmount: number;
+  totalCashPayable: number;
+  /**
+   * How the draft is being paid for. Cash is a walk-in purchaser the bank may know nothing about,
+   * so their name, address and Aadhaar have to be captured here. An account debit is a member whose
+   * account is already on screen — those fields are not asked for, and must not be sent, because
+   * the identity is the account holder's rather than a walk-in's.
+   */
+  paymentMethod?: 'CASH' | 'ACCOUNT_DEBIT';
+  /** The account being debited, shown so the clerk can see what is funding the draft. */
+  accountNo?: string;
+  /** The account holder, for the same reason. */
+  accountHolderName?: string;
+}
+
+@Component({
+  selector: 'mifosx-cashier-issue-dd-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule
+  ],
+  template: `
+    <div class="dd-dialog-shell">
+      <div class="dd-dialog-header">
+        <div class="dd-dialog-header__title">
+          <mat-icon class="dd-icon">receipt_long</mat-icon>
+          <div>
+            <h2>{{ isAccountDebit ? 'Account-Debit Demand Draft (DD)' : 'Walk-in Cash Demand Draft (DD)' }}</h2>
+            <p>
+              Next available DD leaflet auto-selected ·
+              {{ isAccountDebit ? 'Enter beneficiary details' : 'Enter purchaser &amp; beneficiary details' }}
+            </p>
+          </div>
+        </div>
+        <button mat-icon-button type="button" (click)="onClose()" class="close-btn">
+          <mat-icon>close</mat-icon>
+        </button>
+      </div>
+
+      <mat-dialog-content class="dd-dialog-body">
+        <!-- Draft & Financials Summary Card -->
+        <div class="dd-summary-card">
+          <!-- The number the customer will actually see printed on the instrument. "Auto-Selected
+               Leaflet" named the stock item rather than the draft, so it was not obvious that this
+               is the DD number being issued. -->
+          <div class="summary-col">
+            <span class="label">DD Number Being Issued</span>
+            <strong class="dd-number-highlight">{{ data.leaflet.ddNumber }}</strong>
+            <span class="sublabel">{{ data.sponsorBankName || 'Sponsor Bank' }} · {{ data.branchName }}</span>
+          </div>
+          <div class="summary-divider"></div>
+          <div class="summary-col">
+            <span class="label">Face Value</span>
+            <strong class="amount">₹{{ data.faceValue | number: '1.2-2' }}</strong>
+            <span class="sublabel">+ Charges ₹{{ data.chargesAmount | number: '1.2-2' }}</span>
+          </div>
+          <div class="summary-divider"></div>
+          <div class="summary-col">
+            <span class="label">GST ({{ data.gstPercentage }}%)</span>
+            <strong class="amount">₹{{ data.gstAmount | number: '1.2-2' }}</strong>
+            <span class="sublabel">on charges only</span>
+          </div>
+          <div class="summary-divider"></div>
+          <div class="summary-col highlight-col">
+            <span class="label">{{ isAccountDebit ? 'Total Debited' : 'Total Cash Collected' }}</span>
+            <strong class="total-amount">₹{{ data.totalCashPayable | number: '1.2-2' }}</strong>
+            <span class="sublabel">
+              @if (isAccountDebit) {
+                {{ data.accountNo || 'Account' }}
+              } @else {
+                Denominations verified
+              }
+            </span>
+          </div>
+        </div>
+
+        <!--
+          The account funding the draft, stated before the form.
+
+          A clerk reaching this dialog has an account loaded on the workstation behind it, and the
+          debit is irreversible once a checker approves. Naming the account and its holder here is
+          what makes a wrong account visible while it can still be cancelled.
+        -->
+        @if (isAccountDebit) {
+          <div class="dd-funding-note">
+            <mat-icon>account_balance_wallet</mat-icon>
+            <div>
+              <strong>Debiting {{ data.accountNo }}</strong>
+              @if (data.accountHolderName) {
+                · {{ data.accountHolderName }}
+              }
+              <div class="dd-funding-sub">
+                ₹{{ data.totalCashPayable | number: '1.2-2' }} will be debited from this account when a checker
+                approves. No cash is taken at the counter.
+              </div>
+            </div>
+          </div>
+        }
+
+        <form [formGroup]="form" class="dd-form">
+          <!--
+            Purchaser identity is asked for only when the bank has none: a walk-in paying cash. On an
+            account debit the purchaser IS the account holder, already identified and KYC'd, and
+            re-capturing a name and Aadhaar here would invite a mismatch against the account on record.
+          -->
+          @if (!isAccountDebit) {
+            <div class="form-section-title">Walk-in Purchaser Details</div>
+
+            <div class="form-row">
+              <mat-form-field appearance="outline" class="form-field-flex">
+                <mat-label>Walk-in Purchaser Name *</mat-label>
+                <input
+                  matInput
+                  formControlName="walkinPurchaserName"
+                  placeholder="e.g. RAMESH CHANDRA"
+                  style="text-transform: uppercase;"
+                />
+                <mat-error *ngIf="form.get('walkinPurchaserName')?.hasError('required')"
+                  >Purchaser name is required</mat-error
+                >
+                <mat-error *ngIf="form.get('walkinPurchaserName')?.hasError('minlength')"
+                  >Must be at least 3 characters</mat-error
+                >
+              </mat-form-field>
+
+              <mat-form-field appearance="outline" class="form-field-flex">
+                <mat-label>12-Digit Aadhaar Number *</mat-label>
+                <input
+                  matInput
+                  formControlName="walkinPurchaserAadhaar"
+                  placeholder="12-digit Aadhaar"
+                  maxlength="12"
+                />
+                <mat-hint>Masked to last 4 digits before storage</mat-hint>
+                <mat-error *ngIf="form.get('walkinPurchaserAadhaar')?.hasError('required')"
+                  >Aadhaar number is required</mat-error
+                >
+                <mat-error *ngIf="form.get('walkinPurchaserAadhaar')?.hasError('pattern')"
+                  >Must be exactly 12 numeric digits</mat-error
+                >
+              </mat-form-field>
+            </div>
+
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Purchaser Address / Location *</mat-label>
+              <input
+                matInput
+                formControlName="walkinPurchaserAddress"
+                placeholder="e.g. 14, SECTOR 5, MAIN ROAD, MUMBAI"
+                style="text-transform: uppercase;"
+              />
+              <mat-error *ngIf="form.get('walkinPurchaserAddress')?.hasError('required')"
+                >Address is required</mat-error
+              >
+            </mat-form-field>
+          }
+
+          <!-- Beneficiary Section -->
+          <div class="form-section-title">Beneficiary & Payment Details</div>
+
+          <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Beneficiary Name (In Favour Of) *</mat-label>
+            <input
+              matInput
+              formControlName="beneficiaryName"
+              placeholder="e.g. UNIVERSITY OF MUMBAI"
+              maxlength="120"
+              style="text-transform: uppercase;"
+            />
+            <mat-error *ngIf="form.get('beneficiaryName')?.hasError('required')"
+              >Beneficiary name is required</mat-error
+            >
+            <mat-error *ngIf="form.get('beneficiaryName')?.hasError('maxlength')">Max 120 characters</mat-error>
+          </mat-form-field>
+
+          <div class="form-row">
+            <mat-form-field appearance="outline" class="form-field-flex">
+              <mat-label>Payable At - Branch *</mat-label>
+              <input
+                matInput
+                formControlName="payableAtBranch"
+                placeholder="e.g. FORT BRANCH"
+                maxlength="150"
+                style="text-transform: uppercase;"
+              />
+              <mat-error *ngIf="form.get('payableAtBranch')?.hasError('required')"
+                >Payable Branch is required</mat-error
+              >
+            </mat-form-field>
+
+            <mat-form-field appearance="outline" class="form-field-flex">
+              <mat-label>Payable At - City *</mat-label>
+              <input
+                matInput
+                formControlName="payableAtCity"
+                placeholder="e.g. MUMBAI"
+                maxlength="100"
+                style="text-transform: uppercase;"
+              />
+              <mat-error *ngIf="form.get('payableAtCity')?.hasError('required')">Payable City is required</mat-error>
+            </mat-form-field>
+          </div>
+        </form>
+      </mat-dialog-content>
+
+      <mat-dialog-actions class="dd-dialog-actions" align="end">
+        <button mat-button type="button" (click)="onClose()">Cancel</button>
+        <button mat-flat-button color="primary" [disabled]="form.invalid" (click)="onSubmit()">
+          Save DD Details
+        </button>
+      </mat-dialog-actions>
+    </div>
+  `,
+  styles: [
+    `
+      .dd-dialog-shell {
+        display: flex;
+        flex-direction: column;
+        max-height: 90vh;
+      }
+      .dd-dialog-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 16px 24px;
+        background: #0f172a;
+        color: #ffffff;
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+      }
+      .dd-dialog-header__title {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .dd-dialog-header__title h2 {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #ffffff;
+      }
+      .dd-dialog-header__title p {
+        margin: 2px 0 0 0;
+        font-size: 12px;
+        color: #94a3b8;
+      }
+      .dd-icon {
+        color: #38bdf8;
+        font-size: 28px;
+        width: 28px;
+        height: 28px;
+      }
+      .close-btn {
+        color: #94a3b8;
+      }
+      .close-btn:hover {
+        color: #ffffff;
+      }
+      .dd-dialog-body {
+        padding: 20px 24px;
+        overflow-y: auto;
+      }
+      .dd-summary-card {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: #f8fafc;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        padding: 14px 18px;
+        margin-bottom: 20px;
+      }
+      .summary-col {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      .summary-col.highlight-col {
+        background: #ecfdf5;
+        padding: 6px 12px;
+        border-radius: 6px;
+        border: 1px solid #a7f3d0;
+      }
+      .summary-divider {
+        width: 1px;
+        height: 36px;
+        background: #e2e8f0;
+      }
+      .summary-col .label {
+        font-size: 11px;
+        text-transform: uppercase;
+        color: #64748b;
+        font-weight: 600;
+      }
+      .dd-number-highlight {
+        font-size: 16px;
+        color: #0369a1;
+        font-family: monospace;
+      }
+      .summary-col .amount {
+        font-size: 15px;
+        color: #1e293b;
+      }
+      .summary-col .total-amount {
+        font-size: 16px;
+        color: #065f46;
+      }
+      .summary-col .sublabel {
+        font-size: 11px;
+        color: #94a3b8;
+      }
+      .form-section-title {
+        font-size: 13px;
+        font-weight: 600;
+        text-transform: uppercase;
+        color: #475569;
+        margin: 16px 0 10px 0;
+        border-bottom: 1px solid #f1f5f9;
+        padding-bottom: 4px;
+      }
+      .form-section-title:first-child {
+        margin-top: 0;
+      }
+      .dd-form {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .full-width {
+        width: 100%;
+      }
+      .form-row {
+        display: flex;
+        gap: 16px;
+      }
+      .form-field-flex {
+        flex: 1;
+      }
+      .dd-dialog-actions {
+        padding: 12px 24px;
+        border-top: 1px solid #e2e8f0;
+      }
+      /* The account about to be debited — read before the form, so a wrong one is caught here. */
+      .dd-funding-note {
+        display: flex;
+        gap: 10px;
+        align-items: flex-start;
+        margin: 14px 0 4px;
+        padding: 11px 14px;
+        background: #eff6ff;
+        border: 1px solid #bfdbfe;
+        border-left: 3px solid #1d4ed8;
+        border-radius: 6px;
+        font-size: 13px;
+        color: #334155;
+      }
+      .dd-funding-note mat-icon {
+        color: #1d4ed8;
+        flex-shrink: 0;
+      }
+      .dd-funding-sub {
+        margin-top: 3px;
+        font-size: 11.5px;
+        line-height: 1.5;
+        color: #64748b;
+      }
+    `
+  ]
+})
+export class CashierIssueDdDialogComponent implements OnInit {
+  private fb = inject(FormBuilder);
+  private dialogRef = inject(MatDialogRef<CashierIssueDdDialogComponent>);
+  public data: CashierIssueDdDialogData = inject(MAT_DIALOG_DATA);
+
+  form!: FormGroup;
+
+  /** Whether the draft is funded by debiting a member's account rather than by cash at the counter. */
+  get isAccountDebit(): boolean {
+    return this.data.paymentMethod === 'ACCOUNT_DEBIT';
+  }
+
+  ngOnInit(): void {
+    // Walk-in identity is required for cash and rejected outright for an account debit — the server
+    // refuses a walk-in name alongside an account — so the controls are only built when they apply.
+    // Registering them unconditionally and merely hiding them would hold the form invalid on a
+    // required field the clerk cannot see.
+    this.form = this.fb.group(
+      this.isAccountDebit
+        ? {
+            beneficiaryName: [
+              '',
+              [
+                Validators.required,
+                Validators.maxLength(120)
+              ]
+            ],
+            payableAtBranch: [
+              '',
+              [Validators.required]
+            ],
+            payableAtCity: [
+              '',
+              [Validators.required]
+            ]
+          }
+        : {
+            walkinPurchaserName: [
+              '',
+              [
+                Validators.required,
+                Validators.minLength(3)
+              ]
+            ],
+            walkinPurchaserAddress: [
+              '',
+              [Validators.required]
+            ],
+            walkinPurchaserAadhaar: [
+              '',
+              [
+                Validators.required,
+                Validators.pattern(/^[0-9]{12}$/)
+              ]
+            ],
+            beneficiaryName: [
+              '',
+              [
+                Validators.required,
+                Validators.maxLength(120)
+              ]
+            ],
+            payableAtBranch: [
+              '',
+              [Validators.required]
+            ],
+            payableAtCity: [
+              '',
+              [Validators.required]
+            ]
+          }
+    );
+  }
+
+  onClose(): void {
+    this.dialogRef.close();
+  }
+
+  onSubmit(): void {
+    if (this.form.invalid) return;
+    const val = this.form.value;
+    const beneficiary = {
+      beneficiaryName: (val.beneficiaryName || '').trim().toUpperCase(),
+      payableAtBranch: (val.payableAtBranch || '').trim().toUpperCase(),
+      payableAtCity: (val.payableAtCity || '').trim().toUpperCase()
+    };
+    // Walk-in fields are left off entirely on an account debit rather than sent empty: the server
+    // rejects a purchaser name arriving alongside an account, and '' would be sent as one.
+    this.dialogRef.close(
+      this.isAccountDebit
+        ? beneficiary
+        : {
+            walkinPurchaserName: (val.walkinPurchaserName || '').trim().toUpperCase(),
+            walkinPurchaserAddress: (val.walkinPurchaserAddress || '').trim().toUpperCase(),
+            walkinPurchaserAadhaar: (val.walkinPurchaserAadhaar || '').trim(),
+            ...beneficiary
+          }
+    );
+  }
+}

src/app/cashier/transaction-entry/transaction-entry.component.html

@@ -120,12 +120,9 @@
                         (click)="$event.stopPropagation()"
                         (change)="onTypChange(row)"
                       >
-                        <option value="~">~</option>
-                        <option value="Withdrawal Slip">Withdrawal Slip</option>
-                        <option value="Cheque">Cheque</option>
-                        <option value="Disbursement">Disbursement</option>
-                        <option value="Enter Bank Transfer">Enter Bank Transfer</option>
-                        <option value="DD">DD (Demand Draft)</option>
+                        @for (t of typOptions; track t.value) {
+                          <option [value]="t.value">{{ t.label }}</option>
+                        }
                       </select>
                     </div>
                     <div class="ws-f ws-f--branch">
@@ -137,6 +134,23 @@
                         <option [ngValue]="27">027 · Industrial</option>
                       </select>
                     </div>
+                    @if (row.typ === 'DD') {
+                      <div class="ws-f ws-f--branch">
+                        <label class="ws-f__lbl ws-f__lbl--accent" title="Sponsor Bank">SPONSOR BANK</label>
+                        <select
+                          class="ws-f__ctl ws-f__ctl--accent"
+                          [(ngModel)]="row.sponsorBankId"
+                          (click)="$event.stopPropagation()"
+                        >
+                          @if (sponsorBanks.length === 0) {
+                            <option [ngValue]="null">-- Select Bank --</option>
+                          }
+                          @for (sb of sponsorBanks; track sb.id) {
+                            <option [ngValue]="sb.id">{{ sb.name }}</option>
+                          }
+                        </select>
+                      </div>
+                    }
                     <div class="ws-f ws-f--paytype">
                       <label class="ws-f__lbl ws-f__lbl--accent" title="Transaction Type">TXN TP.</label>
                       <select
@@ -145,7 +159,6 @@
                         (click)="$event.stopPropagation()"
                         [class.ws-f__ctl--req]="!row.paymentTypeId"
                       >
-                        <option [ngValue]="null">— Select —</option>
                         @for (pt of paymentTypesForRow(row); track pt.id) {
                           <option [ngValue]="pt.id">{{ pt.name }}</option>
                         }
@@ -160,11 +173,12 @@
                         (change)="
                           row.acTyp === 'GL' &&
                             row.typ !== 'Disbursement' &&
+                            row.typ !== 'Fund Transfer' &&
                             row.typ !== 'Enter Bank Transfer' &&
                             (row.dbCr = 'Cr')
                         "
                       >
-                        @for (a of acTypOptions; track a) {
+                        @for (a of acTypOptionsFor(row); track a) {
                           <option [value]="a">{{ a }}</option>
                         }
                       </select>
@@ -185,7 +199,22 @@
                         (input)="onAcNoInput(row, i, $any($event.target).value)"
                         (click)="$event.stopPropagation()"
                         (blur)="onAcNoBlur(row, i)"
-                        placeholder="Account number"
+                        [placeholder]="
+                          isDdAccountDebitRow(row)
+                            ? 'Account to debit'
+                            : row.typ === 'DD'
+                              ? ddGlMapping?.ddPayableGlCode || 'Auto GL'
+                              : 'Account number'
+                        "
+                        [readonly]="row.typ === 'DD' && !isDdAccountDebitRow(row)"
+                        [class.ws-f__ctl--readonly]="row.typ === 'DD' && !isDdAccountDebitRow(row)"
+                        [title]="
+                          isDdAccountDebitRow(row)
+                            ? 'Member account the draft is funded from'
+                            : row.typ === 'DD'
+                              ? 'Configured Sponsor DD Payable GL (Auto-selected)'
+                              : 'Account number'
+                        "
                       />
                     </div>
                     <div class="ws-f ws-f--ecsno">
@@ -205,7 +234,10 @@
                           class="ws-seg__btn ws-seg__btn--dr"
                           [class.ws-seg__btn--active-dr]="row.dbCr === 'Dr'"
                           [disabled]="
-                            row.acTyp === 'GL' && row.typ !== 'Disbursement' && row.typ !== 'Enter Bank Transfer'
+                            row.acTyp === 'GL' &&
+                            row.typ !== 'Disbursement' &&
+                            row.typ !== 'Fund Transfer' &&
+                            row.typ !== 'Enter Bank Transfer'
                           "
                           (click)="row.dbCr = 'Dr'"
                         >
@@ -236,14 +268,14 @@
                         [title]="row.acTyp === 'SHR' ? 'Number of Shares' : 'Transaction Amount'"
                       >
                         {{ row.acTyp === 'SHR' ? 'SHARE NO.' : 'AMOUNT' }}
-                        @if (!isClerk && activeWithdrawalRequest) {
-                          <span class="ws-amt-locked-badge" title="Amount locked — approved withdrawal">🔒</span>
+                        @if (!isClerk && (activeWithdrawalRequest || activeClosureRequest)) {
+                          <span class="ws-amt-locked-badge" title="Amount locked — approved request">🔒</span>
                         }
                       </label>
                       <div
                         class="ws-amt-wrap"
                         [class.ws-amt-wrap--cash]="isCashPayment && selectedRow === row"
-                        [class.ws-amt-wrap--locked]="!isClerk && !!activeWithdrawalRequest"
+                        [class.ws-amt-wrap--locked]="!isClerk && !!(activeWithdrawalRequest || activeClosureRequest)"
                       >
                         @if (row.acTyp !== 'SHR') {
                           <span class="ws-amt-prefix">₹</span>
@@ -255,8 +287,8 @@
                           (input)="row.amount = +$any($event.target).value; syncShareLinkedAmounts()"
                           (click)="$event.stopPropagation()"
                           [placeholder]="row.acTyp === 'SHR' ? '0' : '0.00'"
-                          [readonly]="!isClerk && !!activeWithdrawalRequest"
-                          [class.ws-amt-input--locked]="!isClerk && !!activeWithdrawalRequest"
+                          [readonly]="!isClerk && !!(activeWithdrawalRequest || activeClosureRequest)"
+                          [class.ws-amt-input--locked]="!isClerk && !!(activeWithdrawalRequest || activeClosureRequest)"
                         />
                       </div>
                       @if (row.acTyp === 'SHR' && rowSharePrices[row.acNo]) {
@@ -267,7 +299,7 @@
                         >
                       }
                     </div>
-                    @if (row.acTyp === 'SHR' && row.typ === 'Enter Bank Transfer') {
+                    @if (row.acTyp === 'SHR' && (row.typ === 'Enter Bank Transfer' || row.typ === 'Fund Transfer')) {
                       <div class="ws-f ws-f--cheqno">
                         <label class="ws-f__lbl" title="Board Resolution Number">RESOLUTION NO.</label>
                         <input
@@ -286,7 +318,7 @@
                           (click)="$event.stopPropagation()"
                         />
                       </div>
-                    } @else if (row.typ !== 'Withdrawal Slip') {
+                    } @else if (isClerk && row.typ !== 'Withdrawal Slip') {
                       <div class="ws-f ws-f--cheqno">
                         <label class="ws-f__lbl" title="Cheque Number">CHEQUE NO.</label>
                         <input
@@ -311,8 +343,8 @@
                       <input
                         class="ws-f__ctl"
                         [(ngModel)]="row.tokNo"
-                        [readonly]="!isClerk && !!activeWithdrawalRequest"
-                        [class.ws-f__ctl--readonly]="!isClerk && !!activeWithdrawalRequest"
+                        [readonly]="!isClerk && !!(activeWithdrawalRequest || activeClosureRequest)"
+                        [class.ws-f__ctl--readonly]="!isClerk && !!(activeWithdrawalRequest || activeClosureRequest)"
                         placeholder="Enter token"
                         (blur)="onTokNoBlur(row)"
                         (click)="$event.stopPropagation()"
@@ -340,7 +372,7 @@
               </div>
 
               <!-- ── Row 3: DD Charges & GST — only for TYPE=DD, TXN TP=Cash, AC.TP=GL ── -->
-              @if (isDdCashGlRow(row)) {
+              @if (isDdRow(row)) {
                 <div class="ws-group-row ws-group-row--mt">
                   <div class="ws-group ws-group--flex">
                     <span class="ws-caption">DD Charges &amp; GST — Admin Rate {{ ddGstPercentage }}%</span>
@@ -375,7 +407,7 @@
                       </div>
                       <div class="ws-f ws-f--amt">
                         <label class="ws-f__lbl" title="Amount + Charges + GST, rounded up to the next rupee">
-                          TOTAL TO COLLECT
+                          {{ isDdAccountDebitRow(row) ? 'TOTAL TO DEBIT' : 'TOTAL TO COLLECT' }}
                         </label>
                         <div class="ws-amt-wrap ws-amt-wrap--locked">
                           <span class="ws-amt-prefix">₹</span>
@@ -387,6 +419,29 @@
                           />
                         </div>
                       </div>
+
+                      <div class="ws-f" style="margin-left: auto; align-self: flex-end">
+                        <button
+                          type="button"
+                          class="te-dd-issue-btn"
+                          [disabled]="saving"
+                          (click)="openIssueWalkinDd(row); $event.stopPropagation()"
+                          [title]="
+                            isDdAccountDebitRow(row)
+                              ? 'Auto-selects next available leaflet and opens the beneficiary form'
+                              : 'Auto-selects next available leaflet and opens walk-in purchaser form'
+                          "
+                        >
+                          <mat-icon style="font-size: 18px; width: 18px; height: 18px">{{
+                            row.ddDetails ? 'edit_note' : 'post_add'
+                          }}</mat-icon>
+                          <!-- Names the leaflet once details are captured, so the clerk can see at a
+                               glance which rows are ready before pressing Save. -->
+                          <span>{{
+                            row.ddDetails ? 'DD ' + row.ddDetails.ddNumber + ' · Edit Details' : 'Fill DD Details'
+                          }}</span>
+                        </button>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -398,6 +453,18 @@
     </div>
   }
 
+  <!-- ── DD GL UNCONFIGURED WARNING BANNER ────────────────────────── -->
+  @if (selectedRow?.typ === 'DD' && !isDdGlMappingConfigured) {
+    <div class="ws-dd-unconfigured-banner">
+      <mat-icon>warning</mat-icon>
+      <div class="ws-dd-unconfigured-banner__text">
+        <strong>DD GL Mapping Required:</strong> Demand Draft GL accounts have not been configured yet. Please ask an
+        administrator to set up the mapping under <em>Admin &gt; Sponsor DD GST / GL Settings</em> before issuing
+        drafts.
+      </div>
+    </div>
+  }
+
   <!-- ── APPROVED WITHDRAWAL BANNER (cashier disburse flow) ─────────── -->
   @if (!isClerk && loadingWithdrawal) {
     <div class="ws-withdrawal-banner ws-withdrawal-banner--loading">
@@ -436,6 +503,73 @@
       </button>
     </div>
   }
+  @if (isClerk && pendingClosure) {
+    <div class="ws-withdrawal-banner ws-withdrawal-banner--closure">
+      <mat-icon class="ws-withdrawal-banner__icon">lock</mat-icon>
+      <div class="ws-withdrawal-banner__content">
+        <div class="ws-withdrawal-banner__title">Closing This Account</div>
+        <div class="ws-withdrawal-banner__details">
+          @if (closurePreview) {
+            <span
+              >Balance: <strong>₹{{ closurePreview.balance | number: '1.2-2' }}</strong></span
+            >
+            <span class="ws-wb-sep">·</span>
+            <span
+              >Interest: <strong>+₹{{ closurePreview.interest | number: '1.2-2' }}</strong></span
+            >
+            <span class="ws-wb-sep">·</span>
+            <span
+              >Payable: <strong>₹{{ closurePreview.total | number: '1.2-2' }}</strong></span
+            >
+          }
+        </div>
+        <div class="ws-withdrawal-banner__note">
+          Enter <strong>TOK. NO.</strong> below and press <strong>Save</strong> to send this for the Bank Manager's
+          approval. The account closes when the cashier hands over the cash.
+        </div>
+      </div>
+      <button type="button" class="ws-withdrawal-banner__clear" (click)="clearPendingClosure()" title="Cancel closure">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
+  }
+  @if (!isClerk && activeClosureRequest) {
+    <div class="ws-withdrawal-banner">
+      <mat-icon class="ws-withdrawal-banner__icon">lock</mat-icon>
+      <div class="ws-withdrawal-banner__content">
+        <div class="ws-withdrawal-banner__title">Approved Account Closure Linked</div>
+        <div class="ws-withdrawal-banner__details">
+          <span
+            >Token: <strong>{{ activeClosureRequest.tok_no }}</strong></span
+          >
+          <span class="ws-wb-sep">·</span>
+          <span
+            >Cash to Hand Over:
+            <strong>₹{{ activeClosureRequest.cashier_disbursed_amount | number: '1.2-2' }}</strong></span
+          >
+          <span class="ws-wb-sep">·</span>
+          <span
+            >Client: <strong>{{ activeClosureRequest.client_name }}</strong></span
+          >
+          <span class="ws-wb-sep">·</span>
+          <span>By Clerk: {{ activeClosureRequest.clerk_name }}</span>
+          <span class="ws-wb-sep">·</span>
+          <span>Approved by: {{ activeClosureRequest.manager_name || '—' }}</span>
+        </div>
+        <div class="ws-withdrawal-banner__note">
+          @if (activeClosureRequest.rounding_amount && activeClosureRequest.rounding_amount !== 0) {
+            Exact closing balance was ₹{{ activeClosureRequest.closing_amount | number: '1.2-2' }} — rounded
+            {{ activeClosureRequest.rounding_amount > 0 ? 'up' : 'down' }} to whole rupees for cash.
+          } @else {
+            The account is already closed. Hand over the cash to complete the request.
+          }
+        </div>
+      </div>
+      <button type="button" class="ws-withdrawal-banner__clear" (click)="activeClosureRequest = null" title="Unlink">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
+  }
 
   <!-- ── STATUS ────────────────────────────────────────────────────────── -->
   @if (loadingAccount) {
@@ -804,7 +938,7 @@
               </div>
               <div class="te-balance-row">
                 <span class="te-bal-num">4.</span><span class="te-bal-label">Freeze Amount</span>
-                <span class="te-bal-value">{{ currencySymbol }}0.00</span>
+                <span class="te-bal-value">{{ currencySymbol }}{{ freezeAmount | number: '1.2-2' }}</span>
               </div>
               <div class="te-balance-row">
                 <span class="te-bal-num">5.</span><span class="te-bal-label">Withdrawable Amt.</span>
@@ -865,7 +999,7 @@
           </div>
           <div class="te-bal-item">
             <span class="te-bal-item__label">Cash Hold</span>
-            <span class="te-bal-item__val">0.00</span>
+            <span class="te-bal-item__val">{{ cashHold | number: '1.2-2' }}</span>
           </div>
           <div class="te-bal-item">
             <span class="te-bal-item__label">Transfer Hold</span>
@@ -873,7 +1007,7 @@
           </div>
           <div class="te-bal-item">
             <span class="te-bal-item__label">Clearing Hold</span>
-            <span class="te-bal-item__val">0.00</span>
+            <span class="te-bal-item__val">{{ clearingHold | number: '1.2-2' }}</span>
           </div>
           <div class="te-bal-item">
             <span class="te-bal-item__label">After Trans.</span>
@@ -889,6 +1023,11 @@
             <span class="te-bal-item__label">Currency</span>
             <span class="te-bal-item__val">{{ accountDetails.currency?.code ?? 'INR' }}</span>
           </div>
+          @if (canPrintStatement) {
+            <button type="button" class="te-btn" (click)="printStatement()">
+              <mat-icon>print</mat-icon> Statement
+            </button>
+          }
         </div>
       } @else {
         <!-- Cashier: all account info in one compact strip -->
@@ -925,42 +1064,50 @@
           <div class="te-acs-meta">
             <span
               class="te-acs-tag"
-              [class.te-acs-tag--active]="accountDetails?.status?.value === 'Active'"
+              [class.te-acs-tag--active]="activeDividendClaimRequest || accountDetails?.status?.value === 'Active'"
               [class.te-acs-tag--blocked]="accountDetails?.status?.value === 'Blocked'"
               [class.te-acs-tag--dormant]="accountDetails?.subStatus?.value === 'Dormant'"
               >{{
-                accountDetails?.subStatus?.value === 'Dormant' ? 'Dormant' : (accountDetails?.status?.value ?? '—')
+                activeDividendClaimRequest
+                  ? 'Awaiting Disbursement'
+                  : accountDetails?.subStatus?.value === 'Dormant'
+                    ? 'Dormant'
+                    : (accountDetails?.status?.value ?? '—')
               }}</span
             >
             <span class="te-acs-kv"
               ><b>A/c</b>
               {{
                 accountDetails?.depositType?.value ||
-                  (selectedRow?.acTyp === 'CA'
-                    ? 'Current'
-                    : selectedRow?.acTyp === 'SD'
-                      ? 'Savings'
-                      : selectedRow?.acTyp === 'FD'
-                        ? 'Fixed Dep.'
-                        : selectedRow?.acTyp === 'RD'
-                          ? 'Recurring'
-                          : selectedRow?.acTyp === 'GL'
-                            ? (accountDetails?.type?.value ?? 'GL Account')
-                            : selectedRow?.acTyp === 'SHR'
-                              ? 'Share'
-                              : selectedRow?.acTyp === 'LA'
-                                ? 'Loan'
-                                : '—')
+                  (activeDividendClaimRequest
+                    ? 'Dividend Claim'
+                    : selectedRow?.acTyp === 'CA'
+                      ? 'Current'
+                      : selectedRow?.acTyp === 'SD'
+                        ? 'Savings'
+                        : selectedRow?.acTyp === 'FD'
+                          ? 'Fixed Dep.'
+                          : selectedRow?.acTyp === 'RD'
+                            ? 'Recurring'
+                            : selectedRow?.acTyp === 'GL'
+                              ? (accountDetails?.type?.value ?? 'GL Account')
+                              : selectedRow?.acTyp === 'SHR'
+                                ? 'Share'
+                                : selectedRow?.acTyp === 'LA'
+                                  ? 'Loan'
+                                  : '—')
               }}</span
             >
             <span class="te-acs-kv"><b>Branch</b> {{ officeName ?? '—' }}</span>
             <span class="te-acs-kv"
               ><b>Product</b>
               {{
-                accountDetails?.savingsProductName ||
-                  accountDetails?.depositProductName ||
-                  accountDetails?.productName ||
-                  '—'
+                activeDividendClaimRequest
+                  ? 'Dividend Cash Payout'
+                  : accountDetails?.savingsProductName ||
+                    accountDetails?.depositProductName ||
+                    accountDetails?.productName ||
+                    '—'
               }}</span
             >
             <span class="te-acs-kv"
@@ -981,7 +1128,7 @@
             </div>
             <div class="te-acs-b">
               <span class="te-acs-b-l">Cash Hold</span>
-              <span class="te-acs-b-v">0.00</span>
+              <span class="te-acs-b-v">{{ cashHold | number: '1.2-2' }}</span>
             </div>
             <div class="te-acs-b">
               <span class="te-acs-b-l">Tr. Hold</span>
@@ -989,13 +1136,19 @@
             </div>
             <div class="te-acs-b">
               <span class="te-acs-b-l">Clr. Hold</span>
-              <span class="te-acs-b-v">0.00</span>
+              <span class="te-acs-b-v">{{ clearingHold | number: '1.2-2' }}</span>
             </div>
             <div class="te-acs-b te-acs-b--after">
               <span class="te-acs-b-l">After Trans.</span>
               <span class="te-acs-b-v te-acs-b-v--cr">{{ currencySymbol }}{{ clearBalance | number: '1.2-2' }}</span>
             </div>
           </div>
+          @if (canPrintStatement) {
+            <div class="te-acs-sep"></div>
+            <button type="button" class="te-btn" (click)="printStatement()">
+              <mat-icon>print</mat-icon> Statement
+            </button>
+          }
           <!-- Alerts -->
           @if (accountAlerts.length > 0) {
             <div class="te-acs-sep"></div>
@@ -1318,32 +1471,51 @@
                       <div class="ws-group__fields">
                         <div class="ws-f ws-f--type">
                           <label class="ws-f__lbl">TYPE</label>
-                          <select class="ws-f__ctl" [(ngModel)]="row.typ">
-                            <option value="~">~</option>
-                            <option value="Withdrawal Slip">Withdrawal Slip</option>
-                            <option value="Cheque">Cheque</option>
-                            <option value="Disbursement">Disbursement</option>
-                            <option value="Enter Bank Transfer">Enter Bank Transfer</option>
-                            <option value="DD">DD (Demand Draft)</option>
+                          <select
+                            class="ws-f__ctl"
+                            [(ngModel)]="row.typ"
+                            (click)="$event.stopPropagation()"
+                            (change)="onTypChange(row)"
+                          >
+                            @for (t of typOptions; track t.value) {
+                              <option [value]="t.value">{{ t.label }}</option>
+                            }
                           </select>
                         </div>
                         <div class="ws-f ws-f--branch">
                           <label class="ws-f__lbl">BRANCH</label>
-                          <select class="ws-f__ctl" [(ngModel)]="row.br">
+                          <select class="ws-f__ctl" [(ngModel)]="row.br" (click)="$event.stopPropagation()">
                             <option [ngValue]="1">001 · Main</option>
                             <option [ngValue]="2">002 · M.G. Road</option>
                             <option [ngValue]="14">014 · Station Rd</option>
                             <option [ngValue]="27">027 · Industrial</option>
                           </select>
                         </div>
+                        @if (row.typ === 'DD') {
+                          <div class="ws-f ws-f--branch">
+                            <label class="ws-f__lbl ws-f__lbl--accent" title="Sponsor Bank">SPONSOR BANK</label>
+                            <select
+                              class="ws-f__ctl ws-f__ctl--accent"
+                              [(ngModel)]="row.sponsorBankId"
+                              (click)="$event.stopPropagation()"
+                            >
+                              @if (sponsorBanks.length === 0) {
+                                <option [ngValue]="null">-- Select Bank --</option>
+                              }
+                              @for (sb of sponsorBanks; track sb.id) {
+                                <option [ngValue]="sb.id">{{ sb.name }}</option>
+                              }
+                            </select>
+                          </div>
+                        }
                         <div class="ws-f ws-f--paytype">
                           <label class="ws-f__lbl ws-f__lbl--accent">TXN TP.</label>
                           <select
                             class="ws-f__ctl ws-f__ctl--accent"
                             [(ngModel)]="row.paymentTypeId"
+                            (click)="$event.stopPropagation()"
                             [class.ws-f__ctl--req]="!row.paymentTypeId"
                           >
-                            <option [ngValue]="null">— Select —</option>
                             @for (pt of paymentTypesForRow(row); track pt.id) {
                               <option [ngValue]="pt.id">{{ pt.name }}</option>
                             }
@@ -1354,14 +1526,16 @@
                           <select
                             class="ws-f__ctl"
                             [(ngModel)]="row.acTyp"
+                            (click)="$event.stopPropagation()"
                             (change)="
                               row.acTyp === 'GL' &&
                                 row.typ !== 'Disbursement' &&
+                                row.typ !== 'Fund Transfer' &&
                                 row.typ !== 'Enter Bank Transfer' &&
                                 (row.dbCr = 'Cr')
                             "
                           >
-                            @for (a of acTypOptions; track a) {
+                            @for (a of acTypOptionsFor(row); track a) {
                               <option [value]="a">{{ a }}</option>
                             }
                           </select>
@@ -1379,7 +1553,14 @@
                             [value]="row.acNo"
                             (input)="onAcNoInput(row, i, $any($event.target).value)"
                             (blur)="onAcNoBlur(row, i)"
-                            placeholder="Account number"
+                            [placeholder]="
+                              row.typ === 'DD' ? ddGlMapping?.ddPayableGlCode || 'Auto GL' : 'Account number'
+                            "
+                            [readonly]="row.typ === 'DD'"
+                            [class.ws-f__ctl--readonly]="row.typ === 'DD'"
+                            [title]="
+                              row.typ === 'DD' ? 'Configured Sponsor DD Payable GL (Auto-selected)' : 'Account number'
+                            "
                           />
                         </div>
                         <div class="ws-f ws-f--ecsno">
@@ -1398,7 +1579,10 @@
                               class="ws-seg__btn ws-seg__btn--dr"
                               [class.ws-seg__btn--active-dr]="row.dbCr === 'Dr'"
                               [disabled]="
-                                row.acTyp === 'GL' && row.typ !== 'Disbursement' && row.typ !== 'Enter Bank Transfer'
+                                row.acTyp === 'GL' &&
+                                row.typ !== 'Disbursement' &&
+                                row.typ !== 'Fund Transfer' &&
+                                row.typ !== 'Enter Bank Transfer'
                               "
                               (click)="$event.stopPropagation(); row.dbCr = 'Dr'"
                             >
@@ -1424,14 +1608,16 @@
                         <div class="ws-f ws-f--amt">
                           <label class="ws-f__lbl">
                             {{ row.acTyp === 'SHR' ? 'SHARE NO.' : 'AMOUNT' }}
-                            @if (!isClerk && activeWithdrawalRequest) {
-                              <span class="ws-amt-locked-badge" title="Amount locked — approved withdrawal">🔒</span>
+                            @if (!isClerk && (activeWithdrawalRequest || activeClosureRequest)) {
+                              <span class="ws-amt-locked-badge" title="Amount locked — approved request">🔒</span>
                             }
                           </label>
                           <div
                             class="ws-amt-wrap"
                             [class.ws-amt-wrap--cash]="isCashPayment && selectedRow === row"
-                            [class.ws-amt-wrap--locked]="!isClerk && !!activeWithdrawalRequest"
+                            [class.ws-amt-wrap--locked]="
+                              !isClerk && !!(activeWithdrawalRequest || activeClosureRequest)
+                            "
                           >
                             @if (row.acTyp !== 'SHR') {
                               <span class="ws-amt-prefix">₹</span>
@@ -1443,8 +1629,10 @@
                               (input)="row.amount = +$any($event.target).value; syncShareLinkedAmounts()"
                               (click)="$event.stopPropagation()"
                               [placeholder]="row.acTyp === 'SHR' ? '0' : '0.00'"
-                              [readonly]="!isClerk && !!activeWithdrawalRequest"
-                              [class.ws-amt-input--locked]="!isClerk && !!activeWithdrawalRequest"
+                              [readonly]="!isClerk && !!(activeWithdrawalRequest || activeClosureRequest)"
+                              [class.ws-amt-input--locked]="
+                                !isClerk && !!(activeWithdrawalRequest || activeClosureRequest)
+                              "
                             />
                           </div>
                           @if (row.acTyp === 'SHR' && rowSharePrices[row.acNo]) {
@@ -1455,7 +1643,9 @@
                             >
                           }
                         </div>
-                        @if (row.acTyp === 'SHR' && row.typ === 'Enter Bank Transfer') {
+                        @if (
+                          row.acTyp === 'SHR' && (row.typ === 'Enter Bank Transfer' || row.typ === 'Fund Transfer')
+                        ) {
                           <div class="ws-f ws-f--cheqno">
                             <label class="ws-f__lbl">RESOLUTION NO.</label>
                             <input
@@ -1468,7 +1658,7 @@
                             <label class="ws-f__lbl">MEETING DATE</label>
                             <input class="ws-f__ctl" type="date" [(ngModel)]="row.meetingDate" />
                           </div>
-                        } @else {
+                        } @else if (isClerk) {
                           <div class="ws-f ws-f--cheqno">
                             <label class="ws-f__lbl">CHEQUE NO.</label>
                             <input class="ws-f__ctl ws-f__ctl--mono" [(ngModel)]="row.chequeNo" placeholder="—" />
@@ -1483,8 +1673,10 @@
                           <input
                             class="ws-f__ctl"
                             [(ngModel)]="row.tokNo"
-                            [readonly]="!isClerk && !!activeWithdrawalRequest"
-                            [class.ws-f__ctl--readonly]="!isClerk && !!activeWithdrawalRequest"
+                            [readonly]="!isClerk && !!(activeWithdrawalRequest || activeClosureRequest)"
+                            [class.ws-f__ctl--readonly]="
+                              !isClerk && !!(activeWithdrawalRequest || activeClosureRequest)
+                            "
                             placeholder="Enter token"
                             (blur)="onTokNoBlur(row)"
                           />
@@ -1497,14 +1689,19 @@
                       <div class="ws-group__fields">
                         <div class="ws-f ws-f--desc">
                           <label class="ws-f__lbl">DESCRIPTION</label>
-                          <input class="ws-f__ctl" [(ngModel)]="row.description" placeholder="Narration / remarks" />
+                          <input
+                            class="ws-f__ctl"
+                            [(ngModel)]="row.description"
+                            (click)="$event.stopPropagation()"
+                            placeholder="Narration / remarks"
+                          />
                         </div>
                       </div>
                     </div>
                   </div>
 
                   <!-- ── Row 3: DD Charges & GST — only for TYPE=DD, TXN TP=Cash, AC.TP=GL ── -->
-                  @if (isDdCashGlRow(row)) {
+                  @if (isDdRow(row)) {
                     <div class="ws-group-row ws-group-row--mt">
                       <div class="ws-group ws-group--flex">
                         <span class="ws-caption">DD Charges &amp; GST — Admin Rate {{ ddGstPercentage }}%</span>
@@ -1518,6 +1715,7 @@
                                 type="number"
                                 [value]="row.ddCharges ?? ''"
                                 (input)="row.ddCharges = +$any($event.target).value"
+                                (click)="$event.stopPropagation()"
                                 placeholder="0.00"
                               />
                             </div>
@@ -1538,7 +1736,7 @@
                           </div>
                           <div class="ws-f ws-f--amt">
                             <label class="ws-f__lbl" title="Amount + Charges + GST, rounded up to the next rupee">
-                              TOTAL TO COLLECT
+                              {{ isDdAccountDebitRow(row) ? 'TOTAL TO DEBIT' : 'TOTAL TO COLLECT' }}
                             </label>
                             <div class="ws-amt-wrap ws-amt-wrap--locked">
                               <span class="ws-amt-prefix">₹</span>
@@ -1550,6 +1748,23 @@
                               />
                             </div>
                           </div>
+
+                          <div class="ws-f" style="margin-left: auto; align-self: flex-end">
+                            <button
+                              type="button"
+                              class="te-dd-issue-btn"
+                              [disabled]="saving"
+                              (click)="openIssueWalkinDd(row); $event.stopPropagation()"
+                              [title]="
+                                isDdAccountDebitRow(row)
+                                  ? 'Auto-selects next available leaflet and opens the beneficiary form'
+                                  : 'Auto-selects next available leaflet and opens walk-in purchaser form'
+                              "
+                            >
+                              <mat-icon style="font-size: 18px; width: 18px; height: 18px">post_add</mat-icon>
+                              <span>Fill DD Details</span>
+                            </button>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -1647,9 +1862,22 @@
                   class="ws-btn ws-btn--ghost"
                   type="button"
                   (click)="router.navigate(['/clerk/my-disbursement-requests'])"
-                  title="View my disbursement requests"
+                  title="View my fund requests — Disbursement, Collection, Fund Transfer and Bank Transfer"
                 >
-                  My Disbursements
+                  Disbursements &amp; Transfer
+                </button>
+              }
+              @if (canShowAccountActions) {
+                <button
+                  class="ws-btn ws-btn--action"
+                  type="button"
+                  (click)="openAccountActions()"
+                  title="Account actions for the loaded account"
+                >
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+                  </svg>
+                  Action
                 </button>
               }
             </div>
@@ -1673,6 +1901,91 @@
   }
 </div>
 
+<!-- ── ACCOUNT ACTIONS (clerk) ──────────────────────────────────────────── -->
+@if (showAccountActions) {
+  <div class="te-confirm-overlay" (click)="closeAccountActions()">
+    <div class="te-confirm-box te-aa-box" (click)="$event.stopPropagation()">
+      <div class="te-confirm-header te-confirm-header--action">
+        <span class="te-confirm-icon">⚡</span>
+        <span>Account Actions</span>
+      </div>
+      <div class="te-confirm-body">
+        <div class="te-aa-account">
+          <span class="te-aa-account__no">{{ accountDetails?.accountNo }}</span>
+          <span class="te-aa-account__name">{{ clientName }}</span>
+        </div>
+
+        <label class="te-aa-check">
+          <input type="checkbox" [(ngModel)]="closeAccountChecked" (change)="onCloseAccountToggle()" />
+          <span>
+            <strong>Close this account</strong>
+            <small>Pays out the full balance in cash and closes the account, after manager approval.</small>
+          </span>
+        </label>
+
+        @if (closeAccountChecked) {
+          @if (closurePreviewLoading) {
+            <div class="te-aa-calc te-aa-calc--loading">Posting interest to the account…</div>
+          } @else if (closurePreviewError) {
+            <div class="te-aa-calc te-aa-calc--error">{{ closurePreviewError }}</div>
+          } @else if (closurePreview) {
+            <div class="te-aa-calc">
+              <div class="te-aa-calc__row">
+                <span>Current Balance</span>
+                <span>₹{{ closurePreview.balance | number: '1.2-2' }}</span>
+              </div>
+              @if (closurePreview.interest < 0) {
+                <!-- Negative only when this run corrects interest that was over-posted earlier: the
+                     delta is against the stored balance, so calling it "interest" would read as the
+                     member being charged. The Payable figure below is the authoritative one either way. -->
+                <div class="te-aa-calc__row">
+                  <span>Interest correction</span>
+                  <span>− ₹{{ -closurePreview.interest | number: '1.2-2' }}</span>
+                </div>
+              } @else {
+                <div class="te-aa-calc__row">
+                  <span>Interest to date</span>
+                  <span>+ ₹{{ closurePreview.interest | number: '1.2-2' }}</span>
+                </div>
+              }
+              <div class="te-aa-calc__row te-aa-calc__row--total">
+                <span>Payable on Closure</span>
+                <span>₹{{ closurePreview.total | number: '1.2-2' }}</span>
+              </div>
+              @if (!closurePreview.upToDate) {
+                <div class="te-aa-calc__warn">
+                  Interest could not be calculated just now, so this shows the current balance only — the actual payout
+                  will be higher once interest is added at approval.
+                </div>
+              }
+              <div class="te-aa-calc__note">
+                Interest has been posted to the account as of {{ closurePreview.asOfDate }} — this is the account's real
+                balance now, not an estimate. Cash is handed over rounded to whole rupees.
+              </div>
+            </div>
+
+            <div class="te-aa-next">
+              This amount will be filled into <strong>AMOUNT</strong> on the slip. Enter <strong>TOK. NO.</strong> and
+              press <strong>Save</strong> to send it for the Bank Manager's approval.
+            </div>
+          }
+        }
+      </div>
+      <div class="te-confirm-actions">
+        <button class="te-btn" type="button" (click)="closeAccountActions()">Cancel</button>
+        <button
+          class="te-btn te-btn--primary"
+          type="button"
+          [disabled]="closeAccountChecked && (!closurePreview || closurePreviewLoading)"
+          (click)="applyCloseAccount()"
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  </div>
+}
+
 <!-- ── REJECT DIALOG (manager review) ───────────────────────────────────── -->
 @if (showRejectDialog) {
   <div class="te-confirm-overlay" (click)="cancelRejectReview()">
@@ -1924,6 +2237,15 @@
           @for (line of alertModal.lines; track $index) {
             @if ($index === 0) {
               <p class="te-alert-box__desc">{{ line }}</p>
+            } @else if (line.startsWith('⚠')) {
+              <div class="te-alert-box__callout">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                  <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+                  <line x1="12" y1="9" x2="12" y2="13" />
+                  <line x1="12" y1="17" x2="12.01" y2="17" />
+                </svg>
+                <span>{{ line.slice(1).trim() }}</span>
+              </div>
             } @else if (line.includes(':') && $index < alertModal.lines.length - 1) {
               <div class="te-alert-box__kv">
                 <span class="te-alert-box__kv-k">{{ line.split(':')[0].trim() }}</span>

src/app/cashier/transaction-entry/transaction-entry.component.scss

@@ -457,6 +457,21 @@ $ws-fld-bd: #c8d8eb;
     }
   }
 
+  &--action {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: #fff;
+    font-weight: 700;
+    box-shadow: 0 2px 8px rgb(79 70 229 / 30%);
+
+    svg {
+      stroke: #fff;
+    }
+
+    &:hover {
+      filter: brightness(1.08);
+    }
+  }
+
   &--post {
     background: $ws-accent;
     color: #fff;
@@ -2003,12 +2018,12 @@ select.te-cell {
 
 .te-alert-box {
   display: flex;
-  width: 480px;
-  max-width: 96vw;
-  border-radius: 16px;
+  width: 400px;
+  max-width: 94vw;
+  border-radius: 14px;
   overflow: hidden;
   box-shadow:
-    0 32px 80px rgb(0 0 0 / 35%),
+    0 24px 60px rgb(0 0 0 / 32%),
     0 0 0 1px rgb(255 255 255 / 8%);
   animation: te-pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 
@@ -2018,32 +2033,35 @@ select.te-cell {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 10px;
-    width: 76px;
+    gap: 8px;
+    width: 56px;
     flex-shrink: 0;
-    padding: 24px 0;
+    padding: 16px 0;
   }
 
   &__sidebar-icon {
-    width: 40px;
-    height: 40px;
+    width: 32px;
+    height: 32px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgb(255 255 255 / 20%);
+    box-shadow:
+      0 0 0 1px rgb(255 255 255 / 15%),
+      inset 0 1px 2px rgb(255 255 255 / 25%);
 
     svg {
-      width: 22px;
-      height: 22px;
+      width: 17px;
+      height: 17px;
       stroke: #fff;
     }
   }
 
   &__sidebar-type {
-    font-size: 8px;
+    font-size: 7px;
     font-weight: 900;
-    letter-spacing: 0.12em;
+    letter-spacing: 0.1em;
     color: rgb(255 255 255 / 70%);
     text-transform: uppercase;
     writing-mode: vertical-lr;
@@ -2053,6 +2071,7 @@ select.te-cell {
   // ── Right content ─────────────────────────────────────────────────────────
   &__content {
     flex: 1;
+    min-width: 0;
     background: #fff;
     display: flex;
     flex-direction: column;
@@ -2062,12 +2081,12 @@ select.te-cell {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    padding: 20px 20px 12px;
+    padding: 14px 16px 8px;
     border-bottom: 1px solid #f1f5f9;
 
     h3 {
       margin: 0;
-      font-size: 15px;
+      font-size: 13.5px;
       font-weight: 800;
       color: #0f172a;
       letter-spacing: -0.02em;
@@ -2091,52 +2110,87 @@ select.te-cell {
 
   &__lines {
     flex: 1;
-    padding: 14px 20px;
+    max-height: 60vh;
+    overflow-y: auto;
+    padding: 10px 16px;
   }
 
   &__desc {
-    margin: 0 0 10px;
-    font-size: 12.5px;
+    margin: 0 0 8px;
+    font-size: 11.5px;
     color: #64748b;
-    line-height: 1.55;
+    line-height: 1.5;
   }
 
   &__kv {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 7px 12px;
-    margin: 4px 0;
+    gap: 10px;
+    padding: 5px 10px;
+    margin: 3px 0;
     background: #f8fafc;
-    border-radius: 8px;
+    border-radius: 7px;
     border-left: 3px solid #e2e8f0;
+    transition: background-color 0.15s;
+
+    &:hover {
+      background: #f1f5f9;
+    }
   }
 
   &__kv-k {
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 700;
     color: #334155;
   }
 
   &__kv-v {
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 600;
     color: #475569;
     font-variant-numeric: tabular-nums;
+    text-align: right;
   }
 
   &__foot {
-    margin: 10px 0 0;
-    font-size: 11px;
+    margin: 8px 0 0;
+    font-size: 10px;
     color: #94a3b8;
     font-style: italic;
+    line-height: 1.4;
+  }
+
+  &__callout {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    margin: 8px 0;
+    padding: 8px 10px;
+    background: #fffbeb;
+    border: 1px solid #fde68a;
+    border-left: 3px solid #d97706;
+    border-radius: 9px;
+    font-size: 11px;
+    font-weight: 600;
+    color: #92400e;
+    line-height: 1.45;
+    animation: te-pop-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    svg {
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+      margin-top: 1px;
+      color: #d97706;
+    }
   }
 
   &__actions {
     display: flex;
     justify-content: flex-end;
     gap: 8px;
-    padding: 14px 20px;
+    padding: 10px 16px;
     border-top: 1px solid #f1f5f9;
     background: #fafafa;
   }
@@ -2204,11 +2258,11 @@ select.te-cell {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 8px 20px;
-  min-width: 90px;
-  border-radius: 8px;
+  padding: 7px 16px;
+  min-width: 76px;
+  border-radius: 7px;
   border: none;
-  font-size: 12.5px;
+  font-size: 12px;
   font-weight: 700;
   cursor: pointer;
   transition:
@@ -2296,12 +2350,171 @@ select.te-cell {
   &--disbursement {
     background: linear-gradient(135deg, #0284c7, #0369a1);
   }
+
+  &--action {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+  }
 }
 
 .te-confirm-icon {
   font-size: 20px;
 }
 
+// ── Account Actions popup ─────────────────────────────────────────────────────
+.te-aa-box {
+  width: 460px;
+}
+
+.te-aa-account {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  margin-bottom: 4px;
+
+  &__no {
+    font-family: 'Courier New', monospace;
+    font-size: 13px;
+    font-weight: 700;
+    color: #1e40af;
+    letter-spacing: 0.03em;
+  }
+
+  &__name {
+    font-size: 13px;
+    font-weight: 600;
+    color: #0d1b2a;
+  }
+}
+
+.te-aa-check {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px;
+  border: 1.5px solid #fecaca;
+  background: #fef2f2;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+
+  &:hover {
+    border-color: #f87171;
+  }
+
+  input {
+    margin-top: 2px;
+    width: 16px;
+    height: 16px;
+    accent-color: #dc2626;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  span {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  strong {
+    font-size: 13px;
+    font-weight: 700;
+    color: #991b1b;
+  }
+
+  small {
+    font-size: 11.5px;
+    color: #b91c1c;
+    line-height: 1.4;
+  }
+}
+
+.te-aa-calc {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 8px;
+  font-size: 13px;
+
+  &--loading,
+  &--error {
+    display: block;
+    font-size: 12.5px;
+    font-weight: 600;
+    text-align: center;
+    padding: 14px 12px;
+  }
+
+  &--loading {
+    background: #f8fafc;
+    border-color: #e2e8f0;
+    color: #64748b;
+  }
+
+  &--error {
+    background: #fef2f2;
+    border-color: #fecaca;
+    color: #b91c1c;
+  }
+
+  &__row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #166534;
+
+    &--total {
+      margin-top: 4px;
+      padding-top: 8px;
+      border-top: 1.5px dashed #bbf7d0;
+      font-weight: 800;
+      font-size: 15px;
+      color: #15803d;
+    }
+  }
+
+  &__note {
+    margin-top: 4px;
+    font-size: 11px;
+    line-height: 1.45;
+    color: #4d7c56;
+  }
+
+  &__warn {
+    margin-top: 4px;
+    padding: 7px 9px;
+    background: #fffbeb;
+    border: 1px solid #fde68a;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1.45;
+    color: #92400e;
+  }
+}
+
+.te-aa-next {
+  margin-top: 4px;
+  padding: 9px 11px;
+  background: #eef2ff;
+  border: 1px solid #c7d2fe;
+  border-radius: 7px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #3730a3;
+
+  strong {
+    font-weight: 700;
+  }
+}
+
 .te-confirm-body {
   padding: 16px 20px;
   display: flex;
@@ -3068,6 +3281,21 @@ select.te-cell {
   border-radius: 10px;
   box-shadow: 0 1px 4px rgb(16 185 129 / 12%);
 
+  /* A closure is destructive, so it must not read like the ordinary green "all good" banner. */
+  &--closure {
+    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
+    border-color: #a5b4fc;
+    box-shadow: 0 1px 4px rgb(79 70 229 / 14%);
+
+    .ws-withdrawal-banner__icon {
+      color: #4f46e5;
+    }
+
+    .ws-withdrawal-banner__title {
+      color: #3730a3;
+    }
+  }
+
   &--loading {
     background: #f8fafc;
     border-color: #cbd5e1;
@@ -3156,3 +3384,67 @@ select.te-cell {
     transform: rotate(360deg);
   }
 }
+
+.ws-dd-unconfigured-banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 10px 16px;
+  padding: 12px 16px;
+  background: #fffbeb;
+  border: 1.5px solid #fcd34d;
+  border-radius: 8px;
+  color: #92400e;
+  font-size: 13px;
+
+  mat-icon {
+    color: #d97706;
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+  }
+
+  &__text {
+    flex: 1;
+    line-height: 1.4;
+
+    strong {
+      color: #78350f;
+    }
+  }
+}
+
+.te-dd-issue-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(135deg, #0284c7, #0ea5e9);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 7px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgb(2 132 199 / 35%);
+  transition: all 0.15s ease-in-out;
+  letter-spacing: 0.2px;
+
+  &:hover:not(:disabled) {
+    background: linear-gradient(135deg, #0369a1, #0284c7);
+    box-shadow: 0 3px 8px rgb(2 132 199 / 50%);
+    transform: translateY(-1px);
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(0);
+  }
+
+  &:disabled {
+    background: #cbd5e1;
+    color: #64748b;
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+}

src/app/cashier/vault-position/vault-position.component.html

@@ -0,0 +1,134 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="pg">
+  <header class="pg-head">
+    <div>
+      <div class="pg-eyebrow">BRANCH OPERATIONS · VAULT POSITION</div>
+      <h1 class="pg-title">Vault Position</h1>
+      <p class="pg-sub">
+        Denomination-wise stock a vault currently holds — the branch's own opening breakdown, plus whatever has been
+        settled back into it, minus whatever it has handed out to cashiers since.
+      </p>
+    </div>
+  </header>
+
+  <div class="pg-toolbar pg-toolbar--mat">
+    @if (tellers.length === 1) {
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <mat-label>Vault</mat-label>
+        <input matInput type="text" [value]="tellers[0].name" readonly />
+      </mat-form-field>
+    } @else {
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <mat-label>Vault (optional)</mat-label>
+        <mat-select [value]="selectedTellerId" (selectionChange)="selectedTellerId = $event.value">
+          <mat-option [value]="null">All Vaults</mat-option>
+          @for (t of tellers; track t.id) {
+            <mat-option [value]="t.id">{{ t.name }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    }
+
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>As of Date</mat-label>
+      <input matInput type="date" [value]="asOfDate" (change)="asOfDate = $any($event.target).value" />
+    </mat-form-field>
+
+    <button type="button" class="pg-btn pg-btn--primary" (click)="load()" [disabled]="loading">
+      <mat-icon>bar_chart</mat-icon> Load Position
+    </button>
+  </div>
+
+  @if (errorMsg) {
+    <div class="pg-empty" style="color: #dc2626">{{ errorMsg }}</div>
+  }
+
+  @if (loading) {
+    <div class="pg-empty">Loading…</div>
+  }
+
+  @for (pos of results; track pos.tellerId) {
+    <div class="pg-card" style="margin-bottom: 14px">
+      <div class="pos-header">
+        <span class="pos-cashier">{{ pos.tellerName || labelForTeller(pos.tellerId) }}</span>
+        <span class="pos-total">₹{{ pos.totalAmount | number: '1.2-2' }}</span>
+      </div>
+
+      @if (!pos.hasBreakdown) {
+        <div class="pg-empty">
+          No denomination breakdown was recorded for this vault's opening day on or before {{ pos.asOfDate }}. Open (or
+          re-open) the business day with a note/coin count to start tracking its stock.
+        </div>
+      } @else {
+        @if (pos.anchorDate && pos.anchorDate !== pos.asOfDate) {
+          <div class="pg-empty" style="padding: 8px 14px; text-align: left">
+            Carried forward from the opening breakdown recorded on {{ pos.anchorDate }}.
+          </div>
+        }
+
+        @if (pos.denominations.length === 0) {
+          <div class="pg-empty">No stock — everything opened for this vault has been handed out.</div>
+        }
+
+        @if (notes(pos).length > 0) {
+          <div class="pos-section-label">Notes</div>
+          <table class="pg-table">
+            <thead>
+              <tr>
+                <th>Denomination</th>
+                <th style="text-align: center">Current Count</th>
+                <th class="num">Amount</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (d of notes(pos); track d.denominationId) {
+                <tr>
+                  <td>
+                    <span class="pg-chip">₹{{ d.denominationValue }}</span>
+                  </td>
+                  <td style="text-align: center; font-weight: 700">{{ d.count }}</td>
+                  <td class="num">₹{{ d.amount | number: '1.2-2' }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        }
+
+        @if (coins(pos).length > 0) {
+          <div class="pos-section-label pos-section-label--coin">Coins</div>
+          <table class="pg-table">
+            <thead>
+              <tr>
+                <th>Denomination</th>
+                <th style="text-align: center">Current Count</th>
+                <th class="num">Amount</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (d of coins(pos); track d.denominationId) {
+                <tr>
+                  <td>
+                    <span class="pg-chip pg-chip--coin">₹{{ d.denominationValue }}</span>
+                  </td>
+                  <td style="text-align: center; font-weight: 700">{{ d.count }}</td>
+                  <td class="num">₹{{ d.amount | number: '1.2-2' }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        }
+      }
+    </div>
+  }
+
+  @if (!loading && results.length === 0 && !errorMsg) {
+    <div class="pg-empty">Select filters and click "Load Position".</div>
+  }
+</div>

src/app/cashier/vault-position/vault-position.component.ts

@@ -0,0 +1,115 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
+import { of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { CashierService } from '../cashier.service';
+
+interface DenomRow {
+  denominationId: number;
+  denominationValue: number;
+  kind: string;
+  count: number;
+  amount: number;
+}
+interface VaultPos {
+  tellerId: number;
+  tellerName?: string;
+  asOfDate: string;
+  anchorDate?: string;
+  hasBreakdown: boolean;
+  totalAmount: number;
+  denominations: DenomRow[];
+}
+
+/**
+ * Denomination-wise stock a vault (teller) is currently holding — "how much of what does the bank
+ * have", the same question cashier-position answers for a cashier's own float.
+ */
+@Component({
+  selector: 'mifosx-vault-position',
+  templateUrl: './vault-position.component.html',
+  styleUrls: [
+    '../cashier-shared.scss',
+    '../cashier-position/cashier-position.component.scss'
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule
+  ]
+})
+export class VaultPositionComponent implements OnInit {
+  private service = inject(CashierService);
+
+  tellers: { id: number; name: string }[] = [];
+  selectedTellerId: number | null = null;
+  asOfDate = '';
+  loading = false;
+
+  results: VaultPos[] = [];
+  errorMsg = '';
+
+  ngOnInit(): void {
+    const d = new Date();
+    this.asOfDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+
+    this.service
+      .getTellers()
+      .pipe(catchError(() => of([] as any[])))
+      .subscribe((list) => {
+        this.tellers = (list || []).map((t: any) => ({ id: t.id, name: t.name }));
+        if (this.tellers.length === 1) {
+          this.selectedTellerId = this.tellers[0].id;
+        }
+        this.load();
+      });
+  }
+
+  load(): void {
+    this.loading = true;
+    this.results = [];
+    this.errorMsg = '';
+    this.service
+      .vaultPosition(this.selectedTellerId ?? undefined, this.asOfDate)
+      .pipe(catchError(() => of(null)))
+      .subscribe((data: any) => {
+        this.loading = false;
+        if (!data) {
+          this.errorMsg = 'Failed to load vault position.';
+          return;
+        }
+        const arr: any[] = Array.isArray(data) ? data : [data];
+        this.results = arr;
+      });
+  }
+
+  labelForTeller(id: number): string {
+    const t = this.tellers.find((x) => x.id === id);
+    return t ? t.name : `Vault #${id}`;
+  }
+
+  notes(pos: VaultPos): DenomRow[] {
+    return pos.denominations.filter((d) => d.kind !== 'coin');
+  }
+
+  coins(pos: VaultPos): DenomRow[] {
+    return pos.denominations.filter((d) => d.kind === 'coin');
+  }
+}

src/app/cashier/voucher-report/voucher-report.component.html

@@ -0,0 +1,237 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="pg">
+  <header class="pg-head vr-no-print">
+    <div>
+      <div class="pg-eyebrow">CASHIER · REPORT</div>
+      <h1 class="pg-title">{{ title }}</h1>
+      <p class="pg-sub">{{ subtitle }}</p>
+    </div>
+    <div class="pg-toolbar">
+      <label class="pg-field">
+        <span>Period</span>
+        <select [(ngModel)]="period" (change)="load()">
+          <option value="DAY">Day</option>
+          <option value="MONTH">Month</option>
+        </select>
+      </label>
+      <label class="pg-field">
+        <span>{{ period === 'DAY' ? 'Date' : 'Month of' }}</span>
+        <input type="date" [(ngModel)]="anchor" (change)="load()" />
+      </label>
+      @if (report?.canSeeAllUsers) {
+        <label class="pg-field">
+          <span>User</span>
+          <input
+            type="text"
+            [(ngModel)]="usernameFilter"
+            (keyup.enter)="load()"
+            placeholder="All users"
+            autocomplete="off"
+          />
+        </label>
+      }
+      <button type="button" class="pg-btn pg-btn--primary" (click)="load()" [disabled]="loading">
+        <mat-icon>refresh</mat-icon> Run
+      </button>
+      @if (report && count > 0) {
+        <button type="button" class="pg-btn" (click)="print()"><mat-icon>print</mat-icon> Print</button>
+      }
+    </div>
+  </header>
+
+  @if (error) {
+    <div class="pg-alert pg-alert--error vr-no-print">{{ error }}</div>
+  }
+
+  @if (loading) {
+    <div class="pg-empty vr-no-print">Loading…</div>
+  }
+
+  @if (report && !loading) {
+    <div class="vr-period">
+      {{ report.from | date: 'dd MMM yyyy' }}
+      @if (report.from !== report.to) {
+        — {{ report.to | date: 'dd MMM yyyy' }}
+      }
+      · {{ count }} {{ noun }}{{ count === 1 ? '' : 's' }} · ₹{{ totalAmount | number: '1.2-2' }}
+      @if (report.username) {
+        · {{ report.username }}
+      }
+      <!-- Said plainly rather than left to be inferred from a missing filter: a cashier should know
+           this is their own work and not the branch's. -->
+      @if (!report.canSeeAllUsers) {
+        <span class="vr-scope-note">Your own vouchers</span>
+      }
+      <!-- The total on a cash register means something narrower than the whole voucher book, so the
+           screen says which one it is instead of leaving the figure ambiguous. -->
+      @if (cashOnly) {
+        <span class="vr-scope-note">Cash only</span>
+      }
+    </div>
+
+    <!-- A voucher with no CR/DR prefix belongs to neither report. Say so, so the two reports not
+         adding up to the day's total is explained rather than left to be puzzled over. -->
+    @if (unclassifiedCount > 0) {
+      <div class="pg-alert vr-no-print">
+        {{ unclassifiedCount }} voucher{{ unclassifiedCount === 1 ? '' : 's' }} in this period
+        {{ unclassifiedCount === 1 ? 'carries' : 'carry' }} no CR or DR prefix, so
+        {{ unclassifiedCount === 1 ? 'it appears' : 'they appear' }} on neither the Received nor the Payment report.
+      </div>
+    }
+
+    <!-- Which part of the total has notes and coins counted behind it. Shown on the cash register
+         as well as the full one: a voucher with no breakdown is still real money, so it stays in
+         the total, and what the drawer can be checked against is stated instead of assumed. -->
+    @if (uncountedCount > 0) {
+      <div class="pg-alert vr-no-print">
+        {{ uncountedCount }} of these {{ noun }}s {{ uncountedCount === 1 ? 'has' : 'have' }} no denomination breakdown
+        recorded, totalling ₹{{ uncountedTotal | number: '1.2-2' }}. Some registers pay out without counting notes
+        against the voucher, so these are still cash — ₹{{ countedTotal | number: '1.2-2' }} of the total has a
+        breakdown behind it.
+      </div>
+    }
+
+    <!-- Explains the blank Debit/Credit cells instead of leaving them looking like lost data. -->
+    @if (missingSidesCount > 0) {
+      <div class="pg-alert vr-no-print">
+        {{ missingSidesCount }} of these {{ noun }}s {{ missingSidesCount === 1 ? 'has' : 'have' }} no debit or credit
+        recorded. The sides are attached when a request is approved, so vouchers raised before that step was added keep
+        their number and amount but show no accounts. Newly raised {{ noun }}s carry both sides.
+      </div>
+    }
+
+    @if (count === 0) {
+      <div class="pg-empty">No {{ noun }}s were raised in this period.</div>
+    } @else {
+      <div class="vr-summaries">
+        <div class="pg-card">
+          <div class="pos-section-label">By type</div>
+          <table class="pg-table">
+            <thead>
+              <tr>
+                <th>Type</th>
+                <th class="num">Count</th>
+                <th class="num">Amount</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (row of byType; track row.type) {
+                <tr>
+                  <td>{{ row.type }}</td>
+                  <td class="num">{{ row.count }}</td>
+                  <td class="num">{{ row.total | number: '1.2-2' }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Only worth showing to someone who can see more than one person's work. -->
+        @if (report.canSeeAllUsers) {
+          <div class="pg-card">
+            <div class="pos-section-label">By user</div>
+            <table class="pg-table">
+              <thead>
+                <tr>
+                  <th>User</th>
+                  <th class="num">Count</th>
+                  <th class="num">Amount</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (row of byUser; track row.username) {
+                  <tr>
+                    <td>{{ row.username }}</td>
+                    <td class="num">{{ row.count }}</td>
+                    <td class="num">{{ row.total | number: '1.2-2' }}</td>
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        }
+      </div>
+
+      <div class="pg-card">
+        <div class="pos-section-label">{{ isReceived ? 'Receipts' : 'Payments' }}</div>
+        <table class="pg-table vr-rows">
+          <thead>
+            <tr>
+              <th>Voucher No</th>
+              <th>Type</th>
+              <th>Debit</th>
+              <th>Credit</th>
+              <th class="num">Amount</th>
+              <th>User</th>
+              <!-- Two dates, not one, on the system register.
+                   A voucher's timestamp is the minute it was written; the posting behind it carries
+                   the business date. A nightly run finishing after midnight writes today's voucher
+                   for yesterday's work, so a reader opening this screen today is looking at last
+                   night's postings — and without the ledger date they would take the timestamp for
+                   the day the money moved. -->
+              @if (systemOnly) {
+                <th>Ledger date</th>
+              }
+              <th>Time</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (row of rows; track row.voucherNo) {
+              <tr>
+                <td>
+                  {{ row.voucherNo }}
+                  @if (row.verificationStatus === 'EXCEPTION') {
+                    <mat-icon class="vr-flag" title="An exception was raised against this voucher"
+                      >error_outline</mat-icon
+                    >
+                  }
+                </td>
+                <td>{{ row.voucherType || '—' }}</td>
+                <!-- A voucher raised before its sides were recorded has neither. Say that once,
+                     across both cells, rather than showing two dashes that read as "nowhere". -->
+                @if (!hasSides(row)) {
+                  <td colspan="2" class="vr-nosides">Sides not recorded</td>
+                } @else {
+                  <td>
+                    <div class="vr-party">{{ row.debitParty || '—' }}</div>
+                    @if (row.debitAccount) {
+                      <div class="vr-acct">{{ row.debitAccount }}</div>
+                    }
+                  </td>
+                  <td>
+                    <div class="vr-party">{{ row.creditParty || '—' }}</div>
+                    @if (row.creditAccount) {
+                      <div class="vr-acct">{{ row.creditAccount }}</div>
+                    }
+                    <!-- A DD with charges, or a compound journal, has sides this row does not show. -->
+                    @if (row.extraLines > 0) {
+                      <div class="vr-more">+{{ row.extraLines }} more on voucher</div>
+                    }
+                  </td>
+                }
+                <td class="num">{{ row.amount | number: '1.2-2' }}</td>
+                <td>{{ row.username || '—' }}</td>
+                @if (systemOnly) {
+                  <td class="vr-ledgerdate" [class.vr-ledgerdate--prior]="row.postedAfterClose">
+                    {{ row.ledgerDate ? (row.ledgerDate | date: 'dd MMM yyyy') : '—' }}
+                    @if (row.postedAfterClose) {
+                      <span class="vr-priorflag" title="Posted after that day had closed">after close</span>
+                    }
+                  </td>
+                }
+                <td>{{ row.createdAt | date: 'dd MMM, HH:mm' }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    }
+  }
+</div>

src/app/cashier/voucher-report/voucher-report.component.scss

@@ -0,0 +1,94 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/* Page chrome, cards and tables come from cashier-shared.scss. Only the register itself is here. */
+
+.vr-period {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+  font-size: 13px;
+  color: #374151;
+}
+
+.vr-scope-note {
+  padding: 2px 8px;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 999px;
+  color: #1e40af;
+  font-size: 11px;
+}
+
+/* The two summaries sit side by side where there is room and stack where there is not, so a
+   manager reads the totals before the rows on any screen. */
+.vr-summaries {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 14px;
+  margin-bottom: 14px;
+}
+
+.vr-rows {
+  .vr-flag {
+    margin-left: 4px;
+    font-size: 15px;
+    width: 15px;
+    height: 15px;
+    color: #b91c1c;
+    vertical-align: text-bottom;
+  }
+
+  .vr-party {
+    color: #111827;
+  }
+
+  .vr-acct,
+  .vr-more {
+    margin-top: 2px;
+    font-size: 11px;
+    color: #6b7280;
+  }
+
+  // Spans the Debit and Credit cells for a voucher raised before its sides were recorded.
+  .vr-nosides {
+    font-size: 11px;
+    font-style: italic;
+    color: #9ca3af;
+  }
+}
+
+/* Printing a report should put the register on paper — the filters are how you reached it. */
+@media print {
+  .vr-no-print {
+    display: none !important;
+  }
+}
+
+/* The ledger date on the system register. Marked when it differs from the day the voucher was
+   written: that is the whole reason the column exists, and a date the reader has to compare against
+   the Time column by eye is a date they will misread. */
+.vr-ledgerdate {
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.vr-ledgerdate--prior {
+  color: #5b21b6;
+}
+
+.vr-priorflag {
+  display: block;
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #7c3aed;
+}

src/app/cashier/voucher-report/voucher-report.component.ts

@@ -0,0 +1,351 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { catchError, of } from 'rxjs';
+import { CashierService } from '../cashier.service';
+
+/**
+ * Which side of the register a screen shows.
+ *
+ * 'CR' is the Received report (money in), 'DR' the Payment report (money out). Set from the route,
+ * so the two screens are the same component pointed at opposite sides.
+ */
+export type VoucherSide = 'CR' | 'DR' | 'ALL';
+
+/** One voucher as the register shows it: the number, the two sides, and who raised it. */
+interface VoucherRow {
+  voucherNo: string;
+  voucherType: string | null;
+  amount: number | null;
+  createdAt: string | null;
+  /** The business date the posting belongs to, which is not always the day it was written. */
+  ledgerDate?: string | null;
+  /** True when the voucher was written after the day it posts against had already closed. */
+  postedAfterClose?: boolean;
+  userId: number | null;
+  username: string | null;
+  branchName: string | null;
+  verificationStatus: string | null;
+  debitParty: string | null;
+  debitAccount: string | null;
+  creditParty: string | null;
+  creditAccount: string | null;
+  /** Sides beyond the one debit and one credit shown — a DD's charges, a compound journal. */
+  extraLines: number;
+  /**
+   * Whether a denomination breakdown was recorded against this voucher.
+   *
+   * True proves cash was counted. False does not prove the opposite: several registers pay real
+   * money out without recording a breakdown, so this marks a row as unconfirmed, not as non-cash.
+   */
+  denominationCounted: boolean;
+}
+
+interface VoucherReport {
+  from: string;
+  to: string;
+  username: string | null;
+  /** Set by the server from the caller's roles; a cashier is never offered the user filter. */
+  canSeeAllUsers: boolean;
+  /** Whether the server restricted the register to cash movements. */
+  cashOnly: boolean;
+  vouchers: VoucherRow[];
+  count: number;
+  totalAmount: number;
+}
+
+/**
+ * The vouchers raised over a day or a month, one row each.
+ *
+ * A cashier sees their own work; a clerk, head cashier or manager sees everyone's and can narrow to
+ * one user. That is decided by the server, not here — this screen only shows or hides the filter.
+ */
+@Component({
+  selector: 'mifosx-voucher-report',
+  templateUrl: './voucher-report.component.html',
+  styleUrls: [
+    '../cashier-shared.scss',
+    './voucher-report.component.scss'
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIconModule
+  ]
+})
+export class VoucherReportComponent implements OnInit {
+  private service = inject(CashierService);
+  private route = inject(ActivatedRoute);
+
+  /** Day is the working default; a month is what you ask for at a close. */
+  period: 'DAY' | 'MONTH' = 'DAY';
+  /** Anchor date — the day itself, or any day inside the month wanted. */
+  anchor = this.todayIso();
+  usernameFilter = '';
+  typeFilter = '';
+
+  /** Which side this screen is: Received (CR) or Payment (DR). Comes from the route's data. */
+  side: VoucherSide = 'CR';
+
+  /**
+   * Whether this screen is the cash register rather than the whole voucher register.
+   *
+   * A cashier handles notes and coins, so entries that cannot be cash — an interest posting, a
+   * clearing settlement, a cheque book fee — are left out, and everything that could have crossed
+   * the counter stays in. The filter errs towards keeping a row: a book entry on the register can
+   * be seen and recognised, whereas cash that never appears is invisible until it turns up as an
+   * unexplained difference at the end of the day.
+   */
+  cashOnly = false;
+
+  /**
+   * Whether this register is the counter's own — only the people who hold a drawer.
+   *
+   * These two screens reconcile the counter: what came in over it and what went out. Everyone
+   * else's work is their own to account for, and each person reads it on My Vouchers. Mixed in here
+   * it buried the cashier rows the registers exist for and left the totals matching no drawer.
+   */
+  cashiersOnly = false;
+
+  /**
+   * Whether this register is the system's own postings rather than anybody's work.
+   *
+   * Interest a nightly run credited, a charge taken from a balance, an escheat, a journal keyed
+   * straight to the ledger. These belong to no member of staff, so My Vouchers cannot show them —
+   * it is scoped to the reader — and the two counter registers deliberately exclude them. That left
+   * no screen answering "what did the system post last night".
+   */
+  systemOnly = false;
+
+  report: VoucherReport | null = null;
+  loading = false;
+  error: string | null = null;
+
+  ngOnInit(): void {
+    this.side = (this.route.snapshot.data['side'] as VoucherSide) ?? 'CR';
+    this.cashOnly = this.route.snapshot.data['cashOnly'] === true;
+    this.cashiersOnly = this.route.snapshot.data['cashiersOnly'] === true;
+    this.systemOnly = this.route.snapshot.data['systemOnly'] === true;
+    this.load();
+  }
+
+  get isReceived(): boolean {
+    return this.side === 'CR';
+  }
+
+  get title(): string {
+    if (this.systemOnly) {
+      return 'System Vouchers';
+    }
+    return this.isReceived ? 'Received Report' : 'Payment Report';
+  }
+
+  get subtitle(): string {
+    if (this.systemOnly) {
+      return 'What the system posted on its own — interest, charges, escheats and journals. Nobody raised these, so they appear on no one’s own list.';
+    }
+    // Said plainly, because a register that silently omits the reader's own entries is worse than
+    // one that explains why: their work is on My Vouchers, and the line points them there.
+    if (this.cashiersOnly) {
+      return this.isReceived
+        ? 'Cash taken in at the counter by each cashier. Other staff read their own work on My Vouchers.'
+        : 'Cash paid out at the counter by each cashier. Other staff read their own work on My Vouchers.';
+    }
+    if (this.cashOnly) {
+      return this.isReceived
+        ? 'Cash taken in over a day or a month, and who took it — book entries left out.'
+        : 'Cash paid out over a day or a month, and who paid it — book entries left out.';
+    }
+    return this.isReceived
+      ? 'Every receipt voucher raised over a day or a month — money taken in, and who took it.'
+      : 'Every payment voucher raised over a day or a month — money paid out, and who paid it.';
+  }
+
+  /** The word for one row on this side, for counts and the empty state. */
+  get noun(): string {
+    if (this.systemOnly) {
+      return 'posting';
+    }
+    return this.isReceived ? 'receipt' : 'payment';
+  }
+
+  load(): void {
+    this.loading = true;
+    this.error = null;
+
+    const { from, to } = this.range();
+    this.service
+      .voucherReport(
+        from,
+        to,
+        this.usernameFilter.trim() || undefined,
+        this.typeFilter.trim() || undefined,
+        this.cashOnly,
+        this.cashiersOnly,
+        this.systemOnly
+      )
+      .pipe(
+        catchError((err: any) => {
+          this.error =
+            err?.error?.errors?.[0]?.defaultUserMessage ??
+            err?.error?.developerMessage ??
+            'The voucher report could not be loaded.';
+          return of(null);
+        })
+      )
+      .subscribe((res: VoucherReport | null) => {
+        this.loading = false;
+        this.report = res;
+      });
+  }
+
+  /** The period the anchor date names: that day, or the whole calendar month around it. */
+  private range(): { from: string; to: string } {
+    if (this.period === 'DAY') {
+      return { from: this.anchor, to: this.anchor };
+    }
+    const [
+      year,
+      month
+    ] = this.anchor.split('-').map(Number);
+    // Day 0 of the next month is the last day of this one, which is how a 28/30/31-day month is
+    // ended correctly without a table of month lengths.
+    const lastDay = new Date(year, month, 0).getDate();
+    const mm = String(month).padStart(2, '0');
+    return { from: `${year}-${mm}-01`, to: `${year}-${mm}-${String(lastDay).padStart(2, '0')}` };
+  }
+
+  private todayIso(): string {
+    const now = new Date();
+    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+  }
+
+  /**
+   * The rows belonging to this screen's side.
+   *
+   * The side is read off the first segment of the voucher number — `CR/001/2608/0003` — which the
+   * server stamps when it raises the voucher: a deposit credits the member and gets CR, everything
+   * that takes money out gets DR. That prefix is the authoritative record of the side, so it is
+   * matched directly rather than re-deriving the side from the voucher type here — a new type added
+   * on the server then lands on the correct report with no change needed on this screen.
+   */
+  get rows(): VoucherRow[] {
+    const all = this.report?.vouchers ?? [];
+    return this.side === 'ALL' ? all : all.filter((row) => this.sideOf(row) === this.side);
+  }
+
+  /**
+   * Whether a voucher has its two sides recorded against it.
+   *
+   * The registers raise a voucher when the request is made and only attach its sides once it is
+   * approved and posted, so a voucher raised before that step existed carries a number but no
+   * lines. Those rows are labelled rather than shown as an empty dash, which reads like the money
+   * went nowhere.
+   */
+  hasSides(row: VoucherRow): boolean {
+    return !!(row.debitParty || row.creditParty);
+  }
+
+  /** How many rows on this side are missing their debit/credit lines. */
+  get missingSidesCount(): number {
+    return this.rows.filter((row) => !this.hasSides(row)).length;
+  }
+
+  /** A voucher's side, from its number's prefix. Null when the number is missing or unrecognised. */
+  private sideOf(row: VoucherRow): VoucherSide | null {
+    const no = (row.voucherNo ?? '').toUpperCase();
+    if (no.startsWith('CR/')) {
+      return 'CR';
+    }
+    if (no.startsWith('DR/')) {
+      return 'DR';
+    }
+    return null;
+  }
+
+  /** How many rows on this side — not the server's count, which spans both. */
+  get count(): number {
+    return this.rows.length;
+  }
+
+  /** Total for this side only. */
+  get totalAmount(): number {
+    return this.rows.reduce((sum, row) => sum + (row.amount ?? 0), 0);
+  }
+
+  /**
+   * The part of this side's total whose notes and coins were actually counted.
+   *
+   * Always at most `totalAmount`: a voucher can be real cash and still be missing its breakdown,
+   * because the register that raised it records none. So this is the confirmed part of the cash,
+   * not the whole of it, and the gap is reported rather than treated as book entries.
+   */
+  get countedTotal(): number {
+    return this.rows.filter((row) => row.denominationCounted).reduce((sum, row) => sum + (row.amount ?? 0), 0);
+  }
+
+  /** Rows carrying no denomination breakdown — unconfirmed against the drawer, not non-cash. */
+  get uncountedCount(): number {
+    return this.rows.filter((row) => !row.denominationCounted).length;
+  }
+
+  /** How much of this side's total has no note-and-coin breakdown behind it. */
+  get uncountedTotal(): number {
+    return this.totalAmount - this.countedTotal;
+  }
+
+  /**
+   * Vouchers whose number carries neither prefix, so they appear on neither report.
+   *
+   * Counted and shown rather than silently dropped: a voucher that vanishes from both sides of the
+   * register is exactly the kind of thing a cashier must be told about, not left to discover when
+   * the two reports do not add up to the day.
+   */
+  get unclassifiedCount(): number {
+    const all = this.report?.vouchers ?? [];
+    return all.filter((row) => this.sideOf(row) === null).length;
+  }
+
+  /** Totals per user, for the summary a manager reads before the rows. */
+  get byUser(): { username: string; count: number; total: number }[] {
+    const rows = this.rows;
+    const tally = new Map<string, { username: string; count: number; total: number }>();
+    for (const row of rows) {
+      const key = row.username ?? '—';
+      const entry = tally.get(key) ?? { username: key, count: 0, total: 0 };
+      entry.count += 1;
+      entry.total += row.amount ?? 0;
+      tally.set(key, entry);
+    }
+    return [...tally.values()].sort((a, b) => b.total - a.total);
+  }
+
+  /** Totals per voucher type — deposits against withdrawals against journals. */
+  get byType(): { type: string; count: number; total: number }[] {
+    const rows = this.rows;
+    const tally = new Map<string, { type: string; count: number; total: number }>();
+    for (const row of rows) {
+      const key = row.voucherType ?? '—';
+      const entry = tally.get(key) ?? { type: key, count: 0, total: 0 };
+      entry.count += 1;
+      entry.total += row.amount ?? 0;
+      tally.set(key, entry);
+    }
+    return [...tally.values()].sort((a, b) => b.total - a.total);
+  }
+
+  print(): void {
+    window.print();
+  }
+}

src/app/chequebook/cheque-book-detail/cheque-book-detail.component.html

@@ -9,7 +9,12 @@
 <div class="container">
   <div class="page-header">
     <h2>{{ 'labels.inputs.Cheque Book' | translate }} #{{ book.id }}</h2>
-    <button mat-raised-button [routerLink]="['/chequebook', 'books']">{{ 'labels.buttons.Back' | translate }}</button>
+    <div>
+      <button mat-stroked-button (click)="printIssuanceSlip()">
+        <fa-icon icon="print"></fa-icon> {{ 'labels.buttons.Print' | translate }}
+      </button>
+      <button mat-raised-button [routerLink]="['/chequebook', 'books']">{{ 'labels.buttons.Back' | translate }}</button>
+    </div>
   </div>
 
   <mat-card class="info-card">

src/app/chequebook/cheque-book-detail/cheque-book-detail.component.ts

@@ -20,6 +20,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 /** Custom Services */
 import { ChequeBookService } from '../chequebook.service';
 import { LeafDetailDialogComponent } from './leaf-detail-dialog/leaf-detail-dialog.component';
+import { buildChequeIssuanceSlipPdf } from './cheque-issuance-slip-pdf';
 
 type LeafAction = 'stoppayment' | 'revokestoppayment' | 'reportlost' | 'cancelleaf' | 'markused' | 'return';
 
@@ -85,6 +86,11 @@ export class ChequeBookDetailComponent implements OnInit {
     this.dialog.open(LeafDetailDialogComponent, { data: leaf, width: '420px' });
   }
 
+  printIssuanceSlip(): void {
+    const doc = buildChequeIssuanceSlipPdf(this.book);
+    doc.save(`cheque-book-issuance-${this.book.id}.pdf`);
+  }
+
   startAction(action: LeafAction): void {
     this.activeAction = this.activeAction === action ? null : action;
     this.actionForm.reset();

src/app/chequebook/cheque-book-detail/cheque-issuance-slip-pdf.ts

@@ -0,0 +1,120 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/**
+ * A one-page issuance-slip PDF for a cheque book already issued to an account — the "Cheque Book"
+ * print action was previously a dead menu stub. This is a record of the issuance itself (which
+ * book/series, leaf range, issued-to account, issue date, branch), not a physical cheque leaf.
+ */
+
+import { jsPDF } from 'jspdf';
+
+const BANK_NAME = 'Nexora Co-operative Bank Ltd.';
+const C_TEXT: [number, number, number] = [
+  15,
+  23,
+  42
+];
+const C_MUTED: [number, number, number] = [
+  100,
+  116,
+  139
+];
+const C_BORDER: [number, number, number] = [
+  226,
+  232,
+  240
+];
+const ACCENT: [number, number, number] = [
+  30,
+  64,
+  175
+];
+
+function formatDate(iso: string | null | undefined): string {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  if (isNaN(d.getTime())) return String(iso);
+  return d.toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
+}
+
+export interface ChequeIssuanceSlipBook {
+  id: number | string;
+  accountNo?: string;
+  clientName?: string;
+  accountType?: string;
+  officeName?: string;
+  seriesCode?: string;
+  rangeStart?: string | number;
+  rangeEnd?: string | number;
+  noOfBooks?: number;
+  status?: string;
+  issueDate?: string;
+}
+
+export function buildChequeIssuanceSlipPdf(book: ChequeIssuanceSlipBook): jsPDF {
+  const doc = new jsPDF({ unit: 'mm', format: 'a5' });
+  const pageWidth = doc.internal.pageSize.getWidth();
+  const margin = 12;
+  let y = 16;
+
+  doc.setFillColor(...ACCENT);
+  doc.rect(0, 0, pageWidth, 4, 'F');
+
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(14);
+  doc.setTextColor(...C_TEXT);
+  doc.text(BANK_NAME, margin, y);
+  y += 6;
+
+  doc.setFont('helvetica', 'normal');
+  doc.setFontSize(10);
+  doc.setTextColor(...C_MUTED);
+  doc.text('Cheque Book Issuance Slip', margin, y);
+  y += 8;
+
+  doc.setDrawColor(...C_BORDER);
+  doc.line(margin, y, pageWidth - margin, y);
+  y += 8;
+
+  const row = (label: string, value: string) => {
+    doc.setFont('helvetica', 'bold');
+    doc.setFontSize(9);
+    doc.setTextColor(...C_MUTED);
+    doc.text(label, margin, y);
+    doc.setFont('helvetica', 'normal');
+    doc.setFontSize(10.5);
+    doc.setTextColor(...C_TEXT);
+    doc.text(value, margin + 45, y);
+    y += 7;
+  };
+
+  row('Issuance ID', String(book.id ?? '—'));
+  row('Account No.', book.accountNo ?? '—');
+  row('Account Holder', book.clientName ?? '—');
+  row('Account Type', book.accountType ?? '—');
+  row('Branch', book.officeName ?? '—');
+  row('Series', book.seriesCode ?? '—');
+  row('Leaf Range', book.rangeStart != null && book.rangeEnd != null ? `${book.rangeStart} – ${book.rangeEnd}` : '—');
+  row('No. of Books', String(book.noOfBooks ?? '—'));
+  row('Status', book.status ?? '—');
+  row('Issue Date', formatDate(book.issueDate));
+
+  y += 6;
+  doc.setDrawColor(...C_BORDER);
+  doc.line(margin, y, pageWidth - margin, y);
+  y += 14;
+
+  doc.setFont('helvetica', 'normal');
+  doc.setFontSize(9);
+  doc.setTextColor(...C_MUTED);
+  doc.text('Issued by: ______________________', margin, y);
+  doc.text('Received by: ______________________', margin, y + 16);
+
+  return doc;
+}

src/app/ckyc/ckyc-reports/ckyc-sample-data.ts

@@ -12,16 +12,16 @@
  * have meaningful variety out of the box.
  */
 export const SAMPLE_CKYC_FILE = `10|24401|IN4711|MH|30|31-08-2020|V1.1|||||
-20|1|01|01|||||||||||01|||01|10078|MR|RAVI|KUMAR|SHARMA|||||||01|MR|RAJESH|KUMAR|SHARMA||MRS|SUNITA|DEVI|||M|02|IN|B-01|10-08-1985|||||||||01|02|||||02|FLAT 402, SUNRISE TOWERS|MAROL ANDHERI EAST|MUMBAI|MUMBAI|MUMBAI|MH|IN|400069|01||Y|02|FLAT 402, SUNRISE TOWERS|MAROL ANDHERI EAST|MUMBAI|MUMBAI|MUMBAI|MH|IN|400069|01||||||||||||||||9892011001|||||31-08-2020|MUMBAI MAIN|31-08-2020|01|ANJALI MEHTA|ASSISTANT MANAGER|HEAD OFFICE|4|BHARAT URBAN BANK|IN4711|1|0||0|4||||||
+20|1|01|01|||||||||||01|||01|10078|MR|RAVI|KUMAR|SHARMA|||||||01|MR|RAJESH|KUMAR|SHARMA||MRS|SUNITA|DEVI|||M|02|IN|B-01|10-08-1985|||||||||01|02|||||02|FLAT 402, SUNRISE TOWERS|MAROL ANDHERI EAST|MUMBAI|MUMBAI|MUMBAI|MH|IN|400069|01||Y|02|FLAT 402, SUNRISE TOWERS|MAROL ANDHERI EAST|MUMBAI|MUMBAI|MUMBAI|MH|IN|400069|01||||||||||||||||9892011001|||||31-08-2020|MUMBAI MAIN|31-08-2020|01|ANJALI MEHTA|ASSISTANT MANAGER|HEAD OFFICE|4|CBSNEXORA BANK|IN4711|1|0||0|4||||||
 30|1|C|AAQPS8560J||01|02|||||
 70|1|10078_Sign.jpeg|09|01|01||||
 70|1|10078_Photo.jpeg|02|01|01||||
 70|1|10078_AP.jpg|04|01|01||||
-20|2|01|01|||||||||||01|||01|10079|MRS|PRIYA||PATEL|||||||01|MR|HARISH|PATEL|||MRS|MEENA|PATEL|||F|01|IN|O-04|22-03-1990|||||||||01|02|||||02|B-12, SHIVAJI NAGAR|FC ROAD|PUNE|PUNE|PUNE|MH|IN|411005|01||Y|02|B-12, SHIVAJI NAGAR|FC ROAD|PUNE|PUNE|PUNE|MH|IN|411005|01||||||||||||||||9822055002|||||31-08-2020|PUNE FC ROAD|31-08-2020|01|VIKRAM SINGH|BRANCH MANAGER|HEAD OFFICE|4|BHARAT URBAN BANK|IN4711|1|0||0|3||||||
+20|2|01|01|||||||||||01|||01|10079|MRS|PRIYA||PATEL|||||||01|MR|HARISH|PATEL|||MRS|MEENA|PATEL|||F|01|IN|O-04|22-03-1990|||||||||01|02|||||02|B-12, SHIVAJI NAGAR|FC ROAD|PUNE|PUNE|PUNE|MH|IN|411005|01||Y|02|B-12, SHIVAJI NAGAR|FC ROAD|PUNE|PUNE|PUNE|MH|IN|411005|01||||||||||||||||9822055002|||||31-08-2020|PUNE FC ROAD|31-08-2020|01|VIKRAM SINGH|BRANCH MANAGER|HEAD OFFICE|4|CBSNEXORA BANK|IN4711|1|0||0|3||||||
 30|2|E|XXXXXXXX2210||01|02|||||
 70|2|10079_Sign.jpeg|09|01|01||||
 70|2|10079_Photo.jpeg|02|01|01||||
-20|3|01|01|||||||||||01|||01|10080|MR|ARJUN||DESHMUKH|||||||01|MR|VIJAY|DESHMUKH|||MRS|REKHA|DESHMUKH|||M|01|IN|B-01|15-01-1978|||||||||01|02|||||02|HOUSE NO 7, DHARAMPETH|RAMDASPETH|NAGPUR|NAGPUR|NAGPUR|MH|IN|440010|01||Y|02|HOUSE NO 7, DHARAMPETH|RAMDASPETH|NAGPUR|NAGPUR|NAGPUR|MH|IN|440010|01||||||||||||||||9823033003|||||30-08-2020|NAGPUR DHARAMPETH|30-08-2020|01|RAHUL JOSHI|ASSISTANT MANAGER|HEAD OFFICE|4|BHARAT URBAN BANK|IN4711|1|0||0|3||||||
+20|3|01|01|||||||||||01|||01|10080|MR|ARJUN||DESHMUKH|||||||01|MR|VIJAY|DESHMUKH|||MRS|REKHA|DESHMUKH|||M|01|IN|B-01|15-01-1978|||||||||01|02|||||02|HOUSE NO 7, DHARAMPETH|RAMDASPETH|NAGPUR|NAGPUR|NAGPUR|MH|IN|440010|01||Y|02|HOUSE NO 7, DHARAMPETH|RAMDASPETH|NAGPUR|NAGPUR|NAGPUR|MH|IN|440010|01||||||||||||||||9823033003|||||30-08-2020|NAGPUR DHARAMPETH|30-08-2020|01|RAHUL JOSHI|ASSISTANT MANAGER|HEAD OFFICE|4|CBSNEXORA BANK|IN4711|1|0||0|3||||||
 30|3|C|AGTPD1144K||01|02|||||
 70|3|10080_Sign.jpeg|09|01|01||||
 70|3|10080_AP.jpg|04|01|01||||

src/app/clerk/disbursement-review/disbursement-review.component.html

@@ -6,16 +6,21 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<div class="dri">
-  <!-- ── NAV BAR ── -->
+<div class="dri" [class.dri--dialog]="isDialog">
+  <!-- ── HEADER ── -->
   <nav class="cashier-nav cashier-nav--clerk">
-    <button type="button" class="cashier-nav__item cashier-nav__item--primary cashier-nav__item--active">
-      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M12 2v20M2 12h20" />
-      </svg>
-      {{ isBankTransferMode ? 'Bank Transfer Review' : isCollectionMode ? 'Collection Review' : 'Disbursement Review' }}
-    </button>
-    <span class="cashier-nav__esc-hint" (click)="backToInbox()">← Back to Inbox</span>
+    <span class="dri-header-title">
+      {{
+        isBankTransferMode
+          ? 'Bank Transfer Review'
+          : isCollectionMode
+            ? 'Collection Review'
+            : isFundTransferMode
+              ? 'Fund Transfer Review'
+              : 'Disbursement Review'
+      }}
+    </span>
+    <span class="cashier-nav__esc-hint" (click)="backToInbox()">{{ isDialog ? '✕ Close' : '← Back to Inbox' }}</span>
   </nav>
 
   <!-- ── LOADING ── -->
@@ -159,7 +164,7 @@
                   <td class="cell-mono">{{ entry.accountNo }}</td>
                   <td>{{ entry.accountName }}</td>
                   <td>
-                    <span class="dri-type-badge">{{ entry.accountType }}</span>
+                    <span class="dri-type-badge">{{ accountTypeLabel(entry.accountType) }}</span>
                   </td>
                   <td class="num dri-cr-amount">₹{{ entry.amount | number: '1.2-2' }}</td>
                 </tr>
@@ -197,7 +202,7 @@
                   <td class="cell-mono">{{ entry.accountNo }}</td>
                   <td>{{ entry.accountName }}</td>
                   <td>
-                    <span class="dri-type-badge">{{ entry.accountType }}</span>
+                    <span class="dri-type-badge">{{ accountTypeLabel(entry.accountType) }}</span>
                   </td>
                   <td class="num dri-cr-amount">₹{{ entry.amount | number: '1.2-2' }}</td>
                 </tr>
@@ -233,7 +238,7 @@
                   <td class="cell-mono">{{ entry.accountNo }}</td>
                   <td>{{ entry.accountName }}</td>
                   <td>
-                    <span class="dri-type-badge">{{ entry.accountType }}</span>
+                    <span class="dri-type-badge">{{ accountTypeLabel(entry.accountType) }}</span>
                   </td>
                   <td class="num dri-cr-amount">₹{{ entry.amount | number: '1.2-2' }}</td>
                 </tr>

src/app/clerk/disbursement-review/disbursement-review.component.scss

@@ -36,6 +36,16 @@ $shadow-md: 0 4px 16px rgb(0 0 0 / 9%);
   flex-direction: column;
   min-height: 100vh;
   background: $bg-page;
+
+  /* Opened as a popup rather than a full page — sizes to its own content (capped so a long
+     entries table still scrolls inside the dialog) instead of stretching to the viewport. */
+  &--dialog {
+    min-height: 0;
+    max-height: 85vh;
+    overflow-y: auto;
+    width: min(760px, 92vw);
+    border-radius: 10px;
+  }
 }
 
 // ── Nav bar ────────────────────────────────────────────────────────────────
@@ -48,29 +58,6 @@ $shadow-md: 0 4px 16px rgb(0 0 0 / 9%);
   border-bottom: 1px solid $border;
   box-shadow: $shadow-sm;
 
-  &__item {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    padding: 7px 16px;
-    border-radius: 8px;
-    font-size: 13px;
-    font-weight: 600;
-    border: none;
-    cursor: pointer;
-    transition: all 0.15s;
-
-    &--primary {
-      background: $brand-light;
-      color: $brand;
-    }
-
-    &--active {
-      background: $brand;
-      color: #fff;
-    }
-  }
-
   &__esc-hint {
     margin-left: auto;
     font-size: 12px;
@@ -88,6 +75,12 @@ $shadow-md: 0 4px 16px rgb(0 0 0 / 9%);
   }
 }
 
+.dri-header-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: $text-mid;
+}
+
 // ── Loading / empty ────────────────────────────────────────────────────────
 .dri-loading {
   display: flex;

src/app/clerk/disbursement-review/disbursement-review.component.ts

@@ -12,6 +12,7 @@ import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatIconModule } from '@angular/material/icon';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { catchError } from 'rxjs/operators';
 import { of } from 'rxjs';
 
@@ -33,7 +34,8 @@ interface CreditEntry {
     CommonModule,
     FormsModule,
     MatSnackBarModule,
-    MatIconModule
+    MatIconModule,
+    MatDialogModule
   ],
   templateUrl: './disbursement-review.component.html',
   styleUrl: './disbursement-review.component.scss'
@@ -43,6 +45,11 @@ export class DisbursementReviewComponent implements OnInit {
   private router = inject(Router);
   private service = inject(ClerkDisbursementService);
   private snackBar = inject(MatSnackBar);
+  /** Present only when opened as a popup from the requests list; absent when reached by direct
+   *  route (e.g. a bookmarked/shared link). Both entry points stay supported — this only changes
+   *  how "done" is signalled: closing the dialog vs. navigating back to the inbox route. */
+  private dialogRef = inject(MatDialogRef<DisbursementReviewComponent>, { optional: true });
+  private dialogData = inject<{ requestId: number } | null>(MAT_DIALOG_DATA, { optional: true });
 
   requestId: number | null = null;
   request: any = null;
@@ -53,9 +60,17 @@ export class DisbursementReviewComponent implements OnInit {
   showRejectForm = false;
   rejectionReason = '';
 
+  get isDialog(): boolean {
+    return !!this.dialogRef;
+  }
+
   ngOnInit(): void {
-    const id = this.route.snapshot.params['id'];
-    this.requestId = id != null ? Number(id) : null;
+    if (this.dialogData?.requestId) {
+      this.requestId = this.dialogData.requestId;
+    } else {
+      const id = this.route.snapshot.params['id'];
+      this.requestId = id != null ? Number(id) : null;
+    }
     if (this.requestId) this.loadRequest();
   }
 
@@ -93,9 +108,11 @@ export class DisbursementReviewComponent implements OnInit {
         } else {
           const msg = this.isBankTransferMode
             ? 'Bank transfer approved successfully.'
-            : 'Disbursement approved successfully.';
+            : this.isFundTransferMode
+              ? 'Fund transfer approved successfully.'
+              : 'Disbursement approved successfully.';
           this.snackBar.open(msg, 'Close', { duration: 3000 });
-          this.router.navigate(['/checker-inbox-and-tasks/disbursement-requests']);
+          this.finish();
         }
       });
   }
@@ -112,15 +129,31 @@ export class DisbursementReviewComponent implements OnInit {
           this.snackBar.open(res.error, 'Close', { duration: 5000 });
         } else {
           this.snackBar.open('Request rejected.', 'Close', { duration: 3000 });
-          this.router.navigate(['/checker-inbox-and-tasks/disbursement-requests']);
+          this.finish();
         }
       });
   }
 
+  /** "Done" for this screen — closes the popup (telling the list to refresh) when opened as a
+   *  dialog, or returns to the inbox route otherwise. */
+  private finish(): void {
+    if (this.dialogRef) {
+      this.dialogRef.close({ refreshed: true });
+    } else {
+      this.router.navigate(['/checker-inbox-and-tasks/disbursement-requests']);
+    }
+  }
+
   get isBankTransferMode(): boolean {
     return this.request?.request_type === 'BANK_TRANSFER';
   }
 
+  /** Mechanically identical to a Disbursement (same 1 GL debit -> N account credits flow) — only
+   *  the label differs, so a checker doesn't read this as a loan payout. */
+  get isFundTransferMode(): boolean {
+    return this.request?.request_type === 'FUND_TRANSFER';
+  }
+
   get isCollectionMode(): boolean {
     if (this.isBankTransferMode) return false;
     return this.creditEntries.some((e) => e.dbCr === 'Dr');
@@ -143,6 +176,24 @@ export class DisbursementReviewComponent implements OnInit {
     return this.drEntries.reduce((sum, e) => sum + (e.amount ?? 0), 0);
   }
 
+  /**
+   * Human-readable account type for the badge. The stored value is the backend's own code
+   * (SAVINGS / CURRENT / FIXED_DEPOSIT / RECURRING_DEPOSIT / SHARE / LOAN / GL), so this only
+   * changes presentation -- a checker should read "Fixed Deposit", not "FIXED_DEPOSIT".
+   */
+  accountTypeLabel(accountType: string): string {
+    const labels: Record<string, string> = {
+      SAVINGS: 'Savings',
+      CURRENT: 'Current',
+      FIXED_DEPOSIT: 'Fixed Deposit',
+      RECURRING_DEPOSIT: 'Recurring Deposit',
+      SHARE: 'Share',
+      LOAN: 'Loan',
+      GL: 'GL'
+    };
+    return labels[(accountType ?? '').toUpperCase()] ?? accountType;
+  }
+
   statusClass(status: string): string {
     const map: Record<string, string> = {
       PENDING: 'dri-status--pending',
@@ -171,6 +222,10 @@ export class DisbursementReviewComponent implements OnInit {
   }
 
   backToInbox(): void {
-    this.router.navigate(['/checker-inbox-and-tasks/disbursement-requests']);
+    if (this.dialogRef) {
+      this.dialogRef.close();
+    } else {
+      this.router.navigate(['/checker-inbox-and-tasks/disbursement-requests']);
+    }
   }
 }

src/app/clerk/dividend-claim-request.service.ts

@@ -0,0 +1,81 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpContext } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { SILENT_HTTP_ERROR } from '../core/http/silent-error.token';
+
+/**
+ * HTTP service for the maker-checker "claim my dividend early" workflow — a clerk submits a claim
+ * against a still-locked dividend on the member's behalf, a Bank Manager approves (only possible
+ * when the client has no overdue loan) or rejects it.
+ */
+@Injectable({ providedIn: 'root' })
+export class DividendClaimRequestService {
+  private http = inject(HttpClient);
+
+  /**
+   * Records a claim for an unclaimed dividend, collected as a Demand Draft.
+   *
+   * A dividend is only ever paid out as a draft — the savings-credit, cash and loan-set-off routes
+   * this endpoint once accepted are retired, so the payload carries just what a draft needs: how
+   * much, drawn in whose favour, and payable where.
+   */
+  submit(
+    lockId: number,
+    claim: {
+      ddApplyAmount: number;
+      ddBeneficiaryName: string;
+      ddPayableAtBranch: string;
+      ddPayableAtCity: string;
+      /**
+       * The leaflet the clerk picked off the shelf. Sent so the draft is drawn on that physical
+       * form — without it the server takes the next available one, and the number the clerk wrote
+       * on the counterfoil would not be the number in the books.
+       */
+      leafletId?: number;
+    }
+  ): Observable<any> {
+    return this.http.post('/clerk/dividend-claim-requests', {
+      lockId,
+      ddApplyAmount: String(claim.ddApplyAmount),
+      ddBeneficiaryName: claim.ddBeneficiaryName,
+      ddPayableAtBranch: claim.ddPayableAtBranch,
+      ddPayableAtCity: claim.ddPayableAtCity,
+      leafletId: claim.leafletId ?? null
+    });
+  }
+
+  // Silenced: onTokNoBlur() in Transaction Entry probes this only after the withdrawal-request
+  // token pool 404s, and shows its own tailored message either way.
+  getByToken(token: string): Observable<any> {
+    return this.http.get(`/clerk/dividend-claim-requests/by-token/${encodeURIComponent(token)}`, {
+      context: new HttpContext().set(SILENT_HTTP_ERROR, true)
+    });
+  }
+
+  disburse(id: number, denominationData: string | null, transactionAmount?: number): Observable<any> {
+    return this.http.post(`/clerk/dividend-claim-requests/${id}/disburse`, {
+      denominationData,
+      transactionAmount: transactionAmount != null ? String(transactionAmount) : null
+    });
+  }
+
+  list(status = 'PENDING'): Observable<any> {
+    return this.http.get('/clerk/dividend-claim-requests', { params: { status } });
+  }
+
+  approve(id: number): Observable<any> {
+    return this.http.post(`/clerk/dividend-claim-requests/${id}/approve`, {});
+  }
+
+  reject(id: number, reason: string): Observable<any> {
+    return this.http.post(`/clerk/dividend-claim-requests/${id}/reject`, { reason });
+  }
+}

src/app/clerk/dividend-dashboard.service.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+/**
+ * HTTP service for the Bank Manager's Dividend Dashboard — members with a locked (3-year)
+ * share dividend who also have an overdue loan EMI, with an action to apply the locked dividend
+ * towards that EMI.
+ */
+@Injectable({ providedIn: 'root' })
+export class DividendDashboardService {
+  private http = inject(HttpClient);
+
+  getDashboard(): Observable<any> {
+    return this.http.get('/clerk/dividend-dashboard');
+  }
+
+  applyToLoan(lockId: number, loanId: number, amount: number): Observable<any> {
+    return this.http.post(`/clerk/dividend-dashboard/${lockId}/apply-to-loan`, { loanId, amount: String(amount) });
+  }
+
+  getSummary(): Observable<any> {
+    return this.http.get('/clerk/dividend-dashboard/summary');
+  }
+
+  getDeclarations(): Observable<any> {
+    return this.http.get('/clerk/dividend-dashboard/declarations');
+  }
+
+  getLocks(status?: string): Observable<any> {
+    const params = status && status !== 'ALL' ? { status } : {};
+    return this.http.get('/clerk/dividend-dashboard/locks', { params });
+  }
+}

src/app/clerk/dividend-dashboard/dividend-dashboard.component.html

@@ -0,0 +1,407 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+@if (summary) {
+  <div class="dd-summary-grid">
+    <div class="dd-stat-card">
+      <div class="dd-stat-label">Declarations</div>
+      <div class="dd-stat-value">{{ summary.totalDeclarations }}</div>
+      <div class="dd-stat-sub">{{ summary.pendingApprovalDeclarations }} pending approval</div>
+    </div>
+    <div class="dd-stat-card">
+      <div class="dd-stat-label">Members Affected</div>
+      <div class="dd-stat-value">{{ summary.membersAffected }}</div>
+      <div class="dd-stat-sub">{{ summary.totalMemberDividends }} member-dividends total</div>
+    </div>
+    <div class="dd-stat-card">
+      <div class="dd-stat-label">Total Amount</div>
+      <div class="dd-stat-value">{{ summary.totalAmount | number: '1.2-2' }}</div>
+      <div class="dd-stat-sub">across all declared dividends</div>
+    </div>
+    <div class="dd-stat-card">
+      <div class="dd-stat-label">Currently Locked</div>
+      <div class="dd-stat-value">{{ summary.lockedCount }}</div>
+      <div class="dd-stat-sub">{{ summary.lockedAmount | number: '1.2-2' }}</div>
+    </div>
+    <div class="dd-stat-card">
+      <div class="dd-stat-label">Applied to Loans</div>
+      <div class="dd-stat-value">{{ summary.appliedToLoanCount }}</div>
+      <div class="dd-stat-sub">{{ summary.appliedToLoanAmount | number: '1.2-2' }}</div>
+    </div>
+    <div class="dd-stat-card">
+      <div class="dd-stat-label">Claimed by Member</div>
+      <div class="dd-stat-value">{{ summary.claimedCount }}</div>
+      <div class="dd-stat-sub">{{ summary.claimedAmount | number: '1.2-2' }}</div>
+    </div>
+    <div class="dd-stat-card dd-stat-card--forfeited">
+      <div class="dd-stat-label">Forfeited to Profit</div>
+      <div class="dd-stat-value">{{ summary.forfeitedCount }}</div>
+      <div class="dd-stat-sub">{{ summary.forfeitedAmount | number: '1.2-2' }}</div>
+    </div>
+  </div>
+}
+
+<!-- One list at a time. The three answer unrelated questions and a clerk is only ever in one of
+     them; stacked, the one they came for was usually below the fold. Counts ride on the tabs so a
+     list worth opening — a blocked member, a lock nearing forfeiture — is visible without opening
+     it. -->
+<div class="dd-tabs" role="tablist">
+  <button
+    type="button"
+    role="tab"
+    class="dd-tab"
+    [class.dd-tab--active]="activeTab === 'declarations'"
+    [attr.aria-selected]="activeTab === 'declarations'"
+    (click)="activeTab = 'declarations'"
+  >
+    Declarations
+    <span class="dd-tab__count">{{ declarations.length }}</span>
+  </button>
+  <button
+    type="button"
+    role="tab"
+    class="dd-tab"
+    [class.dd-tab--active]="activeTab === 'overdue'"
+    [attr.aria-selected]="activeTab === 'overdue'"
+    (click)="activeTab = 'overdue'"
+  >
+    Overdue EMI
+    <span class="dd-tab__count" [class.dd-tab__count--alert]="rows.length > 0">{{ rows.length }}</span>
+  </button>
+  <button
+    type="button"
+    role="tab"
+    class="dd-tab"
+    [class.dd-tab--active]="activeTab === 'locks'"
+    [attr.aria-selected]="activeTab === 'locks'"
+    (click)="activeTab = 'locks'"
+  >
+    Lock History
+    <span class="dd-tab__count">{{ locks.length }}</span>
+  </button>
+</div>
+
+<div class="pg-card" [hidden]="activeTab !== 'declarations'">
+  <div class="pos-section-label">Dividend Declarations — Every Dividend Ever Declared, Tracked to Completion</div>
+  <div class="dd-toolbar">
+    <div class="dd-search">
+      <input
+        type="search"
+        class="dd-search__input"
+        placeholder="Search product, period or status…"
+        [(ngModel)]="declarationSearch"
+        name="declarationSearch"
+      />
+      @if (declarationSearch) {
+        <button type="button" class="dd-search__clear" (click)="declarationSearch = ''" aria-label="Clear search">
+          &times;
+        </button>
+      }
+    </div>
+    <span class="dd-toolbar__count">
+      {{ visibleDeclarations.length }} of {{ declarations.length }} declaration{{
+        declarations.length === 1 ? '' : 's'
+      }}
+    </span>
+    <button type="button" class="pg-btn" [disabled]="declarationsLoading" (click)="loadDeclarations()">Refresh</button>
+  </div>
+  <table class="pg-table">
+    <thead>
+      <tr>
+        <th>Product</th>
+        <th>Period</th>
+        <th class="num">Declared Amount</th>
+        <th class="num">Members</th>
+        <th>Status</th>
+        <th>Approved On</th>
+      </tr>
+    </thead>
+    <tbody>
+      @if (declarationsLoading) {
+        <tr>
+          <td colspan="6" class="pg-empty">Loading…</td>
+        </tr>
+      } @else if (declarationsLoaded && declarations.length === 0) {
+        <tr>
+          <td colspan="6" class="pg-empty">No dividends have been declared yet.</td>
+        </tr>
+      } @else if (visibleDeclarations.length === 0) {
+        <tr>
+          <td colspan="6" class="pg-empty">No declaration matches “{{ declarationSearch }}”.</td>
+        </tr>
+      } @else {
+        @for (d of visibleDeclarations; track d.declarationId) {
+          <tr>
+            <td>{{ d.productName }}</td>
+            <td>{{ d.periodStartDate }} → {{ d.periodEndDate }}</td>
+            <td class="num">{{ d.declaredAmount | number: '1.2-2' }}</td>
+            <td class="num">{{ d.totalMembers }}</td>
+            <td>
+              <span class="dd-badge" [ngClass]="declarationStatusClass(d.status)">{{
+                declarationStatusLabel(d.status)
+              }}</span>
+            </td>
+            <td>{{ d.approvedOn ? (d.approvedOn | date: 'medium') : '—' }}</td>
+          </tr>
+        }
+      }
+    </tbody>
+  </table>
+</div>
+
+<div class="pg-card" [hidden]="activeTab !== 'overdue'">
+  <div class="pos-section-label">Dividend Dashboard — Locked Dividends for Members with Overdue EMI</div>
+  <div class="dd-toolbar">
+    <div class="dd-search">
+      <input
+        type="search"
+        class="dd-search__input"
+        placeholder="Search member name or share account no…"
+        [(ngModel)]="overdueSearch"
+        name="overdueSearch"
+      />
+      @if (overdueSearch) {
+        <button type="button" class="dd-search__clear" (click)="overdueSearch = ''" aria-label="Clear search">
+          &times;
+        </button>
+      }
+    </div>
+    <span class="dd-toolbar__count">
+      {{ visibleOverdueRows.length }} of {{ rows.length }} member{{ rows.length === 1 ? '' : 's' }}
+    </span>
+    <button type="button" class="pg-btn" [disabled]="loading" (click)="load()">Refresh</button>
+  </div>
+  <table class="pg-table">
+    <thead>
+      <tr>
+        <th>Client</th>
+        <th class="num">Locked Dividend</th>
+        <th>Locked Date</th>
+        <th>Release Due</th>
+        <th class="num">Total Overdue EMI</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      @if (loading) {
+        <tr>
+          <td colspan="6" class="pg-empty">Loading…</td>
+        </tr>
+      } @else if (loaded && rows.length === 0) {
+        <tr>
+          <td colspan="6" class="pg-empty">No members with a locked dividend and an overdue EMI right now.</td>
+        </tr>
+      } @else if (visibleOverdueRows.length === 0) {
+        <tr>
+          <td colspan="6" class="pg-empty">No member matches “{{ overdueSearch }}”.</td>
+        </tr>
+      } @else {
+        @for (row of visibleOverdueRows; track row.lockId) {
+          <tr>
+            <td>
+              {{ row.clientName }}
+              @if (row.shareAccountNo) {
+                <div class="dd-account-no">{{ row.shareAccountNo }}</div>
+              }
+            </td>
+            <td class="num">{{ row.lockedAmount | number: '1.2-2' }}</td>
+            <td>{{ row.lockedDate }}</td>
+            <td>{{ row.releaseDueDate }}</td>
+            <td class="num">{{ totalOverdue(row) | number: '1.2-2' }}</td>
+            <td>
+              <button type="button" class="pg-btn" (click)="toggleApply(row)">
+                {{ expandedLockId === row.lockId ? 'Cancel' : 'Apply to Loan' }}
+              </button>
+            </td>
+          </tr>
+          @if (expandedLockId === row.lockId) {
+            <tr class="dd-apply-row">
+              <td colspan="6">
+                <div class="dd-apply-panel">
+                  <label class="inv-form-field">
+                    <span>Loan</span>
+                    <select [(ngModel)]="selectedLoanId[row.lockId]" (change)="onLoanChange(row)">
+                      @for (loan of row.overdueLoans; track loan.loanId) {
+                        <option [ngValue]="loan.loanId">
+                          {{ loan.accountNo }} — Overdue {{ loan.overdueAmount | number: '1.2-2' }}
+                        </option>
+                      }
+                    </select>
+                  </label>
+                  <label class="inv-form-field">
+                    <span>Amount to Apply (max {{ maxAmountFor(row) | number: '1.2-2' }})</span>
+                    <input
+                      type="number"
+                      [(ngModel)]="applyAmount[row.lockId]"
+                      [max]="maxAmountFor(row)"
+                      min="0.01"
+                      step="0.01"
+                    />
+                  </label>
+                  @if (applyError) {
+                    <div class="dd-apply-error">{{ applyError }}</div>
+                  }
+                  <button
+                    type="button"
+                    class="pg-btn dd-apply-confirm"
+                    [disabled]="applying"
+                    (click)="submitApply(row)"
+                  >
+                    {{ applying ? 'Applying…' : 'Confirm' }}
+                  </button>
+                </div>
+              </td>
+            </tr>
+          }
+        }
+      }
+    </tbody>
+  </table>
+</div>
+
+<div class="pg-card" [hidden]="activeTab !== 'locks'">
+  <div class="pos-section-label">All Dividend Locks — Full 3-Year Lock History</div>
+  <div class="inv-form-grid" style="padding: 12px 16px; gap: 8px">
+    <div class="dd-filter-group">
+      @for (opt of ['ALL', 'UNCLAIMED', 'CLAIMED', 'FORFEITED']; track opt) {
+        <button
+          type="button"
+          class="dd-filter-btn"
+          [class.dd-filter-btn--active]="lockStatusFilter === opt"
+          (click)="setLockStatusFilter(opt)"
+        >
+          {{ opt === 'ALL' ? 'All' : (opt | titlecase) }}
+        </button>
+      }
+    </div>
+    <div class="dd-search" style="margin-left: auto">
+      <input
+        type="search"
+        class="dd-search__input"
+        placeholder="Search member name or share account no…"
+        [(ngModel)]="lockSearch"
+        name="lockSearch"
+      />
+      @if (lockSearch) {
+        <button type="button" class="dd-search__clear" (click)="lockSearch = ''" aria-label="Clear search">
+          &times;
+        </button>
+      }
+    </div>
+    <button type="button" class="pg-btn" [disabled]="locksLoading" (click)="loadLocks()">Refresh</button>
+  </div>
+
+  <!-- Financial-year chips, built from the locks themselves: a new declaration adds its year here
+       on its own, and a year with nothing left to show stops being offered. Shown even for a single
+       year, so the filter is visibly there before a second year exists to use it on. -->
+  @if (lockYears.length > 0) {
+    <div class="dd-year-filter">
+      <span class="dd-year-filter__label">Financial year</span>
+      <div class="dd-filter-group">
+        <button
+          type="button"
+          class="dd-filter-btn"
+          [class.dd-filter-btn--active]="lockYearFilter === 'ALL'"
+          (click)="setLockYearFilter('ALL')"
+        >
+          All years
+        </button>
+        @for (year of lockYears; track year) {
+          <button
+            type="button"
+            class="dd-filter-btn"
+            [class.dd-filter-btn--active]="lockYearFilter === year"
+            (click)="setLockYearFilter(year)"
+          >
+            FY {{ year }}
+          </button>
+        }
+      </div>
+      <span class="dd-year-filter__total">
+        {{ visibleLocks.length }} lock{{ visibleLocks.length === 1 ? '' : 's' }} ·
+        {{ visibleLocksTotal | number: '1.2-2' }}
+      </span>
+    </div>
+  }
+  <table class="pg-table">
+    <thead>
+      <tr>
+        <th>Client</th>
+        <!-- Which declaration this lock came from. A member can hold several unclaimed dividends at
+             once — this year's plus an earlier year they never collected — and amount alone cannot
+             tell them apart. -->
+        <th>Dividend</th>
+        <th class="num">Amount</th>
+        <th>Locked Date</th>
+        <th>Release Due</th>
+        <th>Status</th>
+        <th>Applied Loan</th>
+        <th>Demand Draft</th>
+      </tr>
+    </thead>
+    <tbody>
+      @if (locksLoading) {
+        <tr>
+          <td colspan="8" class="pg-empty">Loading…</td>
+        </tr>
+      } @else if (locksLoaded && visibleLocks.length === 0) {
+        <tr>
+          <td colspan="8" class="pg-empty">
+            @if (lockSearch) {
+              No dividend lock matches “{{ lockSearch }}”.
+            } @else {
+              No dividend locks match this filter.
+            }
+          </td>
+        </tr>
+      } @else {
+        @for (l of visibleLocks; track l.lockId) {
+          <tr>
+            <td>
+              {{ l.clientName }}
+              @if (l.shareAccountNo) {
+                <div class="dd-account-no">{{ l.shareAccountNo }}</div>
+              }
+            </td>
+            <td>
+              @if (l.financialYear) {
+                <div class="dd-dividend-year">FY {{ l.financialYear }}</div>
+                <div class="dd-dividend-period">
+                  {{ l.productName }} · {{ l.periodStartDate }} → {{ l.periodEndDate }}
+                </div>
+              } @else {
+                —
+              }
+            </td>
+            <td class="num">{{ l.amount | number: '1.2-2' }}</td>
+            <td>{{ l.lockedDate }}</td>
+            <td>{{ l.releaseDueDate }}</td>
+            <td>
+              <span class="dd-badge" [ngClass]="lockStatusClass(l.status)">{{ l.status | titlecase }}</span>
+            </td>
+            <td>{{ l.appliedLoanAccountNo || '—' }}</td>
+            <!-- Once a draft has been raised the clerk needs its number, not another Claim button:
+                 it is what goes on the counterfoil and what the member asks about when they return.
+                 Until then, the button hands off to the DD inventory to raise one. -->
+            <td>
+              @if (l.claimDdNumber && l.claimStatus === 'APPROVED') {
+                <span class="dd-dd-number">{{ l.claimDdNumber }}</span>
+              } @else if (l.claimStatus === 'PENDING') {
+                <span class="dd-badge dd-badge--pending">DD {{ l.claimDdNumber }} — awaiting approval</span>
+              } @else if (l.status === 'UNCLAIMED') {
+                <button type="button" class="pg-btn dd-apply-confirm" (click)="claimAsDemandDraft(l)">
+                  Claim by DD
+                </button>
+              }
+            </td>
+          </tr>
+        }
+      }
+    </tbody>
+  </table>
+</div>

src/app/clerk/dividend-dashboard/dividend-dashboard.component.scss

@@ -0,0 +1,404 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+.dd-apply-row td {
+  background: #f8fafc;
+  padding: 0;
+}
+
+.dd-apply-panel {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  flex-wrap: wrap;
+  padding: 14px 16px;
+
+  .inv-form-field {
+    min-width: 220px;
+  }
+}
+
+.dd-apply-error {
+  color: #b42318;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.dd-apply-panel--wrap {
+  align-items: flex-end;
+}
+
+.dd-apply-panel-title {
+  width: 100%;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: #475569;
+}
+
+.dd-apply-panel-total {
+  font-size: 13px;
+  font-weight: 700;
+  color: #0f172a;
+  font-variant-numeric: tabular-nums;
+}
+
+.dd-apply-confirm {
+  background: #2563eb;
+  color: #fff;
+  border-color: #2563eb;
+
+  &:disabled {
+    opacity: 0.6;
+  }
+}
+
+.dd-retry-error {
+  margin-top: 4px;
+  color: #b42318;
+  font-size: 12px;
+  font-weight: 600;
+  max-width: 240px;
+}
+
+.dd-badge {
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.dd-badge--pending {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.pg-empty-inline {
+  color: #94a3b8;
+  font-size: 12.5px;
+  font-style: italic;
+}
+
+.dd-badge--failed {
+  background: #fee2e2;
+  color: #b42318;
+}
+
+.dd-badge--posted {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.dd-badge--partial {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+/* ─── Summary stat cards ─── */
+.dd-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.dd-stat-card {
+  background: #fff;
+  border: 1px solid #e8ecf0;
+  border-radius: 10px;
+  padding: 12px 14px;
+  border-left: 3px solid #94a3b8;
+
+  &--forfeited {
+    border-left-color: #7c3aed;
+  }
+}
+
+.dd-stat-label {
+  font-size: 11.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  color: #64748b;
+}
+
+.dd-stat-value {
+  font-size: 22px;
+  font-weight: 700;
+  color: #0f172a;
+  margin-top: 4px;
+  font-variant-numeric: tabular-nums;
+}
+
+.dd-stat-sub {
+  font-size: 11.5px;
+  color: #94a3b8;
+  margin-top: 2px;
+}
+
+/* ─── Lock status filter buttons ─── */
+.dd-filter-group {
+  display: flex;
+  gap: 6px;
+}
+
+.dd-filter-btn {
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  color: #475569;
+  font-size: 12.5px;
+  font-weight: 600;
+  padding: 6px 12px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: #94a3b8;
+  }
+
+  &--active {
+    background: #1e293b;
+    border-color: #1e293b;
+    color: #fff;
+  }
+}
+
+/* Which declaration a lock belongs to. The financial year leads because that is how a member asks
+   for it ("my 2026-27 dividend"); the product and exact period sit under it for the clerk who needs
+   to be certain, without crowding the row. */
+.dd-dividend-year {
+  font-weight: 600;
+  font-size: 13px;
+  color: #1e293b;
+  white-space: nowrap;
+}
+
+.dd-dividend-period {
+  font-size: 11.5px;
+  color: #64748b;
+  white-space: nowrap;
+}
+
+/* Financial-year chips. Sits below the status chips as a second, narrower axis over the same list —
+   status is fetched from the server, year filters what came back. */
+.dd-year-filter {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 0 16px 12px;
+
+  &__label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #64748b;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+
+  &__total {
+    margin-left: auto;
+    font-size: 12.5px;
+    color: #475569;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+}
+
+/* The DD number just drawn. Approving refreshes the pending list, so the row it came from is gone
+   by the time the clerk reads it — and that number is what goes on the counterfoil. */
+.dd-issued-banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 12px 16px 0;
+  padding: 10px 14px;
+  border: 1px solid #86efac;
+  border-radius: 6px;
+  background: #f0fdf4;
+  color: #166534;
+  font-size: 13.5px;
+
+  &__main {
+    flex: 1;
+  }
+
+  &__close {
+    border: none;
+    background: none;
+    color: #166534;
+    font-size: 20px;
+    line-height: 1;
+    cursor: pointer;
+    padding: 0 4px;
+
+    &:hover {
+      color: #14532d;
+    }
+  }
+}
+
+/* One toolbar per table: search on the left where the eye lands first, the row count next to it so
+   a narrowed table says how much it is hiding, and Refresh pushed to the far right. */
+.dd-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 12px 16px;
+
+  &__count {
+    margin-left: auto;
+    font-size: 12.5px;
+    color: #475569;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+}
+
+.dd-search {
+  position: relative;
+  flex: 1 1 260px;
+  max-width: 360px;
+
+  &__input {
+    width: 100%;
+    padding: 7px 30px 7px 11px;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    font-size: 13px;
+    color: #0f172a;
+    background: #fff;
+
+    &::placeholder {
+      color: #94a3b8;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: #2563eb;
+      box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
+    }
+
+    /* The browser's own clear affordance would sit under ours. */
+    &::-webkit-search-cancel-button {
+      appearance: none;
+    }
+  }
+
+  /* Only rendered while there is something to clear, so it never reads as a dead control. */
+  &__clear {
+    position: absolute;
+    top: 50%;
+    right: 6px;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: #64748b;
+    font-size: 17px;
+    line-height: 1;
+    cursor: pointer;
+
+    &:hover {
+      background: #e2e8f0;
+      color: #0f172a;
+    }
+  }
+}
+
+/* The share account number under the member's name — the thing a clerk matches against the
+   passbook in front of them, so it has to be readable but must not outweigh the name. */
+.dd-account-no {
+  margin-top: 2px;
+  font-size: 11.5px;
+  color: #64748b;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Horizontal tab strip: one list on screen at a time, chosen here.
+   Scrolls rather than wraps on a narrow window, so the strip stays one line and the tab positions
+   a clerk has learned do not move. */
+.dd-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 16px;
+  padding-bottom: 2px;
+  border-bottom: 1px solid #e2e8f0;
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.dd-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  flex: 0 0 auto;
+  padding: 9px 14px;
+  border: 0;
+
+  /* The active marker is this underline, so every tab reserves the space for it — otherwise the
+     strip would shift by 2px each time the selection moved. */
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #64748b;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover {
+    color: #1e40af;
+  }
+
+  &--active {
+    color: #1e40af;
+    border-bottom-color: #2563eb;
+  }
+}
+
+.dd-tab__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 9999px;
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 11px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+
+  /* A member blocked by an overdue EMI, or a claim waiting on a manager, is work outstanding —
+     coloured so it reads as something to open rather than a neutral tally. */
+  &--alert {
+    background: #fef3c7;
+    color: #92400e;
+  }
+}
+
+/* The draft number a member's dividend was paid out on. Monospaced-by-figure so a clerk reading it
+   against the counterfoil can compare digit by digit. */
+.dd-dd-number {
+  font-size: 12.5px;
+  font-weight: 700;
+  color: #0f172a;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+}

src/app/clerk/dividend-dashboard/dividend-dashboard.component.ts

@@ -0,0 +1,332 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { catchError } from 'rxjs/operators';
+import { of } from 'rxjs';
+
+import { DividendDashboardService } from '../dividend-dashboard.service';
+
+/**
+ * Bank Manager's Dividend Dashboard: summary stats, every dividend ever declared, full 3-year lock
+ * history, and members whose unclaimed dividend sits alongside an overdue loan EMI (with a
+ * proactive "Apply to Loan" action).
+ *
+ * Claiming a dividend hands off to the DD inventory, because a dividend is only ever collected as a
+ * Demand Draft. The draft is then approved on the DD Issuance Approvals screen alongside every
+ * other draft, so there is no separate claim queue here — the lock history shows the DD number once
+ * it has been drawn.
+ */
+@Component({
+  selector: 'mifosx-dividend-dashboard',
+  templateUrl: './dividend-dashboard.component.html',
+  styleUrls: [
+    '../../cashier/cashier-shared.scss',
+    '../clerk-shared.scss',
+    './dividend-dashboard.component.scss'
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule
+  ]
+})
+export class DividendDashboardComponent implements OnInit {
+  private service = inject(DividendDashboardService);
+  private router = inject(Router);
+
+  /**
+   * Which list the clerk is looking at.
+   *
+   * The three lists answer unrelated questions — what has been declared, who is blocked by an
+   * overdue EMI, and the full lock history — and a clerk is only ever in one of them. Stacked on one
+   * page they made the screen long enough that the section a clerk came for was usually below the
+   * fold, so they are tabbed instead.
+   *
+   * Every list is still loaded on init rather than on first view: the counts in the tab strip have
+   * to be right before a tab is opened, or the strip would be advertising numbers it does not know.
+   */
+  activeTab: 'declarations' | 'overdue' | 'locks' = 'declarations';
+
+  rows: any[] = [];
+  loading = false;
+  loaded = false;
+
+  expandedLockId: number | null = null;
+  selectedLoanId: Record<number, number | null> = {};
+  applyAmount: Record<number, number | null> = {};
+  applying = false;
+  applyError: string | null = null;
+
+  summary: any = null;
+  summaryLoading = false;
+
+  declarations: any[] = [];
+  declarationsLoading = false;
+  declarationsLoaded = false;
+
+  /**
+   * Free-text search, one box per table.
+   *
+   * Kept separate rather than shared because the three tables answer different questions and a
+   * clerk is usually in one of them: narrowing the lock history to a member should not blank out
+   * the declarations table above it, which has nothing to do with that member.
+   *
+   * Filtering is done here rather than server-side because every row is already loaded — these are
+   * a society's dividends, not a transaction ledger — so a round trip per keystroke would be slower
+   * than the filter itself and would blank the table while it ran.
+   */
+  declarationSearch = '';
+  overdueSearch = '';
+  lockSearch = '';
+
+  /** Every lock the status filter returned, before the year filter narrows it. */
+  locks: any[] = [];
+  locksLoading = false;
+  locksLoaded = false;
+  lockStatusFilter = 'ALL';
+
+  /**
+   * Financial years that actually have locks, newest first — derived from the data rather than
+   * listed anywhere, so a new declaration adds its year on its own and a year whose locks are all
+   * gone stops being offered. No maintenance as years roll over.
+   */
+  lockYears: string[] = [];
+  lockYearFilter = 'ALL';
+
+  ngOnInit(): void {
+    this.loadSummary();
+    this.loadDeclarations();
+    this.load();
+    this.loadLocks();
+  }
+
+  /**
+   * Takes the clerk to the DD inventory to draw the draft this dividend is paid out as.
+   *
+   * A dividend is only ever collected as a Demand Draft, so the claim is really a request to issue
+   * one — and the place a draft is issued is the leaflet inventory, where the clerk can see which
+   * numbered leaflet they are about to commit. Gathering the draft's details on this dashboard
+   * instead meant filling a second, thinner version of the DD form and never seeing the DD number
+   * until after approval.
+   *
+   * The dividend travels in the query string rather than in a service, so a reloaded or
+   * bookmarked page still knows which lock it is drawing against instead of silently issuing an
+   * ordinary counter draft.
+   */
+  claimAsDemandDraft(lock: any): void {
+    this.router.navigate(
+      [
+        '/sponsor-dd',
+        'inventory'
+      ],
+      {
+        queryParams: {
+          dividendLockId: lock.lockId,
+          dividendAmount: Number(lock.amount),
+          dividendBeneficiary: lock.clientName ?? '',
+          dividendFinancialYear: lock.financialYear ?? ''
+        }
+      }
+    );
+  }
+
+  loadSummary(): void {
+    this.summaryLoading = true;
+    this.service
+      .getSummary()
+      .pipe(catchError(() => of(null)))
+      .subscribe((res: any) => {
+        this.summary = res;
+        this.summaryLoading = false;
+      });
+  }
+
+  loadDeclarations(): void {
+    this.declarationsLoading = true;
+    this.service
+      .getDeclarations()
+      .pipe(catchError(() => of([])))
+      .subscribe((res: any[]) => {
+        this.declarations = res ?? [];
+        this.declarationsLoading = false;
+        this.declarationsLoaded = true;
+      });
+  }
+
+  /**
+   * Whether any of a row's searchable fields contains the term.
+   *
+   * Substring rather than prefix matching, because a clerk reading an account number off a passbook
+   * often types the distinctive tail of it rather than the branch prefix every account shares. Null
+   * fields are skipped — a lock with no share account still has to be findable by member name.
+   */
+  private matches(term: string, ...fields: (string | number | null | undefined)[]): boolean {
+    const needle = term.trim().toLowerCase();
+    if (!needle) {
+      return true;
+    }
+    return fields.some((field) => field != null && String(field).toLowerCase().includes(needle));
+  }
+
+  /** Declarations the table renders. Product-level rows, so there is no member to search on. */
+  get visibleDeclarations(): any[] {
+    return this.declarations.filter((d) =>
+      this.matches(this.declarationSearch, d.productName, d.periodStartDate, d.periodEndDate, d.status)
+    );
+  }
+
+  /** Members with an overdue EMI, narrowed to the one the clerk is dealing with. */
+  get visibleOverdueRows(): any[] {
+    return this.rows.filter((r) => this.matches(this.overdueSearch, r.clientName, r.shareAccountNo));
+  }
+
+  declarationStatusLabel(status: string): string {
+    return status === 'PENDING_APPROVAL' ? 'Pending Approval' : 'Approved';
+  }
+
+  declarationStatusClass(status: string): string {
+    return status === 'PENDING_APPROVAL' ? 'dd-badge--pending' : 'dd-badge--posted';
+  }
+
+  loadLocks(): void {
+    this.locksLoading = true;
+    this.service
+      .getLocks(this.lockStatusFilter)
+      .pipe(catchError(() => of([])))
+      .subscribe((res: any[]) => {
+        this.locks = res ?? [];
+        this.rebuildLockYears();
+        this.locksLoading = false;
+        this.locksLoaded = true;
+      });
+  }
+
+  /**
+   * Rebuilds the year chips from whatever locks came back, newest first.
+   *
+   * A year the current status filter has no locks for disappears from the chips, so the selected
+   * year is reset to ALL when that happens — otherwise the table would show nothing with no
+   * indication why.
+   */
+  private rebuildLockYears(): void {
+    this.lockYears = [...new Set(this.locks.map((l) => l.financialYear).filter((y) => !!y))].sort((a, b) =>
+      b.localeCompare(a)
+    );
+    if (this.lockYearFilter !== 'ALL' && !this.lockYears.includes(this.lockYearFilter)) {
+      this.lockYearFilter = 'ALL';
+    }
+  }
+
+  /**
+   * Locks the table actually renders — the status filter is applied server-side, the year and the
+   * search here. All three narrow together, so a clerk can hold a year and still search within it.
+   */
+  get visibleLocks(): any[] {
+    return this.locks.filter(
+      (l) =>
+        (this.lockYearFilter === 'ALL' || l.financialYear === this.lockYearFilter) &&
+        this.matches(this.lockSearch, l.clientName, l.shareAccountNo, l.productName, l.appliedLoanAccountNo)
+    );
+  }
+
+  /** Total of what is on screen, so a year's worth of dividend can be read off directly. */
+  get visibleLocksTotal(): number {
+    return this.visibleLocks.reduce((sum, l) => sum + (Number(l.amount) || 0), 0);
+  }
+
+  setLockStatusFilter(status: string): void {
+    this.lockStatusFilter = status;
+    this.loadLocks();
+  }
+
+  setLockYearFilter(year: string): void {
+    this.lockYearFilter = year;
+  }
+
+  lockStatusClass(status: string): string {
+    switch (status) {
+      case 'UNCLAIMED':
+        return 'dd-badge--pending';
+      case 'CLAIMED':
+        return 'dd-badge--posted';
+      case 'FORFEITED':
+        return 'dd-badge--failed';
+      default:
+        return 'dd-badge--pending';
+    }
+  }
+
+  load(): void {
+    this.loading = true;
+    this.expandedLockId = null;
+    this.service
+      .getDashboard()
+      .pipe(catchError(() => of([])))
+      .subscribe((res: any[]) => {
+        this.rows = res ?? [];
+        this.loading = false;
+        this.loaded = true;
+      });
+  }
+
+  totalOverdue(row: any): number {
+    return (row.overdueLoans || []).reduce((sum: number, l: any) => sum + Number(l.overdueAmount || 0), 0);
+  }
+
+  toggleApply(row: any): void {
+    if (this.expandedLockId === row.lockId) {
+      this.expandedLockId = null;
+      return;
+    }
+    this.expandedLockId = row.lockId;
+    this.applyError = null;
+    const firstLoan = (row.overdueLoans || [])[0];
+    this.selectedLoanId[row.lockId] = firstLoan ? firstLoan.loanId : null;
+    this.applyAmount[row.lockId] = firstLoan
+      ? Math.min(Number(row.lockedAmount), Number(firstLoan.overdueAmount))
+      : Number(row.lockedAmount);
+  }
+
+  maxAmountFor(row: any): number {
+    const loanId = this.selectedLoanId[row.lockId];
+    const loan = (row.overdueLoans || []).find((l: any) => l.loanId === loanId);
+    const overdue = loan ? Number(loan.overdueAmount) : Number(row.lockedAmount);
+    return Math.min(Number(row.lockedAmount), overdue);
+  }
+
+  onLoanChange(row: any): void {
+    this.applyAmount[row.lockId] = this.maxAmountFor(row);
+  }
+
+  submitApply(row: any): void {
+    const loanId = this.selectedLoanId[row.lockId];
+    const amount = this.applyAmount[row.lockId];
+    if (!loanId || !amount || amount <= 0) {
+      this.applyError = 'Select a loan and enter a valid amount.';
+      return;
+    }
+    this.applying = true;
+    this.applyError = null;
+    this.service.applyToLoan(row.lockId, loanId, amount).subscribe({
+      next: () => {
+        this.applying = false;
+        this.load();
+        this.loadLocks();
+        this.loadSummary();
+      },
+      error: (err: any) => {
+        this.applying = false;
+        this.applyError = err?.error?.message || 'Failed to apply dividend to loan.';
+      }
+    });
+  }
+}

src/app/clerk/my-closure-requests/my-closure-requests.component.html

@@ -9,12 +9,12 @@
 <div class="pg">
   <header class="pg-head">
     <div>
-      <div class="pg-eyebrow">CLERK · SHARE CLOSURE</div>
-      <h1 class="pg-title">My Share Closure Requests</h1>
-      <p class="pg-sub">Share account closure requests you have submitted, and their approval status.</p>
-    </div>
-    <div class="pg-toolbar">
-      <button type="button" class="pg-btn pg-btn--primary" (click)="newRequest()">New Share Closure Request</button>
+      <div class="pg-eyebrow">CLERK · CLOSURE</div>
+      <h1 class="pg-title">My Closure Requests</h1>
+      <p class="pg-sub">
+        Account closure requests you have submitted, and their approval / cashier status. To close an account, use the
+        "Close this account" action on the account's own Transaction Entry screen.
+      </p>
     </div>
   </header>
 
@@ -34,7 +34,9 @@
         <tr>
           <th>Account No</th>
           <th>Client</th>
-          <th>Closed Date</th>
+          <th>Payout Mode</th>
+          <th>Token No</th>
+          <th class="num">Closing Amount</th>
           <th>Submitted At</th>
           <th>Status</th>
         </tr>
@@ -42,11 +44,11 @@
       <tbody>
         @if (loading) {
           <tr>
-            <td colspan="5" class="pg-empty">Loading…</td>
+            <td colspan="7" class="pg-empty">Loading…</td>
           </tr>
         } @else if (loaded && requests.length === 0) {
           <tr>
-            <td colspan="5" class="pg-empty">No share closure requests found.</td>
+            <td colspan="7" class="pg-empty">No closure requests found.</td>
           </tr>
         } @else {
           @for (r of requests; track r.id) {
@@ -55,7 +57,15 @@
                 <span class="pg-chip">{{ r.account_no }}</span>
               </td>
               <td>{{ r.client_name }}</td>
-              <td>{{ formatDateTime(r.closed_date) }}</td>
+              <td>{{ r.payment_type_name || 'Cash' }}</td>
+              <td>{{ r.tok_no || '—' }}</td>
+              <td class="num">
+                @if (r.closing_amount != null) {
+                  ₹{{ r.closing_amount | number: '1.2-2' }}
+                } @else {
+                  —
+                }
+              </td>
               <td>{{ formatDateTime(r.submitted_at) }}</td>
               <td>
                 <span [class]="statusClass(r.status)">{{ statusLabel(r.status) }}</span>

src/app/clerk/my-closure-requests/my-closure-requests.component.ts

@@ -9,17 +9,19 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { Router, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { catchError } from 'rxjs/operators';
 import { of } from 'rxjs';
 
-import { ClerkShareClosureService } from '../../cashier/clerk-share-closure.service';
+import { ClerkClosureRequestService } from '../../cashier/clerk-closure-request.service';
 
-/** Clerk Dashboard "My Share Closure Requests" — lists the share account closure requests this
- *  clerk has submitted and their approval status. Mirrors MyShareWithdrawalRequestsComponent. */
+/** Clerk Dashboard "My Closure Requests" — lists the Cash account-closure requests this clerk has
+ *  submitted (from the account's own Transaction Entry screen) and their approval/disbursement
+ *  status. Mirrors MyShareWithdrawalRequestsComponent. There is no "New Closure Request" button
+ *  here -- submission happens in-context on the account's own screen, not from this list. */
 @Component({
-  selector: 'mifosx-my-share-closure-requests',
-  templateUrl: './my-share-closure-requests.component.html',
+  selector: 'mifosx-my-closure-requests',
+  templateUrl: './my-closure-requests.component.html',
   styleUrls: [
     '../../cashier/cashier-shared.scss',
     '../clerk-shared.scss'
@@ -31,9 +33,8 @@ import { ClerkShareClosureService } from '../../cashier/clerk-share-closure.serv
     RouterModule
   ]
 })
-export class MyShareClosureRequestsComponent implements OnInit {
-  private service = inject(ClerkShareClosureService);
-  private router = inject(Router);
+export class MyClosureRequestsComponent implements OnInit {
+  private service = inject(ClerkClosureRequestService);
 
   requests: any[] = [];
   totalRecords = 0;
@@ -46,8 +47,9 @@ export class MyShareClosureRequestsComponent implements OnInit {
     return [
       { value: '', label: 'All' },
       { value: 'PENDING', label: 'Pending' },
-      { value: 'APPROVED', label: 'Approved' },
-      { value: 'REJECTED', label: 'Rejected' }
+      { value: 'APPROVED', label: 'Approved — awaiting cashier' },
+      { value: 'REJECTED', label: 'Rejected' },
+      { value: 'CLOSED', label: 'Closed' }
     ];
   }
 
@@ -72,15 +74,12 @@ export class MyShareClosureRequestsComponent implements OnInit {
     this.load();
   }
 
-  newRequest(): void {
-    this.router.navigate(['/clerk/share-closure-request']);
-  }
-
   statusClass(status: string): string {
     const map: Record<string, string> = {
       PENDING: 'inv-badge--active',
       APPROVED: 'inv-badge--matured',
-      REJECTED: 'inv-badge--written_off'
+      REJECTED: 'inv-badge--written_off',
+      CLOSED: 'inv-badge--matured'
     };
     return `inv-badge ${map[status] ?? ''}`;
   }
@@ -88,8 +87,9 @@ export class MyShareClosureRequestsComponent implements OnInit {
   statusLabel(status: string): string {
     const map: Record<string, string> = {
       PENDING: 'Pending Approval',
-      APPROVED: 'Approved',
-      REJECTED: 'Rejected'
+      APPROVED: 'Awaiting Cashier',
+      REJECTED: 'Rejected',
+      CLOSED: 'Closed'
     };
     return map[status] ?? status;
   }

src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.html

@@ -12,13 +12,15 @@
     <div class="mdr-header__left">
       <mat-icon class="mdr-header__icon">swap_horiz</mat-icon>
       <div>
-        <div class="mdr-header__title">My Disbursement Requests</div>
-        <div class="mdr-header__sub">Track your submitted GL disbursement requests.</div>
+        <div class="mdr-header__title">Disbursements &amp; Transfer</div>
+        <div class="mdr-header__sub">
+          Disbursement, Collection, Fund Transfer and Bank Transfer requests you submitted.
+        </div>
       </div>
     </div>
     <button type="button" class="mdr-btn mdr-btn--new" (click)="newDisbursement()">
       <mat-icon>add</mat-icon>
-      New Disbursement
+      New Request
     </button>
   </div>
 
@@ -99,7 +101,7 @@
       <p class="mdr-empty__text">You have not submitted any disbursement requests yet.</p>
       <button type="button" class="mdr-btn mdr-btn--new" style="margin-top: 12px" (click)="newDisbursement()">
         <mat-icon>add</mat-icon>
-        New Disbursement
+        New Request
       </button>
     </div>
   } @else {
@@ -170,7 +172,9 @@
                             <td class="cell-mono">{{ ce.accountNo || '—' }}</td>
                             <td>{{ ce.accountName || '—' }}</td>
                             <td>
-                              <span class="mdr-actype">{{ ce.accountType || '—' }}</span>
+                              <span class="mdr-actype">{{
+                                ce.accountType ? accountTypeLabel(ce.accountType) : '—'
+                              }}</span>
                             </td>
                             <td class="num mdr-ce-amount">{{ ce.amount | number: '1.2-2' }}</td>
                           </tr>

src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.ts

@@ -177,7 +177,29 @@ export class MyDisbursementRequestsComponent implements OnInit {
   getCreditEntries(req: any): any[] {
     try {
       const arr = typeof req.credit_entries === 'string' ? JSON.parse(req.credit_entries) : req.credit_entries;
-      return Array.isArray(arr) ? arr.map((e: any) => ({ ...e, amount: parseFloat(e.amount) || 0 })) : [];
+      const entries: any[] = Array.isArray(arr)
+        ? arr.map((e: any) => ({ ...e, amount: parseFloat(e.amount) || 0 }))
+        : [];
+      // Collection embeds its GL leg inside credit_entries (it can collect from several
+      // accounts into the one GL, so the GL has to be one row among them). Disbursement and
+      // Fund Transfer instead name their GL as the request's own top-level source — dr_amount
+      // is its amount — because there is exactly one, so it never needed a row of its own. That
+      // meant the DR/CR breakdown here only ever showed the credit side for those two types,
+      // looking like half the slip was missing. Adding it back as the first row here, rather
+      // than in credit_entries itself, keeps the stored JSON exactly what approve() posts from.
+      if ((req.request_type === 'DISBURSEMENT' || req.request_type === 'FUND_TRANSFER') && req.gl_account_no) {
+        return [
+          {
+            dbCr: 'Dr',
+            accountNo: req.gl_account_no,
+            accountName: req.gl_account_name,
+            accountType: 'GL',
+            amount: parseFloat(req.dr_amount) || 0
+          },
+          ...entries
+        ];
+      }
+      return entries;
     } catch {
       return [];
     }
@@ -187,6 +209,23 @@ export class MyDisbursementRequestsComponent implements OnInit {
     return this.getCreditEntries(req).length;
   }
 
+  /**
+   * Human-readable account type for the badge. The stored value is the backend's own code
+   * (SAVINGS / CURRENT / FIXED_DEPOSIT / RECURRING_DEPOSIT / SHARE / LOAN / GL); presentation only.
+   */
+  accountTypeLabel(accountType: string): string {
+    const labels: Record<string, string> = {
+      SAVINGS: 'Savings',
+      CURRENT: 'Current',
+      FIXED_DEPOSIT: 'Fixed Deposit',
+      RECURRING_DEPOSIT: 'Recurring Deposit',
+      SHARE: 'Share',
+      LOAN: 'Loan',
+      GL: 'GL'
+    };
+    return labels[(accountType ?? '').toUpperCase()] ?? accountType;
+  }
+
   statusClass(status: string): string {
     const map: Record<string, string> = {
       PENDING: 'mdr-status--pending',

src/app/clerk/share-closure-request/share-closure-request.component.html

@@ -1,355 +0,0 @@
-<!--
-  Copyright since 2025 Mifos Initiative
-
-  This Source Code Form is subject to the terms of the Mozilla Public
-  License, v. 2.0. If a copy of the MPL was not distributed with this
-  file, You can obtain one at http://mozilla.org/MPL/2.0/.
--->
-
-<div class="pg">
-  <header class="pg-head">
-    <div>
-      <div class="pg-eyebrow">{{ isReview ? 'CHECKER · APPROVAL' : 'CLERK · SHARE CLOSURE' }}</div>
-      <h1 class="pg-title">{{ pageTitle }}</h1>
-      <p class="pg-sub">{{ pageSubtitle }}</p>
-    </div>
-    <div class="pg-toolbar">
-      <button type="button" class="pg-btn" (click)="goBack()">
-        <mat-icon>arrow_back</mat-icon>
-        {{ isReview ? 'Back to Requests' : 'My Share Closure Requests' }}
-      </button>
-    </div>
-  </header>
-
-  <div class="pg-card">
-    <div class="pos-section-label">Share Account</div>
-    <div class="inv-form-grid" style="padding: 16px">
-      @if (!isReview) {
-        <label class="inv-form-field" style="grid-column: span 2">
-          <span>* Search Account No. / Client Name (only zero-share accounts are eligible)</span>
-          <mifosx-search-select
-            [options]="accountOptions"
-            [(ngModel)]="selectedAccountId"
-            (ngModelChange)="onAccountSelected($event)"
-            placeholder="Search share account no. or client name…"
-          ></mifosx-search-select>
-        </label>
-      }
-      @if (account) {
-        <label class="inv-form-field">
-          <span>Account No</span>
-          <input type="text" [value]="account.accountNo" readonly />
-        </label>
-        <label class="inv-form-field">
-          <span>Client</span>
-          <input type="text" [value]="account.clientName" readonly />
-        </label>
-        <label class="inv-form-field">
-          <span>Shares Held</span>
-          <input type="text" [value]="heldShares" readonly />
-        </label>
-      }
-      @if (loadingAccount) {
-        <div class="pg-empty">Loading account…</div>
-      }
-      @if (account && heldShares !== 0 && !isReview) {
-        <div class="pg-empty" style="grid-column: span 2; color: #b42318">
-          This account still holds {{ heldShares }} share(s) — all shares must be withdrawn first via the Share
-          Withdrawal workflow before it becomes eligible for closure.
-        </div>
-      }
-    </div>
-  </div>
-
-  @if (isReview && reviewRequest) {
-    <div class="pg-card">
-      <div class="pos-section-label">Client Compliance</div>
-      <div class="inv-form-grid" style="padding: 16px">
-        <div class="inv-form-field">
-          <span>KYC Status</span>
-          <span
-            class="swr-chip"
-            [class.swr-chip--ok]="reviewRequest.client_kyc_verified"
-            [class.swr-chip--warn]="!reviewRequest.client_kyc_verified"
-          >
-            {{ reviewRequest.client_kyc_status_label }}
-          </span>
-        </div>
-        <div class="inv-form-field">
-          <span>Risk Category</span>
-          <span
-            class="swr-chip"
-            [class.swr-chip--ok]="!reviewRequest.client_risk_high"
-            [class.swr-chip--warn]="reviewRequest.client_risk_high"
-          >
-            {{ reviewRequest.client_risk_category_label }}
-          </span>
-        </div>
-        <div class="inv-form-field">
-          <span>Open AML Alerts</span>
-          <span
-            class="swr-chip"
-            [class.swr-chip--ok]="!reviewRequest.client_open_aml_alerts"
-            [class.swr-chip--warn]="reviewRequest.client_open_aml_alerts > 0"
-          >
-            {{ reviewRequest.client_open_aml_alerts || 0 }}
-          </span>
-        </div>
-      </div>
-    </div>
-  }
-
-  @if (account) {
-    <div class="pg-card">
-      <div class="pos-section-label">Closure Details</div>
-      <div class="inv-form-grid" style="padding: 16px">
-        <label class="inv-form-field">
-          <span>* Closed Date</span>
-          <input type="date" [(ngModel)]="closedDate" [disabled]="isReview" />
-        </label>
-        <label class="inv-form-field" style="grid-column: span 2">
-          <span>Note (optional)</span>
-          <input
-            type="text"
-            [(ngModel)]="note"
-            [disabled]="isReview"
-            placeholder="e.g. Member exit — all shares redeemed"
-          />
-        </label>
-      </div>
-
-      @if (!isReview) {
-        <div class="inv-form-actions">
-          <button
-            type="button"
-            class="pg-btn pg-btn--primary"
-            [disabled]="!isFormValid || submitting"
-            (click)="openConfirmDialog()"
-          >
-            {{ submitting ? 'Submitting…' : 'Review &amp; Submit' }}
-          </button>
-        </div>
-      }
-    </div>
-  }
-
-  @if (isReview && reviewRequest?.status === 'PENDING') {
-    <div class="pg-card">
-      <div class="pos-section-label">Verification</div>
-      <div class="swrv-trigger">
-        <div class="swrv-trigger__icon">
-          <mat-icon>fact_check</mat-icon>
-        </div>
-        <div class="swrv-trigger__text">
-          <div class="swrv-trigger__title">Run a live backend validation</div>
-          <div class="swrv-trigger__sub">
-            Re-checks shares held, account status, active loan/guarantee and client compliance before you approve.
-          </div>
-        </div>
-        <button type="button" class="pg-btn pg-btn--primary" (click)="openValidateModal()">
-          <mat-icon>play_circle</mat-icon>
-          Validate Request
-        </button>
-      </div>
-
-      <div class="inv-form-actions">
-        <button type="button" class="pg-btn pg-btn--primary" (click)="approveReview()">
-          <mat-icon>check_circle</mat-icon>
-          Approve &amp; Close Account
-        </button>
-        <button type="button" class="pg-btn pg-btn--danger" (click)="openRejectDialog()">
-          <mat-icon>cancel</mat-icon>
-          Reject
-        </button>
-      </div>
-    </div>
-  }
-
-  @if (showValidateModal) {
-    <div class="swrv-modal">
-      <div class="swrv-modal__card">
-        <div class="swrv-modal__header">
-          <div class="swrv-modal__title">
-            <span class="swrv-modal__title-icon"><mat-icon>fact_check</mat-icon></span>
-            Validate Share Closure Request
-          </div>
-          <button type="button" class="swrv-modal__close" [disabled]="validating" (click)="closeValidateModal()">
-            <mat-icon>close</mat-icon>
-          </button>
-        </div>
-
-        <div class="swrv-modal__body">
-          <p class="swrv-modal__intro">
-            Re-checking closure of <strong>{{ account?.accountNo }}</strong> ({{ account?.clientName }}) against the
-            live account, loan/guarantee and compliance state — not just what was captured at submission time.
-          </p>
-
-          @if (backendChecks && !validating && !validateAllPassed) {
-            <div class="swrv-modal__warn">
-              <mat-icon>warning</mat-icon>
-              <div>
-                <strong>Some checks need review before approving.</strong>
-                Scroll down to see which ones failed and why.
-              </div>
-            </div>
-          }
-
-          <ol class="swrv-steps">
-            @for (step of validateSteps; track step.label; let i = $index) {
-              <li
-                class="swrv-step"
-                [class.swrv-step--active]="step.status === 'active'"
-                [class.swrv-step--done]="step.status === 'done'"
-                [class.swrv-step--failed]="step.status === 'failed'"
-              >
-                <div class="swrv-step__indicator">
-                  @if (step.status === 'done') {
-                    <mat-icon>check</mat-icon>
-                  } @else if (step.status === 'active') {
-                    <mat-icon class="swrv-spin">autorenew</mat-icon>
-                  } @else if (step.status === 'failed') {
-                    <mat-icon>close</mat-icon>
-                  } @else {
-                    <span>{{ i + 1 }}</span>
-                  }
-                </div>
-                <div class="swrv-step__content">
-                  <div class="swrv-step__label">{{ step.label }}</div>
-                  <div class="swrv-step__msg">{{ step.detail }}</div>
-                </div>
-              </li>
-            }
-          </ol>
-
-          @if (validating && validateSteps.length === 0) {
-            <div class="pg-empty">Connecting to server…</div>
-          }
-
-          @if (backendChecks && !validating && validateAllPassed) {
-            <div class="swrv-modal__result">
-              <mat-icon>verified</mat-icon>
-              <span>All checks passed — safe to approve.</span>
-            </div>
-          }
-        </div>
-
-        <div class="swrv-modal__footer">
-          @if (!validating && backendChecks) {
-            <button type="button" class="pg-btn" (click)="runBackendValidation()">
-              <mat-icon>refresh</mat-icon>
-              Re-run
-            </button>
-          }
-          @if (!validating && backendChecks && validateAllPassed) {
-            <button type="button" class="pg-btn pg-btn--primary" (click)="closeValidateModal(); approveReview()">
-              <mat-icon>check_circle</mat-icon>
-              Approve &amp; Close Account
-            </button>
-          }
-          <button type="button" class="pg-btn" [disabled]="validating" (click)="closeValidateModal()">
-            {{ validating ? 'Validating…' : 'Close' }}
-          </button>
-        </div>
-      </div>
-    </div>
-  }
-
-  @if (isReview && activityLog.length > 0) {
-    <div class="pg-card">
-      <div class="pos-section-label">Activity Log</div>
-      <table class="pg-table">
-        <thead>
-          <tr>
-            <th>Timestamp</th>
-            <th>Action</th>
-            <th>User</th>
-            <th>Note</th>
-          </tr>
-        </thead>
-        <tbody>
-          @for (entry of activityLog; track entry.timestamp) {
-            <tr>
-              <td>{{ entry.timestamp | date: 'medium' }}</td>
-              <td>{{ entry.action }}</td>
-              <td>{{ entry.user }}</td>
-              <td>{{ entry.note || '—' }}</td>
-            </tr>
-          }
-        </tbody>
-      </table>
-    </div>
-  }
-
-  @if (showConfirmDialog) {
-    <div class="swr-modal-backdrop">
-      <div class="swr-modal">
-        <h3>Confirm Share Closure Request</h3>
-        <p class="pg-sub">Review the details below before submitting for Bank Manager approval.</p>
-        <table class="pg-table">
-          <tbody>
-            <tr>
-              <td>Account No / Client</td>
-              <td>{{ account?.accountNo }} — {{ account?.clientName }}</td>
-            </tr>
-            <tr>
-              <td>Shares Held</td>
-              <td>{{ heldShares }}</td>
-            </tr>
-            <tr>
-              <td>Closed Date</td>
-              <td>{{ closedDate }}</td>
-            </tr>
-            <tr>
-              <td>Note</td>
-              <td>{{ note || '—' }}</td>
-            </tr>
-          </tbody>
-        </table>
-
-        <div class="pos-section-label" style="margin-top: 12px">Validation Checks</div>
-        <table class="pg-table">
-          <tbody>
-            @for (check of verificationChecks; track check.label) {
-              <tr>
-                <td>{{ check.label }}</td>
-                <td [class.swr-check-pass]="check.pass" [class.swr-check-fail]="!check.pass">
-                  {{ check.pass ? 'Pass — ' : 'Review — ' }}{{ check.detail }}
-                </td>
-              </tr>
-            }
-          </tbody>
-        </table>
-
-        <div class="inv-form-actions">
-          <button type="button" class="pg-btn pg-btn--primary" [disabled]="submitting" (click)="confirmSubmit()">
-            {{ submitting ? 'Submitting…' : 'Confirm & Submit' }}
-          </button>
-          <button type="button" class="pg-btn" (click)="cancelConfirmDialog()">Back to Edit</button>
-        </div>
-      </div>
-    </div>
-  }
-
-  @if (showRejectDialog) {
-    <div class="swr-modal-backdrop">
-      <div class="swr-modal">
-        <h3>Reject Share Closure Request</h3>
-        <label class="inv-form-field">
-          <span>* Rejection Reason</span>
-          <textarea rows="3" [(ngModel)]="rejectionReason"></textarea>
-        </label>
-        <div class="inv-form-actions">
-          <button
-            type="button"
-            class="pg-btn pg-btn--danger"
-            [disabled]="!rejectionReason.trim()"
-            (click)="confirmRejectReview()"
-          >
-            Confirm Reject
-          </button>
-          <button type="button" class="pg-btn" (click)="showRejectDialog = false">Cancel</button>
-        </div>
-      </div>
-    </div>
-  }
-</div>

src/app/clerk/share-closure-request/share-closure-request.component.ts

@@ -1,336 +0,0 @@
-/**
- * Copyright since 2025 Mifos Initiative
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
-
-import { Component, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
-import { catchError } from 'rxjs/operators';
-import { of } from 'rxjs';
-
-import { SharesService } from '../../shares/shares.service';
-import { ClerkShareClosureService } from '../../cashier/clerk-share-closure.service';
-import { SearchSelectComponent, SearchSelectOption } from '../../shared/search-select/search-select.component';
-
-export type ShareClosureMode = 'create' | 'review';
-
-interface ActivityEntry {
-  timestamp: string;
-  action: string;
-  user: string;
-  note?: string;
-}
-
-/**
- * Share Account Closure request — maker screen in the Clerk Dashboard. A clerk finds a member's
- * Share Account that already holds zero shares (all shares already withdrawn), enters the closed
- * date plus an optional note, and submits for Bank Manager approval. This is the ONLY entry point
- * a share account closure should go through — approval server-side executes the real Fineract
- * "close" command (see ClerkShareClosureRequestApiResource on the backend).
- */
-@Component({
-  selector: 'mifosx-share-closure-request',
-  templateUrl: './share-closure-request.component.html',
-  styleUrls: [
-    '../../cashier/cashier-shared.scss',
-    '../clerk-shared.scss',
-    '../share-withdrawal-request/share-withdrawal-request.component.scss'
-  ],
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    RouterModule,
-    MatIconModule,
-    MatSnackBarModule,
-    SearchSelectComponent
-  ]
-})
-export class ShareClosureRequestComponent implements OnInit {
-  private route = inject(ActivatedRoute);
-  private router = inject(Router);
-  private sharesService = inject(SharesService);
-  private closureService = inject(ClerkShareClosureService);
-  private snackBar = inject(MatSnackBar);
-
-  /** When embedded (e.g. opened as a popup from a list screen instead of routed to directly), mode
-   *  and requestId come from these inputs rather than the route, and success/close actions emit
-   *  events instead of navigating away. */
-  @Input() embedded = false;
-  @Input() overrideMode: ShareClosureMode | null = null;
-  @Input() overrideRequestId: number | null = null;
-  @Output() closeRequested = new EventEmitter<void>();
-  @Output() actionCompleted = new EventEmitter<void>();
-
-  mode: ShareClosureMode = 'create';
-  requestId: number | null = null;
-
-  submitting = false;
-  loadingAccount = false;
-
-  selectedAccountId = '';
-  accountOptions: SearchSelectOption[] = [];
-
-  account: any = null;
-
-  closedDate = '';
-  note = '';
-
-  activityLog: ActivityEntry[] = [];
-  reviewRequest: any = null;
-  showRejectDialog = false;
-  rejectionReason = '';
-  showConfirmDialog = false;
-
-  showValidateModal = false;
-  validating = false;
-  validateAllPassed = false;
-  backendChecks: { label: string; pass: boolean; detail: string }[] | null = null;
-  validateSteps: { label: string; detail: string; pass: boolean; status: 'pending' | 'active' | 'done' | 'failed' }[] =
-    [];
-
-  get heldShares(): number {
-    return Number(this.account?.summary?.totalApprovedShares ?? this.account?.totalApprovedShares ?? 0);
-  }
-
-  get isFormValid(): boolean {
-    if (!this.account) return false;
-    if (this.heldShares !== 0) return false;
-    if (!this.closedDate) return false;
-    return true;
-  }
-
-  /** Shown to the clerk before submit and to the manager before approval, so both can verify the same checks. */
-  get verificationChecks(): { label: string; pass: boolean; detail: string }[] {
-    return [
-      { label: 'No shares currently held', pass: this.heldShares === 0, detail: `${this.heldShares} share(s) held` },
-      { label: 'Closed Date provided', pass: !!this.closedDate, detail: this.closedDate || 'Missing' }
-    ];
-  }
-
-  get isReview(): boolean {
-    return this.mode === 'review';
-  }
-
-  get pageTitle(): string {
-    return this.isReview ? 'Review Share Closure Request' : 'New Share Closure Request';
-  }
-
-  get pageSubtitle(): string {
-    return this.isReview
-      ? "Approve or reject the clerk's share account closure request."
-      : 'Close a Share Account whose shares have already been fully withdrawn, for Bank Manager approval.';
-  }
-
-  ngOnInit(): void {
-    this.mode = this.overrideMode ?? (this.route.snapshot.data?.['mode'] as ShareClosureMode) ?? 'create';
-    const idParam = this.overrideRequestId ?? this.route.snapshot.params?.['id'];
-    this.requestId = idParam ? Number(idParam) : null;
-
-    const today = new Date();
-    this.closedDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
-
-    this.sharesService
-      .getShareAccountSummaries()
-      .pipe(catchError(() => of([])))
-      .subscribe((rows: any[]) => {
-        this.accountOptions = (rows || [])
-          .filter((r) => (r.status?.value || '').toLowerCase() === 'active' && Number(r.totalApprovedShares ?? 0) === 0)
-          .map((r) => ({
-            value: String(r.id),
-            label: `${r.accountNo} — ${r.clientName} (0 shares held)`,
-            searchText: `${r.accountNo} ${r.clientName}`
-          }));
-      });
-
-    if (this.requestId && this.mode === 'review') {
-      this.loadReviewRequest(this.requestId);
-    }
-  }
-
-  onAccountSelected(accountId: string): void {
-    this.selectedAccountId = accountId;
-    if (!accountId) {
-      this.account = null;
-      return;
-    }
-    this.loadingAccount = true;
-    this.sharesService
-      .getSharesAccountData(accountId, false)
-      .pipe(catchError(() => of(null)))
-      .subscribe((acc: any) => {
-        this.account = acc;
-        this.loadingAccount = false;
-      });
-  }
-
-  private loadReviewRequest(id: number): void {
-    this.closureService.getById(id).subscribe({
-      next: (req: any) => {
-        this.reviewRequest = req;
-        this.closedDate = req.closed_date ? String(req.closed_date).split('T')[0].split(' ')[0] : this.closedDate;
-        this.note = req.note ?? '';
-
-        if (req.activity_log) {
-          try {
-            this.activityLog = JSON.parse(req.activity_log);
-          } catch {
-            this.activityLog = [];
-          }
-        }
-
-        this.sharesService
-          .getSharesAccountData(String(req.share_account_id), false)
-          .pipe(catchError(() => of(null)))
-          .subscribe((acc: any) => (this.account = acc));
-      },
-      error: () => this.snackBar.open('Failed to load share closure request.', 'Close', { duration: 5000 })
-    });
-  }
-
-  /** "Review before Save" per requirement — opens the confirm dialog instead of submitting directly. */
-  openConfirmDialog(): void {
-    if (!this.isFormValid || this.submitting) {
-      return;
-    }
-    this.showConfirmDialog = true;
-  }
-
-  cancelConfirmDialog(): void {
-    this.showConfirmDialog = false;
-  }
-
-  confirmSubmit(): void {
-    this.showConfirmDialog = false;
-    this.submitting = true;
-    const payload = {
-      shareAccountId: Number(this.selectedAccountId),
-      accountNo: this.account?.accountNo,
-      clientId: this.account?.clientId,
-      clientName: this.account?.clientName,
-      closedDate: this.closedDate,
-      note: this.note
-    };
-    this.closureService.submit(payload).subscribe({
-      next: () => {
-        this.snackBar.open('Share closure request submitted for approval.', 'Close', { duration: 4000 });
-        if (this.embedded) {
-          this.actionCompleted.emit();
-        } else {
-          this.router.navigate(['/clerk/dashboard']);
-        }
-      },
-      error: (err) => {
-        this.submitting = false;
-        this.snackBar.open(err?.error?.defaultUserMessage || 'Could not submit the request.', 'Close', {
-          duration: 6000
-        });
-      }
-    });
-  }
-
-  openValidateModal(): void {
-    if (!this.reviewRequest) return;
-    this.showValidateModal = true;
-    this.runBackendValidation();
-  }
-
-  closeValidateModal(): void {
-    if (this.validating) return;
-    this.showValidateModal = false;
-  }
-
-  /** Re-checks live backend state (shares still zero, account still active, no active loan/guarantee,
-   *  compliance standing) rather than relying on data already loaded in the browser — catches drift
-   *  since submission. Results are revealed one step at a time for the pipeline-style animation. */
-  runBackendValidation(): void {
-    if (!this.reviewRequest || this.validating) return;
-    this.validating = true;
-    this.backendChecks = null;
-    this.validateSteps = [];
-    this.closureService.validate(this.reviewRequest.id).subscribe({
-      next: (res: any) => {
-        const checks = (res?.checks ?? []) as { label: string; pass: boolean; detail: string }[];
-        this.backendChecks = checks;
-        this.validateAllPassed = !!res?.allPassed;
-        this.validateSteps = checks.map((c) => ({ ...c, status: 'pending' as const }));
-        this.revealValidateSteps(0);
-      },
-      error: (err) => {
-        this.validating = false;
-        this.snackBar.open(err?.error?.defaultUserMessage || 'Could not run backend validation.', 'Close', {
-          duration: 6000
-        });
-      }
-    });
-  }
-
-  private revealValidateSteps(index: number): void {
-    if (index >= this.validateSteps.length) {
-      this.validating = false;
-      return;
-    }
-    this.validateSteps[index].status = 'active';
-    setTimeout(() => {
-      this.validateSteps[index].status = this.validateSteps[index].pass ? 'done' : 'failed';
-      this.revealValidateSteps(index + 1);
-    }, 320);
-  }
-
-  approveReview(): void {
-    if (!this.reviewRequest) return;
-    this.closureService.approve(this.reviewRequest.id).subscribe({
-      next: () => {
-        this.snackBar.open('Share closure approved — account closed.', 'Close', { duration: 6000 });
-        if (this.embedded) {
-          this.actionCompleted.emit();
-        } else {
-          this.router.navigate(['/checker-inbox-and-tasks/share-closure-requests']);
-        }
-      },
-      error: (err) =>
-        this.snackBar.open(err?.error?.defaultUserMessage || 'Could not approve the request.', 'Close', {
-          duration: 6000
-        })
-    });
-  }
-
-  openRejectDialog(): void {
-    this.showRejectDialog = true;
-    this.rejectionReason = '';
-  }
-
-  confirmRejectReview(): void {
-    if (!this.reviewRequest || !this.rejectionReason.trim()) return;
-    this.closureService.reject(this.reviewRequest.id, this.rejectionReason.trim()).subscribe({
-      next: () => {
-        this.showRejectDialog = false;
-        this.snackBar.open('Share closure request rejected.', 'Close', { duration: 4000 });
-        if (this.embedded) {
-          this.actionCompleted.emit();
-        } else {
-          this.router.navigate(['/checker-inbox-and-tasks/share-closure-requests']);
-        }
-      },
-      error: (err) =>
-        this.snackBar.open(err?.error?.defaultUserMessage || 'Could not reject the request.', 'Close', {
-          duration: 6000
-        })
-    });
-  }
-
-  goBack(): void {
-    if (this.embedded) {
-      this.closeRequested.emit();
-      return;
-    }
-    this.router.navigate(this.isReview ? ['/checker-inbox-and-tasks/share-closure-requests'] : ['/clerk/dashboard']);
-  }
-}

src/app/clerk/share-withdrawal-request/share-withdrawal-request.component.html

@@ -148,6 +148,16 @@
         </label>
       </div>
 
+      @if (account && remainingShares === 0) {
+        <div class="swr-close-notice">
+          <mat-icon>lock</mat-icon>
+          <span>
+            This withdraws <strong>all</strong> shares on this account. Approving it will
+            <strong>close the share account automatically</strong> — no separate closure step is needed.
+          </span>
+        </div>
+      }
+
       @if (!isReview) {
         <div class="inv-form-actions">
           <button
@@ -355,9 +365,14 @@
                 {{ requestedShares }} @ ₹{{ unitPrice | number: '1.2-2' }} = ₹{{ withdrawalValue | number: '1.2-2' }}
               </td>
             </tr>
-            <tr>
+            <tr [class.swr-close-row]="remainingShares === 0">
               <td>Remaining Shares After Withdrawal</td>
-              <td>{{ remainingShares }}</td>
+              <td>
+                {{ remainingShares }}
+                @if (remainingShares === 0) {
+                  <span class="swr-close-tag"><mat-icon>lock</mat-icon> Account will be closed on approval</span>
+                }
+              </td>
             </tr>
             <tr>
               <td>Requested Date</td>

src/app/clerk/share-withdrawal-request/share-withdrawal-request.component.scss

@@ -78,6 +78,53 @@
   }
 }
 
+/* ---------- Account-will-close notice ---------- */
+.swr-close-notice {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 4px 16px 16px;
+  padding: 10px 16px;
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  border-left: 3px solid #d97706;
+  border-radius: 8px;
+  font-size: 13px;
+  color: #92400e;
+
+  mat-icon {
+    color: #d97706;
+    flex-shrink: 0;
+  }
+
+  strong {
+    color: #7c2d12;
+  }
+}
+
+.swr-close-row td {
+  color: #92400e;
+}
+
+.swr-close-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 8px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: #fffbeb;
+  color: #d97706;
+  font-size: 11px;
+  font-weight: 700;
+
+  mat-icon {
+    font-size: 14px;
+    width: 14px;
+    height: 14px;
+  }
+}
+
 /* ---------- Verification trigger card ---------- */
 .swrv-trigger {
   display: flex;

src/app/clerk/share-withdrawal-request/share-withdrawal-request.component.ts

@@ -365,8 +365,8 @@ export class ShareWithdrawalRequestComponent implements OnInit {
           res?.settlementAmount != null
             ? `Share withdrawal approved. ₹${Number(res.settlementAmount).toLocaleString('en-IN', { minimumFractionDigits: 2 })} credited to the linked savings account.`
             : (res?.settlementWarning ?? 'Share withdrawal approved and processed.');
-        if (res?.autoClosureRequestId) {
-          message += ' All shares now withdrawn — a Share Closure Request was auto-submitted for manager review.';
+        if (res?.accountClosed) {
+          message += ' All shares withdrawn — the share account has been closed.';
         }
         this.snackBar.open(message, 'Close', { duration: 8000 });
         if (this.embedded) {

src/app/clients/client-stepper/client-family-members-step/client-family-member-child-dialog/client-family-member-child-dialog.component.html

@@ -1,90 +1,110 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
 <div class="fm-dialog">
-  <div class="fm-dialog__header" style="display: flex; align-items: center; gap: 8px;">
+  <div class="fm-dialog__header" style="display: flex; align-items: center; gap: 8px">
     <mat-icon class="fm-dialog__icon">people</mat-icon>
-    <span style="font-weight: 500; font-size: 18px;">CHILDREN</span>
+    <span style="font-weight: 500; font-size: 18px">CHILDREN</span>
   </div>
 
   <mat-dialog-content>
     <form [formGroup]="childrenForm">
-      <div formArrayName="children" style="margin-top: 12px; background: #fff; padding: 12px;">
+      <div formArrayName="children" style="margin-top: 12px; background: #fff; padding: 12px">
         @for (child of children.controls; track $index) {
-        <div [formGroupName]="$index"
-          style="position: relative; padding: 24px 16px 16px; margin-top: 16px; margin-bottom: 24px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff;">
-          <div class="fm-grid">
-            <mat-form-field appearance="outline">
-              <mat-label>Child Full Name*</mat-label>
-              <input matInput formControlName="fullName" required placeholder="Child Full Name*" />
-            </mat-form-field>
-            <mat-form-field appearance="outline">
-              <mat-label>Gender*</mat-label>
-              <mat-select formControlName="genderId" required>
-                @for (g of genderIdOptions; track g.id) {
-                <mat-option [value]="g.id">{{ g.name }}</mat-option>
+          <div
+            [formGroupName]="$index"
+            style="
+              position: relative;
+              padding: 24px 16px 16px;
+              margin-top: 16px;
+              margin-bottom: 24px;
+              border: 1px solid #e0e0e0;
+              border-radius: 8px;
+              background: #fff;
+            "
+          >
+            <div class="fm-grid">
+              <mat-form-field appearance="outline">
+                <mat-label>Child Full Name*</mat-label>
+                <input matInput formControlName="fullName" required placeholder="Child Full Name*" />
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Gender*</mat-label>
+                <mat-select formControlName="genderId" required>
+                  @for (g of genderIdOptions; track g.id) {
+                    <mat-option [value]="g.id">{{ g.name }}</mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field appearance="outline" (click)="childDobPicker.open()">
+                <mat-label>Date of Birth</mat-label>
+                <input matInput [max]="maxDate" [matDatepicker]="childDobPicker" formControlName="dateOfBirth" />
+                <mat-datepicker-toggle matSuffix [for]="childDobPicker"></mat-datepicker-toggle>
+                <mat-datepicker #childDobPicker></mat-datepicker>
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Nationality</mat-label>
+                <mat-select formControlName="nationality">
+                  <mat-option value="INDIAN">Indian</mat-option>
+                  <mat-option value="NRI">NRI</mat-option>
+                  <mat-option value="FOREIGN_NATIONAL">Foreign National</mat-option>
+                  <mat-option value="OTHER">Other</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Aadhaar Number (Optional)</mat-label>
+                <input
+                  matInput
+                  formControlName="aadhaarNumber"
+                  maxlength="12"
+                  placeholder="12-digit Aadhaar"
+                  (keypress)="$event.charCode >= 48 && $event.charCode <= 57 ? true : $event.preventDefault()"
+                />
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>PAN Number (Optional)</mat-label>
+                <input
+                  matInput
+                  formControlName="panNumber"
+                  maxlength="10"
+                  placeholder="ABCDE1234F"
+                  style="text-transform: uppercase"
+                  (input)="
+                    $any(children.at($index))
+                      .get('panNumber')
+                      ?.setValue($any($event.target).value.toUpperCase(), { emitEvent: false })
+                  "
+                />
+                @if (
+                  $any(children.at($index)).get('panNumber')?.hasError('pattern') &&
+                  $any(children.at($index)).get('panNumber')?.touched
+                ) {
+                  <mat-error>Invalid PAN format</mat-error>
                 }
-              </mat-select>
-            </mat-form-field>
-            <mat-form-field appearance="outline" (click)="childDobPicker.open()">
-              <mat-label>Date of Birth</mat-label>
-              <input matInput [max]="maxDate" [matDatepicker]="childDobPicker" formControlName="dateOfBirth" />
-              <mat-datepicker-toggle matSuffix [for]="childDobPicker"></mat-datepicker-toggle>
-              <mat-datepicker #childDobPicker></mat-datepicker>
-            </mat-form-field>
-            <mat-form-field appearance="outline">
-              <mat-label>Nationality</mat-label>
-              <mat-select formControlName="nationality">
-                <mat-option value="INDIAN">Indian</mat-option>
-                <mat-option value="NRI">NRI</mat-option>
-                <mat-option value="FOREIGN_NATIONAL">Foreign National</mat-option>
-                <mat-option value="OTHER">Other</mat-option>
-              </mat-select>
-            </mat-form-field>
-            <mat-form-field appearance="outline">
-              <mat-label>Aadhaar Number (Optional)</mat-label>
-              <input
-                matInput
-                formControlName="aadhaarNumber"
-                maxlength="12"
-                placeholder="12-digit Aadhaar"
-                (keypress)="$event.charCode >= 48 && $event.charCode <= 57 ? true : $event.preventDefault()"
-              />
-            </mat-form-field>
-            <mat-form-field appearance="outline">
-              <mat-label>PAN Number (Optional)</mat-label>
-              <input
-                matInput
-                formControlName="panNumber"
-                maxlength="10"
-                placeholder="ABCDE1234F"
-                style="text-transform: uppercase"
-                (input)="
-                  $any(children.at($index)).get('panNumber')
-                    ?.setValue($any($event.target).value.toUpperCase(), { emitEvent: false })
-                "
-              />
-              @if (
-                $any(children.at($index)).get('panNumber')?.hasError('pattern') && $any(children.at($index)).get('panNumber')?.touched
-              ) {
-                <mat-error>Invalid PAN format</mat-error>
-              }
-            </mat-form-field>
+              </mat-form-field>
+            </div>
           </div>
-        </div>
-        @if ($index < children.controls.length - 1) { <div style="border-bottom: 1px dashed #ccc; margin-bottom: 16px;">
+          @if ($index < children.controls.length - 1) {
+            <div style="border-bottom: 1px dashed #ccc; margin-bottom: 16px"></div>
+          }
+        }
+        <div style="border-bottom: 1px dashed #ccc; margin-bottom: 16px"></div>
+        <button mat-stroked-button type="button" color="primary" (click)="addChild()">
+          <mat-icon>add</mat-icon> Add Another Child
+        </button>
       </div>
-      }
-      }
-      <div style="border-bottom: 1px dashed #ccc; margin-bottom: 16px;"></div>
-      <button mat-stroked-button type="button" color="primary" (click)="addChild()">
-        <mat-icon>add</mat-icon> Add Another Child
-      </button>
-</div>
-</form>
-</mat-dialog-content>
+    </form>
+  </mat-dialog-content>
 
-<mat-dialog-actions align="end">
-  <button mat-stroked-button mat-dialog-close type="button">Cancel</button>
-  <button mat-flat-button color="primary" type="button" [disabled]="childrenForm.invalid" (click)="submit()">
-    Add Member
-  </button>
-</mat-dialog-actions>
+  <mat-dialog-actions align="end">
+    <button mat-stroked-button mat-dialog-close type="button">Cancel</button>
+    <button mat-flat-button color="primary" type="button" [disabled]="childrenForm.invalid" (click)="submit()">
+      Add Member
+    </button>
+  </mat-dialog-actions>
 </div>

src/app/clients/client-stepper/client-family-members-step/client-family-member-child-dialog/client-family-member-child-dialog.component.ts

@@ -1,4 +1,12 @@
-import { Component, Inject, OnInit } from '@angular/core';
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, OnInit, inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { UntypedFormBuilder, UntypedFormGroup, UntypedFormArray, Validators } from '@angular/forms';
 
@@ -13,7 +21,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 
 @Component({
-  selector: 'cbs-client-family-member-child-dialog',
+  selector: 'mifosx-client-family-member-child-dialog',
   templateUrl: './client-family-member-child-dialog.component.html',
   styleUrls: ['../client-family-member-dialog/client-family-member-dialog.component.scss'],
   standalone: true,
@@ -30,17 +38,16 @@ import { CommonModule } from '@angular/common';
   ]
 })
 export class ClientFamilyMemberChildDialogComponent implements OnInit {
+  dialogRef = inject(MatDialogRef<ClientFamilyMemberChildDialogComponent>);
+  data = inject(MAT_DIALOG_DATA);
+  private formBuilder = inject(UntypedFormBuilder);
 
   childrenForm: UntypedFormGroup;
   genderIdOptions: any[];
   maxDate: Date = new Date();
 
-  constructor(
-    public dialogRef: MatDialogRef<ClientFamilyMemberChildDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
-    private formBuilder: UntypedFormBuilder
-  ) {
-    this.genderIdOptions = data.genderIdOptions;
+  constructor() {
+    this.genderIdOptions = this.data.genderIdOptions;
 
     this.childrenForm = this.formBuilder.group({
       children: this.formBuilder.array([])
@@ -50,15 +57,26 @@ export class ClientFamilyMemberChildDialogComponent implements OnInit {
   ngOnInit() {
     if (this.data.children && this.data.children.length > 0) {
       this.data.children.forEach((child: any) => {
-        this.children.push(this.formBuilder.group({
-          id: [child.id],
-          fullName: [child.fullName, Validators.required],
-          genderId: [child.genderId, Validators.required],
-          dateOfBirth: [child.dateOfBirth ? new Date(child.dateOfBirth) : ''],
-          nationality: [child.nationality || 'INDIAN'],
-          aadhaarNumber: [child.aadhaarNumber || ''],
-          panNumber: [child.panNumber || '', Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)]
-        }));
+        this.children.push(
+          this.formBuilder.group({
+            id: [child.id],
+            fullName: [
+              child.fullName,
+              Validators.required
+            ],
+            genderId: [
+              child.genderId,
+              Validators.required
+            ],
+            dateOfBirth: [child.dateOfBirth ? new Date(child.dateOfBirth) : ''],
+            nationality: [child.nationality || 'INDIAN'],
+            aadhaarNumber: [child.aadhaarNumber || ''],
+            panNumber: [
+              child.panNumber || '',
+              Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)
+            ]
+          })
+        );
       });
     } else {
       this.addChild();
@@ -72,12 +90,21 @@ export class ClientFamilyMemberChildDialogComponent implements OnInit {
   createChildFormGroup(): UntypedFormGroup {
     return this.formBuilder.group({
       id: [''],
-      fullName: ['', Validators.required],
-      genderId: ['', Validators.required],
+      fullName: [
+        '',
+        Validators.required
+      ],
+      genderId: [
+        '',
+        Validators.required
+      ],
       dateOfBirth: [''],
       nationality: ['INDIAN'],
       aadhaarNumber: [''],
-      panNumber: ['', Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)]
+      panNumber: [
+        '',
+        Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)
+      ]
     });
   }
 
@@ -94,5 +121,4 @@ export class ClientFamilyMemberChildDialogComponent implements OnInit {
       this.dialogRef.close(this.children.value);
     }
   }
-
 }

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html

@@ -144,7 +144,7 @@
             <span class="fm-readonly-label">Children</span>
             <div class="fm-children-list">
               @for (child of familyMemberForm.get('children')?.value; track $index) {
-                <div class="fm-child-item" style="font-size: 13px; color: #555; margin-top: 4px;">
+                <div class="fm-child-item" style="font-size: 13px; color: #555; margin-top: 4px">
                   <span>{{ child.fullName }}</span>
                   @if (child.dateOfBirth) {
                     <span> · DOB: {{ child.dateOfBirth | date: 'dd MMM yyyy' }}</span>
@@ -465,11 +465,17 @@
 
         <!-- Children Section -->
         @if (isSpouse) {
-          <div class="fm-section-label" style="margin-top: 16px;">Children</div>
-          <div class="fm-checkbox-row" style="display: flex; align-items: center; justify-content: space-between;">
+          <div class="fm-section-label" style="margin-top: 16px">Children</div>
+          <div class="fm-checkbox-row" style="display: flex; align-items: center; justify-content: space-between">
             <mat-checkbox formControlName="hasChildren">Does this family member have a child/children?</mat-checkbox>
             @if (familyMemberForm.get('hasChildren')?.value) {
-              <button mat-stroked-button type="button" color="primary" (click)="openChildrenDialog()" style="margin-left: 16px;">
+              <button
+                mat-stroked-button
+                type="button"
+                color="primary"
+                (click)="openChildrenDialog()"
+                style="margin-left: 16px"
+              >
                 <mat-icon>edit</mat-icon> Edit Children Details ({{ children.length }})
               </button>
             }

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.ts

@@ -206,12 +206,21 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
           this.children.push(
             this.formBuilder.group({
               id: [child.id],
-              fullName: [child.fullName, Validators.required],
-              genderId: [child.genderId, Validators.required],
+              fullName: [
+                child.fullName,
+                Validators.required
+              ],
+              genderId: [
+                child.genderId,
+                Validators.required
+              ],
               dateOfBirth: [child.dateOfBirth ? new Date(child.dateOfBirth) : ''],
               nationality: [child.nationality || 'INDIAN'],
               aadhaarNumber: [child.aadhaarNumber || ''],
-              panNumber: [child.panNumber || '', Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)]
+              panNumber: [
+                child.panNumber || '',
+                Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)
+              ]
             })
           );
         });
@@ -249,7 +258,7 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
       children: this.formBuilder.array([])
     });
 
-    this.familyMemberForm.get('hasChildren')?.valueChanges.subscribe(value => {
+    this.familyMemberForm.get('hasChildren')?.valueChanges.subscribe((value) => {
       if (value && !this.hasChildrenChecked) {
         this.openChildrenDialog();
       } else if (!value) {
@@ -264,8 +273,9 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
   }
 
   async openChildrenDialog() {
-    // dynamically import the dialog to avoid circular dependency issues if any
-    const { ClientFamilyMemberChildDialogComponent } = await import('../client-family-member-child-dialog/client-family-member-child-dialog.component');
+    // Dynamically import the dialog to avoid a circular dependency between the two dialogs.
+    const { ClientFamilyMemberChildDialogComponent } =
+      await import('../client-family-member-child-dialog/client-family-member-child-dialog.component');
 
     const dialogRef = this.dialog.open(ClientFamilyMemberChildDialogComponent, {
       data: {
@@ -278,24 +288,33 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
     dialogRef.afterClosed().subscribe((result: any[]) => {
       if (result) {
         this.children.clear();
-        result.forEach(child => {
-          this.children.push(this.formBuilder.group({
-            id: [child.id],
-            fullName: [child.fullName, Validators.required],
-            genderId: [child.genderId, Validators.required],
-            dateOfBirth: [child.dateOfBirth],
-            nationality: [child.nationality || 'INDIAN'],
-            aadhaarNumber: [child.aadhaarNumber || ''],
-            panNumber: [child.panNumber || '', Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)]
-          }));
+        result.forEach((child) => {
+          this.children.push(
+            this.formBuilder.group({
+              id: [child.id],
+              fullName: [
+                child.fullName,
+                Validators.required
+              ],
+              genderId: [
+                child.genderId,
+                Validators.required
+              ],
+              dateOfBirth: [child.dateOfBirth],
+              nationality: [child.nationality || 'INDIAN'],
+              aadhaarNumber: [child.aadhaarNumber || ''],
+              panNumber: [
+                child.panNumber || '',
+                Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)
+              ]
+            })
+          );
         });
         this.hasChildrenChecked = true;
         this.familyMemberForm.patchValue({ hasChildren: true }, { emitEvent: false });
-      } else {
-        if (this.children.length === 0) {
-          this.hasChildrenChecked = false;
-          this.familyMemberForm.patchValue({ hasChildren: false }, { emitEvent: false });
-        }
+      } else if (this.children.length === 0) {
+        this.hasChildrenChecked = false;
+        this.familyMemberForm.patchValue({ hasChildren: false }, { emitEvent: false });
       }
     });
   }
@@ -303,12 +322,21 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
   createChildFormGroup(): UntypedFormGroup {
     return this.formBuilder.group({
       id: [''],
-      fullName: ['', Validators.required],
-      genderId: ['', Validators.required],
+      fullName: [
+        '',
+        Validators.required
+      ],
+      genderId: [
+        '',
+        Validators.required
+      ],
       dateOfBirth: [''],
       nationality: ['INDIAN'],
       aadhaarNumber: [''],
-      panNumber: ['', Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)]
+      panNumber: [
+        '',
+        Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)
+      ]
     });
   }
 

src/app/clients/client-stepper/client-general-step/client-general-step.component.html

@@ -136,7 +136,14 @@
                 | translate
             }}
           </mat-label>
-          <input matInput required formControlName="fullname" autocomplete="off" />
+          <input
+            matInput
+            required
+            formControlName="fullname"
+            autocomplete="off"
+            (blur)="capitalizeControl('fullname')"
+            style="text-transform: capitalize"
+          />
           @if (createClientForm.controls.fullname.hasError('required')) {
             <mat-error>Client name is <strong>required</strong></mat-error>
           } @else if (createClientForm.controls.fullname.hasError('pattern')) {
@@ -151,10 +158,12 @@
           <div class="full-name-row full-width">
             <div class="full-name-preview">
               <span class="full-name-label">Entity Name:</span>
-              <span class="full-name-value">{{ createClientForm.get('fullname')?.value }}</span>
+              <span class="full-name-value" style="text-transform: capitalize">{{
+                createClientForm.get('fullname')?.value
+              }}</span>
             </div>
             <div class="verify-inline">
-              @if (!sanctionsVerified && !sanctionsBlocked) {
+              @if (!sanctionsVerified && (!sanctionsBlocked || sanctionsNeedsRescreen)) {
                 <button
                   mat-stroked-button
                   color="primary"
@@ -164,27 +173,27 @@
                   (click)="verifySanctions()"
                 >
                   <fa-icon icon="shield-alt" class="verify-name-icon"></fa-icon>
-                  Verify Entity
+                  {{ sanctionsNeedsRescreen ? 'Re-verify Entity' : 'Verify Entity' }}
                 </button>
               }
               @if (sanctionsVerified) {
-                <span class="sanctions-citation">RBI KYC Master Direction (2016) — Section 51 &amp; PMLA 2002</span>
+                <span class="sanctions-citation">{{ sanctionsCitation }}</span>
                 <span class="verify-status verified"> <fa-icon icon="check-circle"></fa-icon> Verified </span>
                 <mat-icon
                   class="sanctions-info-icon"
-                  matTooltip="All customer names must be verified against the UN Security Council Consolidated List before account opening and periodically thereafter. Positive matches must be escalated to the Principal Officer immediately."
+                  [matTooltip]="sanctionsTooltip"
                   matTooltipClass="sanctions-tooltip"
                   >info</mat-icon
                 >
               }
               @if (sanctionsBlocked) {
-                <span class="sanctions-citation">RBI KYC Master Direction (2016) — Section 51 &amp; PMLA 2002</span>
+                <span class="sanctions-citation">{{ sanctionsCitation }}</span>
                 <span class="verify-status blocked">
-                  <fa-icon icon="exclamation-triangle"></fa-icon> Sanctions Match
+                  <fa-icon icon="exclamation-triangle"></fa-icon> {{ sanctionsStatusLabel }}
                 </span>
                 <mat-icon
                   class="sanctions-info-icon blocked-info"
-                  matTooltip="All customer names must be verified against the UN Security Council Consolidated List before account opening and periodically thereafter. Positive matches must be escalated to the Principal Officer immediately."
+                  [matTooltip]="sanctionsTooltip"
                   matTooltipClass="sanctions-tooltip"
                   >info</mat-icon
                 >
@@ -214,7 +223,14 @@
             <mat-form-field appearance="outline" class="name-field first-name">
               <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
               <span matPrefix class="field-prefix-icon"><mat-icon>badge</mat-icon></span>
-              <input matInput required formControlName="firstname" autocomplete="off" />
+              <input
+                matInput
+                required
+                formControlName="firstname"
+                autocomplete="off"
+                (blur)="capitalizeControl('firstname')"
+                style="text-transform: capitalize"
+              />
               @if (createClientForm.controls.firstname.hasError('required')) {
                 <mat-error>First name is <strong>required</strong></mat-error>
               } @else if (createClientForm.controls.firstname.hasError('pattern')) {
@@ -228,7 +244,13 @@
             <mat-form-field appearance="outline" class="name-field middle-name">
               <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
               <span matPrefix class="field-prefix-icon"><mat-icon>person_outline</mat-icon></span>
-              <input matInput formControlName="middlename" autocomplete="off" />
+              <input
+                matInput
+                formControlName="middlename"
+                autocomplete="off"
+                (blur)="capitalizeControl('middlename')"
+                style="text-transform: capitalize"
+              />
               @if (
                 createClientForm.controls.middlename?.hasError('pattern') &&
                 createClientForm.controls.middlename?.touched
@@ -241,7 +263,14 @@
             <mat-form-field appearance="outline" class="name-field last-name">
               <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
               <span matPrefix class="field-prefix-icon"><mat-icon>person</mat-icon></span>
-              <input matInput required formControlName="lastname" autocomplete="off" />
+              <input
+                matInput
+                required
+                formControlName="lastname"
+                autocomplete="off"
+                (blur)="capitalizeControl('lastname')"
+                style="text-transform: capitalize"
+              />
               @if (createClientForm.controls.lastname.hasError('required')) {
                 <mat-error>Last name is <strong>required</strong></mat-error>
               } @else if (createClientForm.controls.lastname.hasError('pattern')) {
@@ -261,7 +290,7 @@
               <span class="full-name-value">{{ fullNamePreview }}</span>
             </div>
             <div class="verify-inline">
-              @if (!sanctionsVerified && !sanctionsBlocked) {
+              @if (!sanctionsVerified && (!sanctionsBlocked || sanctionsNeedsRescreen)) {
                 <button
                   mat-stroked-button
                   color="primary"
@@ -271,27 +300,27 @@
                   (click)="verifySanctions()"
                 >
                   <fa-icon icon="shield-alt" class="verify-name-icon"></fa-icon>
-                  Verify Client
+                  {{ sanctionsNeedsRescreen ? 'Re-verify Client' : 'Verify Client' }}
                 </button>
               }
               @if (sanctionsVerified) {
-                <span class="sanctions-citation">RBI KYC Master Direction (2016) — Section 51 &amp; PMLA 2002</span>
+                <span class="sanctions-citation">{{ sanctionsCitation }}</span>
                 <span class="verify-status verified"> <fa-icon icon="check-circle"></fa-icon> Verified </span>
                 <mat-icon
                   class="sanctions-info-icon"
-                  matTooltip="All customer names must be verified against the UN Security Council Consolidated List before account opening and periodically thereafter. Positive matches must be escalated to the Principal Officer immediately."
+                  [matTooltip]="sanctionsTooltip"
                   matTooltipClass="sanctions-tooltip"
                   >info</mat-icon
                 >
               }
               @if (sanctionsBlocked) {
-                <span class="sanctions-citation">RBI KYC Master Direction (2016) — Section 51 &amp; PMLA 2002</span>
+                <span class="sanctions-citation">{{ sanctionsCitation }}</span>
                 <span class="verify-status blocked">
-                  <fa-icon icon="exclamation-triangle"></fa-icon> Sanctions Match
+                  <fa-icon icon="exclamation-triangle"></fa-icon> {{ sanctionsStatusLabel }}
                 </span>
                 <mat-icon
                   class="sanctions-info-icon blocked-info"
-                  matTooltip="All customer names must be verified against the UN Security Council Consolidated List before account opening and periodically thereafter. Positive matches must be escalated to the Principal Officer immediately."
+                  [matTooltip]="sanctionsTooltip"
                   matTooltipClass="sanctions-tooltip"
                   >info</mat-icon
                 >
@@ -365,7 +394,7 @@
       }
     </div>
 
-    <!-- Minor / Guardian Mapping (mandatory if age < 18) -->
+    <!-- Minor / Guardian Mapping (mandatory for a minor -- see MINOR_AGE_THRESHOLD) -->
     @if (isMinor && createClientForm.get('legalFormId')?.value === LegalFormId.PERSON) {
       <div class="guardian-section">
         <!-- Header bar -->
@@ -694,6 +723,9 @@
           }
         </mat-form-field>
 
+        <!-- Date of Incorporation is captured on the KYC step, next to the entity PAN it is
+             verified against — see client-kyc-step's `incorporationDate` control. -->
+
         <!-- Authorized Signatories (multiple, registered clients) -->
         <div class="form-field full-width signatory-section">
           <h4 class="section-title signatory-title">
@@ -822,7 +854,8 @@
                         <div class="guardian-result-item__info">
                           <span class="guardian-result-item__name">{{ result.displayName }}</span>
                           <span class="guardian-result-item__meta"
-                            >ID: {{ result.id }} &middot; A/C: {{ result.accountNumber }} &middot;
+                            >ID: {{ result.id }} &middot; A/C: {{ result.accountNumber }}
+                            &middot;
                             {{ result.officeName }}
                             @if (result.dateOfBirth) {
                               &middot; DOB: {{ result.dateOfBirth | dateFormat }}
@@ -936,6 +969,11 @@
           createClientForm.get('alternateMobileNo')?.touched
         ) {
           <mat-error>Enter valid 10-digit number (starts with 6-9)</mat-error>
+        } @else if (
+          createClientForm.get('alternateMobileNo')?.hasError('sameAsMobile') &&
+          createClientForm.get('alternateMobileNo')?.touched
+        ) {
+          <mat-error>Alternate number can't be the same as Mobile No</mat-error>
         }
       </mat-form-field>
 
@@ -946,7 +984,11 @@
             color="primary"
             type="button"
             class="verify-btn"
-            [disabled]="readOnly || createClientForm.get('alternateMobileNo')?.value?.length !== 10"
+            [disabled]="
+              readOnly ||
+              createClientForm.get('alternateMobileNo')?.value?.length !== 10 ||
+              createClientForm.get('alternateMobileNo')?.hasError('sameAsMobile')
+            "
             (click)="verifyAlternateDIP()"
           >
             <fa-icon icon="shield-alt" class="m-r-10"></fa-icon>
@@ -1148,6 +1190,79 @@
     </div>
   }
 
+  <!--
+    Section: Turnover & Risk (Non-Individual only)
+
+    An entity has no salary to declare, so the individual Financial & Classification section below
+    never applied to it — which left a company with no turnover on file at all, and its risk stuck
+    on the flat entity default. Turnover is the size signal the branch actually has at onboarding,
+    so it is captured here and the risk band it produces is shown right beside it: the officer sees
+    the grade move as they type, instead of first meeting it on the KYC tab.
+  -->
+  @if (createClientForm.get('legalFormId')?.value === LegalFormId.ENTITY) {
+    <div class="section-block">
+      <h4 class="section-title">
+        <fa-icon icon="chart-line" class="section-icon"></fa-icon>
+        Turnover &amp; Risk Profile
+      </h4>
+      <div class="form-grid">
+        <mat-form-field appearance="outline" class="form-field">
+          <mat-label>Monthly Turnover</mat-label>
+          <span matPrefix class="rupee-prefix">&#8377;</span>
+          <input matInput type="number" formControlName="monthlyTurnover" min="0" />
+          <mat-hint>Yearly turnover fills in automatically (× 12)</mat-hint>
+          @if (
+            createClientForm.get('monthlyTurnover')?.hasError('pattern') &&
+            createClientForm.get('monthlyTurnover')?.touched
+          ) {
+            <mat-error>Enter a valid amount</mat-error>
+          } @else if (
+            createClientForm.get('monthlyTurnover')?.hasError('min') && createClientForm.get('monthlyTurnover')?.touched
+          ) {
+            <mat-error>Amount cannot be negative</mat-error>
+          }
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="form-field">
+          <mat-label>Annual Turnover</mat-label>
+          <span matPrefix class="rupee-prefix">&#8377;</span>
+          <input matInput type="number" formControlName="annualTurnover" min="0" />
+          <mat-hint>Drives the risk grade below</mat-hint>
+          @if (
+            createClientForm.get('annualTurnover')?.hasError('pattern') &&
+            createClientForm.get('annualTurnover')?.touched
+          ) {
+            <mat-error>Enter a valid amount</mat-error>
+          } @else if (
+            createClientForm.get('annualTurnover')?.hasError('min') && createClientForm.get('annualTurnover')?.touched
+          ) {
+            <mat-error>Amount cannot be negative</mat-error>
+          }
+        </mat-form-field>
+
+        <div
+          class="full-width entity-risk-card"
+          [class.entity-risk-card--low]="entityTurnoverRisk.category === 1"
+          [class.entity-risk-card--medium]="entityTurnoverRisk.category === 2"
+          [class.entity-risk-card--high]="entityTurnoverRisk.category === 3"
+        >
+          <div class="entity-risk-card__head">
+            <fa-icon icon="shield-alt" class="entity-risk-card__icon"></fa-icon>
+            <span class="entity-risk-card__title">Auto-calculated Risk Category</span>
+            <span class="entity-risk-card__badge">{{ riskCategoryLabel(entityTurnoverRisk.category) }}</span>
+          </div>
+          <p class="entity-risk-card__reason">{{ entityTurnoverRisk.reason }}</p>
+          <p class="entity-risk-card__scale">
+            Up to ₹1 crore — Low &nbsp;·&nbsp; ₹1 crore to ₹10 crore — Medium &nbsp;·&nbsp; Above ₹10 crore — High
+          </p>
+          <p class="entity-risk-card__note">
+            Carried into the KYC tab, where it can still be overridden with a recorded reason.
+          </p>
+        </div>
+      </div>
+    </div>
+  }
+
   <!-- Section: Financial & Classification (Individual only) -->
   @if (createClientForm.get('legalFormId')?.value === LegalFormId.PERSON) {
     <div class="section-block">

src/app/clients/client-stepper/client-general-step/client-general-step.component.scss

@@ -56,6 +56,103 @@ form {
   grid-column: 1 / -1;
 }
 
+/* Live risk grade beside the entity's turnover fields. Neutral by default; the accent tracks the
+   band so a jump from Medium to High is visible without reading the sentence. */
+.entity-risk-card {
+  margin: 4px 0 12px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-left: 4px solid #94a3b8;
+
+  &__head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__icon {
+    color: #64748b;
+  }
+
+  &__title {
+    font-size: 13px;
+    font-weight: 600;
+    color: #1e293b;
+  }
+
+  &__badge {
+    margin-left: auto;
+    padding: 2px 10px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
+    background: #e2e8f0;
+    color: #334155;
+  }
+
+  &__reason {
+    margin: 8px 0 0;
+    font-size: 13px;
+    color: #334155;
+  }
+
+  &__scale,
+  &__note {
+    margin: 4px 0 0;
+    font-size: 11px;
+    color: #64748b;
+  }
+
+  &--low {
+    background: #f0fdf4;
+    border-color: #bbf7d0;
+    border-left-color: #16a34a;
+
+    .entity-risk-card__icon {
+      color: #16a34a;
+    }
+
+    .entity-risk-card__badge {
+      background: #dcfce7;
+      color: #15803d;
+    }
+  }
+
+  &--medium {
+    background: #fffbeb;
+    border-color: #fde68a;
+    border-left-color: #d97706;
+
+    .entity-risk-card__icon {
+      color: #d97706;
+    }
+
+    .entity-risk-card__badge {
+      background: #fef3c7;
+      color: #b45309;
+    }
+  }
+
+  &--high {
+    background: #fef2f2;
+    border-color: #fecaca;
+    border-left-color: #dc2626;
+
+    .entity-risk-card__icon {
+      color: #dc2626;
+    }
+
+    .entity-risk-card__badge {
+      background: #fee2e2;
+      color: #b91c1c;
+    }
+  }
+}
+
 .senior-citizen-auto-note {
   display: flex;
   align-items: center;

src/app/clients/client-stepper/client-general-step/client-general-step.component.ts

@@ -25,13 +25,17 @@ import {
   UntypedFormGroup,
   Validators,
   UntypedFormControl,
-  ReactiveFormsModule
+  ReactiveFormsModule,
+  ValidatorFn,
+  AbstractControl,
+  ValidationErrors
 } from '@angular/forms';
 import { Subject, Subscription, merge } from 'rxjs';
 import { filter, switchMap, takeUntil } from 'rxjs/operators';
 import { ClientsService } from 'app/clients/clients.service';
 import { Dates } from 'app/core/utils/dates';
 import { LegalFormId } from 'app/clients/models/legal-form.enum';
+import { toProperNameCase } from 'app/clients/utils/name-case.util';
 import { ExternalNationalIdService } from 'app/clients/services/external-national-id.service';
 
 /** Custom Services */
@@ -55,6 +59,12 @@ import {
   ContactOtpBlockComponent,
   ContactOtpState
 } from 'app/clients/edit-client/contact-otp-block/contact-otp-block.component';
+import {
+  MINOR_AGE_THRESHOLD,
+  SENIOR_CITIZEN_AGE_THRESHOLD,
+  isMinorAge,
+  isSeniorCitizenAge
+} from 'app/clients/shared/client-age.util';
 
 /**
  * Create Client Component
@@ -298,10 +308,13 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
   ];
   /** Calculated age detail string (Y/M/D) */
   calculatedAgeDetail: string | null = null;
-  /** Whether client is a minor (age < 18) */
+  /** Whether client is a minor — threshold from the shared age util, derived from Date of Birth */
   isMinor = false;
-  /** Whether client is a senior citizen (age >= 60) — auto-detected from Date of Birth */
+  /** Whether client is a senior citizen — threshold from the shared age util, derived from DOB */
   isSeniorCitizen = false;
+  /** Exposed for template hints so the displayed rule can never drift from the applied rule. */
+  readonly minorAgeThreshold = MINOR_AGE_THRESHOLD;
+  readonly seniorCitizenAgeThreshold = SENIOR_CITIZEN_AGE_THRESHOLD;
   /** Age breakdown for DB storage */
   ageBreakdown = { years: 0, months: 0, days: 0 };
 
@@ -333,6 +346,16 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
   alternateDipLookupLogId: number | null = null;
   /** Alternate DIP lookup timestamp from API */
   alternateDipTimestamp: string | null = null;
+  /**
+   * DIP/MNRL status the number actually returned (CLEAN / SUSPECTED / SERVICE_UNAVAILABLE).
+   * Kept separately from `mobileVerified` so an unverifiable number is not indistinguishable
+   * from one that genuinely passed.
+   */
+  dipStatus: string | null = null;
+  alternateDipStatus: string | null = null;
+  /** Officer rejected the number outright — it must be replaced before saving. */
+  dipRejected = false;
+  alternateDipRejected = false;
 
   /**
    * CLIENT CREATION contact-OTP verification state (mobileNo / emailAddress). Unlike the
@@ -529,10 +552,41 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
   sanctionsVerified = false;
   /** Sanctions match was found — blocks account opening */
   sanctionsBlocked = false;
+  /**
+   * Outcome recorded against a match: 'FALSE_POSITIVE' (awaiting Principal Officer approval)
+   * or 'CONFIRMED_MATCH'. Null when the hit has not been reviewed yet. Both keep the client
+   * blocked — only the Principal Officer's approval, applied server-side, releases a name.
+   */
+  sanctionsDisposition: string | null = null;
+  /**
+   * The name was edited after a block, so the applicant may no longer be the flagged one.
+   * Re-exposes the verify button; the block itself is only lifted by a CLEAR from the API.
+   */
+  sanctionsNeedsRescreen = false;
   /** Screening log ID from sanctions API */
   screeningLogId: number | null = null;
+
+  /** Cites the direction actually in force — kept in step with the verification dialog. */
+  readonly sanctionsCitation = 'UAPA 1967 s.51-A & RBI KYC Directions, 2025 — Chapter IX';
+  readonly sanctionsTooltip =
+    'All customer names must be verified against the UN Security Council Consolidated List before account ' +
+    'opening and periodically thereafter. A match is not a rejection: compare the identifiers, record a ' +
+    'false positive with reasons, or confirm the match and escalate to the Principal Officer immediately.';
+
+  /** Badge text reflecting how far the flagged alert has progressed. */
+  get sanctionsStatusLabel(): string {
+    if (this.sanctionsDisposition === 'FALSE_POSITIVE') {
+      return 'Awaiting PO Approval';
+    }
+    if (this.sanctionsDisposition === 'CONFIRMED_MATCH') {
+      return 'Confirmed Match';
+    }
+    return 'Sanctions Match';
+  }
   /** Snapshot of the name that was last verified — used to invalidate verification when name changes */
   private verifiedName: string = '';
+  /** True while prefillForEdit() is patching historical monthly/annual values — see linkMonthlyAnnual(). */
+  private suppressMonthlyAnnualLink = false;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder
@@ -652,18 +706,29 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     if (this.createClientForm.get('guardianDetails')) {
       this.createClientForm.removeControl('guardianDetails');
     }
+    // Same reasoning as the guardian above: the reused component instance would otherwise carry the
+    // previous entity's authorized signatories into a brand new client.
+    this.signatories = [];
+    this.signatorySearchText = '';
+    this.signatorySearchResults = [];
     // Verification state must not carry over — a previous client's cleared sanctions
     // screening or verified OTP must not silently apply to a different new client.
     this.mobileVerified = false;
     this.dipLookupLogId = null;
     this.dipTimestamp = null;
+    this.dipStatus = null;
+    this.dipRejected = false;
     this.alternateMobileVerified = false;
     this.alternateDipLookupLogId = null;
     this.alternateDipTimestamp = null;
+    this.alternateDipStatus = null;
+    this.alternateDipRejected = false;
     this.mobileNewOtpId = null;
     this.emailNewOtpId = null;
     this.sanctionsVerified = false;
     this.sanctionsBlocked = false;
+    this.sanctionsDisposition = null;
+    this.sanctionsNeedsRescreen = false;
     this.screeningLogId = null;
     this.verifiedName = '';
   }
@@ -709,6 +774,12 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     const data = this.clientData;
     this.loadExistingSeniorPwdDocuments();
 
+    // Loading an existing client's independently-saved monthly/annual values must not run
+    // through the auto-calc in linkMonthlyAnnual() — patching monthlyIncome then annualIncome
+    // (or vice versa) would otherwise have each overwrite the other via its valueChanges,
+    // instead of keeping the exact historical values as saved.
+    this.suppressMonthlyAnnualLink = true;
+
     // Patch all base controls that exist on the form
     this.createClientForm.patchValue({
       officeId: data.officeId,
@@ -743,6 +814,7 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
         ? new Date(data.timeline.submittedOnDate)
         : this.settingsService.businessDate
     });
+    this.suppressMonthlyAnnualLink = false;
 
     // Patch name fields (already created by buildDependencies via legalFormId subscription)
     const legalFormId = data.legalForm?.id || LegalFormId.PERSON;
@@ -768,8 +840,13 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
           incorpNumber: data.clientNonPersonDetails.incorpNumber || '',
           remarks: data.clientNonPersonDetails.remarks || '',
           authorizedSignatory: data.clientNonPersonDetails.authorizedSignatory || '',
+          authorizedSignatoryClientIds: data.clientNonPersonDetails.authorizedSignatoryClientIds || '',
           additionalInfo: data.clientNonPersonDetails.additionalInfo || ''
         });
+        this.restoreSignatories(
+          data.clientNonPersonDetails.authorizedSignatoryClientIds,
+          data.clientNonPersonDetails.authorizedSignatory
+        );
       }
     }
 
@@ -848,6 +925,16 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     }
   }
 
+  /** Alternate Mobile No must differ from Mobile No — the same number saved in both fields is
+   *  meaningless (there's no second contact route) and the DIP checks would just repeat. */
+  private notSameAsMobileNoValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const value = control.value;
+      const mobileNo = control.parent?.get('mobileNo')?.value;
+      return value && mobileNo && value === mobileNo ? { sameAsMobile: true } : null;
+    };
+  }
+
   /**
    * Creates the client form.
    */
@@ -887,7 +974,8 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
         '',
         [
           Validators.pattern(/^[6-9]\d{9}$/),
-          Validators.maxLength(10)
+          Validators.maxLength(10),
+          this.notSameAsMobileNoValidator()
         ]
       ],
       emailAddress: [
@@ -960,9 +1048,47 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     this.linkIncomeToTurnover();
   }
 
-  /** Guards the Monthly/Annual and Income/Turnover auto-sync subscriptions below — set this to
-   *  true while programmatically writing both fields of a pair to avoid a feedback loop. */
-  private suppressMonthlyAnnualLink = false;
+  /**
+   * Auto-calculates turnover based on income (doubling monthly income for monthly turnover,
+   * and annual income for annual/yearly turnover), but only if the turnover fields
+   * have not been manually modified or cleared.
+   */
+  private linkIncomeToTurnover(): void {
+    const monthlyIncome = this.createClientForm.get('monthlyIncome');
+    const monthlyTurnover = this.createClientForm.get('monthlyTurnover');
+    const annualIncome = this.createClientForm.get('annualIncome');
+    const annualTurnover = this.createClientForm.get('annualTurnover');
+
+    const isEmpty = (val: any) => val === '' || val === null || val === undefined;
+
+    if (monthlyIncome && monthlyTurnover && annualTurnover) {
+      monthlyIncome.valueChanges.subscribe((value) => {
+        if (this.suppressMonthlyAnnualLink) {
+          return;
+        }
+        const isPristine = monthlyTurnover.pristine && annualTurnover.pristine;
+        const isTurnoverEmpty = isEmpty(monthlyTurnover.value) && isEmpty(annualTurnover.value);
+        if (isPristine || isTurnoverEmpty) {
+          const num = parseFloat(value);
+          monthlyTurnover.setValue(!isNaN(num) && num >= 0 ? this.round2(num * 2) : '', { emitEvent: true });
+        }
+      });
+    }
+
+    if (annualIncome && annualTurnover && monthlyTurnover) {
+      annualIncome.valueChanges.subscribe((value) => {
+        if (this.suppressMonthlyAnnualLink) {
+          return;
+        }
+        const isPristine = monthlyTurnover.pristine && annualTurnover.pristine;
+        const isTurnoverEmpty = isEmpty(monthlyTurnover.value) && isEmpty(annualTurnover.value);
+        if (isPristine || isTurnoverEmpty) {
+          const num = parseFloat(value);
+          annualTurnover.setValue(!isNaN(num) && num >= 0 ? this.round2(num * 2) : '', { emitEvent: true });
+        }
+      });
+    }
+  }
 
   /**
    * Keeps a Monthly/Annual pair of amount fields in sync at a 12x ratio — typing into either
@@ -998,37 +1124,6 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     });
   }
 
-  /**
-   * Auto-calculates turnover based on income (doubling monthly income for monthly turnover,
-   * and annual income for annual/yearly turnover).
-   */
-  private linkIncomeToTurnover(): void {
-    const monthlyIncome = this.createClientForm.get('monthlyIncome');
-    const monthlyTurnover = this.createClientForm.get('monthlyTurnover');
-    const annualIncome = this.createClientForm.get('annualIncome');
-    const annualTurnover = this.createClientForm.get('annualTurnover');
-
-    if (monthlyIncome && monthlyTurnover) {
-      monthlyIncome.valueChanges.subscribe((value) => {
-        if (this.suppressMonthlyAnnualLink) {
-          return;
-        }
-        const num = parseFloat(value);
-        monthlyTurnover.setValue(!isNaN(num) && num >= 0 ? this.round2(num * 2) : '', { emitEvent: true });
-      });
-    }
-
-    if (annualIncome && annualTurnover) {
-      annualIncome.valueChanges.subscribe((value) => {
-        if (this.suppressMonthlyAnnualLink) {
-          return;
-        }
-        const num = parseFloat(value);
-        annualTurnover.setValue(!isNaN(num) && num >= 0 ? this.round2(num * 2) : '', { emitEvent: true });
-      });
-    }
-  }
-
   /**
    * Sets select dropdown options.
    */
@@ -1117,6 +1212,10 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
               mainBusinessLineId: [''],
               incorpNumber: [''],
               authorizedSignatory: [''],
+              // Client ids behind the names above, in the same order — what lets an edit rebuild the
+              // signatory rows with their client links and PAN/DIN state. No input is bound to it;
+              // syncSignatoryNames() keeps it in step with the chips.
+              authorizedSignatoryClientIds: [''],
               additionalInfo: [''],
               remarks: ['']
             })
@@ -1161,8 +1260,8 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
             this.calculatedAgeDetail = `${years} yr${years !== 1 ? 's' : ''} ${months} mo${months !== 1 ? 's' : ''} ${days} day${days !== 1 ? 's' : ''}`;
             this.ageBreakdown = { years, months, days };
             const wasMinor = this.isMinor;
-            this.isMinor = years < 18;
-            this.isSeniorCitizen = years >= 60;
+            this.isMinor = isMinorAge(years);
+            this.isSeniorCitizen = isSeniorCitizenAge(years);
             // Add/remove guardian form group based on minor status
             if (this.isMinor && !wasMinor) {
               this.createClientForm.addControl(
@@ -1237,6 +1336,11 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
       .valueChanges.pipe(takeUntil(this.destroy$))
       .subscribe(() => {
         this.mobileVerified = false;
+        // The rejection applied to the previous number, not this one. Leaving it set would
+        // keep Save & Next dead with a message about a number no longer in the field.
+        this.dipRejected = false;
+        this.dipStatus = null;
+        this.dipLookupLogId = null;
         // Also reset create-time contact-OTP verification — an OTP verified against a
         // previous mobile number no longer applies once the value is edited. Belt-and-braces
         // alongside ContactOtpBlockComponent's own destination-change reset: this fires even
@@ -1244,6 +1348,10 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
         // invalid) and its own reset never had a chance to run.
         this.mobileOtpVerified = false;
         this.mobileNewOtpId = null;
+        // Alternate Mobile No's "not same as Mobile No" validator reads mobileNo's current
+        // value, so re-run it here too — otherwise fixing mobileNo away from a clash leaves
+        // the alternate field's error stuck until the user also edits that field.
+        this.createClientForm.get('alternateMobileNo')?.updateValueAndValidity({ emitEvent: false });
       });
 
     this.createClientForm
@@ -1251,6 +1359,9 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
       .valueChanges.pipe(takeUntil(this.destroy$))
       .subscribe(() => {
         this.alternateMobileVerified = false;
+        this.alternateDipRejected = false;
+        this.alternateDipStatus = null;
+        this.alternateDipLookupLogId = null;
       });
 
     // Reset create-time contact-OTP verification when email address changes — see the
@@ -1291,9 +1402,11 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     });
     dialogRef.afterClosed().subscribe((result: any) => {
       if (!result) return;
-      if (result.verified) {
-        this.mobileVerified = true;
-      }
+      // A flagged number the officer chose to proceed with counts as verified — the decision and
+      // its reason are already stored against the lookup, which is what the save gate checks.
+      this.mobileVerified = result.verified === true || result.decision === 'PROCEEDED';
+      this.dipRejected = result.decision === 'REJECTED';
+      this.dipStatus = result.status || null;
       this.dipLookupLogId = result.lookupLogId || null;
       this.dipTimestamp = result.timestamp || null;
     });
@@ -1311,9 +1424,9 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     });
     dialogRef.afterClosed().subscribe((result: any) => {
       if (!result) return;
-      if (result.verified) {
-        this.alternateMobileVerified = true;
-      }
+      this.alternateMobileVerified = result.verified === true || result.decision === 'PROCEEDED';
+      this.alternateDipRejected = result.decision === 'REJECTED';
+      this.alternateDipStatus = result.status || null;
       this.alternateDipLookupLogId = result.lookupLogId || null;
       this.alternateDipTimestamp = result.timestamp || null;
     });
@@ -1338,6 +1451,17 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     this.removeGuardian();
   }
 
+  capitalizeControl(controlName: string) {
+    const control = this.createClientForm.get(controlName);
+    if (control && control.value) {
+      const originalValue = control.value;
+      const capitalized = toProperNameCase(originalValue);
+      if (originalValue !== capitalized) {
+        control.setValue(capitalized);
+      }
+    }
+  }
+
   /**
    * Verify client name against sanctions lists via dialog.
    * Passes the client name to the dialog for real API screening.
@@ -1345,10 +1469,17 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
    */
   verifySanctions() {
     const name = this.currentNameSnapshot();
+    const dob = this.createClientForm.get('dateOfBirth')?.value;
 
     const dialogRef = this.dialog.open(SanctionsVerifyDialogComponent, {
-      width: '550px',
-      data: { name }
+      width: '620px',
+      data: {
+        name,
+        // The dialog compares these against the listed particulars — a name-only hit cannot be
+        // judged without the applicant's own identifiers next to it.
+        dateOfBirth: dob ? new Date(dob).toLocaleDateString('en-IN') : '',
+        nationality: this.nationalityLabel()
+      }
     });
     dialogRef.afterClosed().subscribe((result: any) => {
       if (!result) return;
@@ -1357,16 +1488,26 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
         // CLEAR — no match found
         this.sanctionsVerified = true;
         this.sanctionsBlocked = false;
+        this.sanctionsDisposition = null;
+        this.sanctionsNeedsRescreen = false;
         this.verifiedName = name;
       } else if (result.verified === false) {
-        // FLAGGED — match found, block account opening
+        // FLAGGED — blocked either way. A FALSE_POSITIVE is a claim awaiting the Principal
+        // Officer, not a clearance; only their approval lets this name through.
         this.sanctionsVerified = false;
         this.sanctionsBlocked = true;
+        this.sanctionsDisposition = result.disposition || null;
+        this.sanctionsNeedsRescreen = false;
         this.verifiedName = '';
       }
     });
   }
 
+  /** Human-readable nationality for the sanctions comparison panel. */
+  private nationalityLabel(): string {
+    return this.getSelectedNationality()?.label || '';
+  }
+
   /** Concatenated current name from the form (handles individual + entity) */
   private currentNameSnapshot(): string {
     const firstname = this.createClientForm.get('firstname')?.value || '';
@@ -1406,9 +1547,14 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
         // Only invalidate if a verification was previously recorded
         if (!this.sanctionsVerified && !this.sanctionsBlocked) return;
         if (this.currentNameSnapshot() !== this.verifiedName) {
+          // Editing the name forces a fresh screening, but must NOT silently clear an existing
+          // block: otherwise a flagged applicant is waved through by nudging one character. The
+          // block is only lifted by re-running the check and getting a CLEAR back from the API.
           this.sanctionsVerified = false;
-          this.sanctionsBlocked = false;
           this.screeningLogId = null;
+          if (this.sanctionsBlocked) {
+            this.sanctionsNeedsRescreen = true;
+          }
         }
       });
   }
@@ -1462,6 +1608,11 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
         target.mobileNo = data.mobileNo || null;
         target.emailAddress = data.emailAddress || null;
         target.officeName = data.officeName || null;
+        // Filled in only when the caller has not supplied them. A signatory restored from stored
+        // ids starts as a bare { id } and needs both to render its row; one picked from the search
+        // dropdown already carries them, and a guardian must keep whatever it was given.
+        target.displayName = target.displayName || data.displayName;
+        target.status = target.status || data.status;
         target._loading = false;
       },
       error: () => {
@@ -1475,6 +1626,10 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
         target.panVerified = kyc?.panVerified || false;
         target.aadhaarMasked = kyc?.aadhaarNumberMasked || '-';
         target.aadhaarVerified = kyc?.aadhaarVerified || false;
+        // Same reasoning as above: a DIN verified in an earlier session lives on the signatory's own
+        // KYC record, so re-reading it here is what stops the edit screen asking for it again.
+        target.dinNumber = target.dinNumber || kyc?.dinNumber || '';
+        target.dinVerified = target.dinVerified || kyc?.dinVerified || false;
       },
       error: () => {
         target.panNumber = '-';
@@ -1673,9 +1828,49 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     });
   }
 
+  /**
+   * Rebuilds the authorized-signatory rows when an existing entity client is opened for edit.
+   *
+   * Driven by the stored client ids rather than the stored names: the ids are what make each row a
+   * real client again, so its CIF, PAN and DIN verification can be re-read instead of the officer
+   * having to re-add and re-verify signatories that were already recorded. The saved names are used
+   * only as the label until the lookup returns, and as the fallback for a client that can no longer
+   * be fetched, so a row is never silently dropped.
+   *
+   * Clients created before the ids were stored have names but no ids; those still list, as
+   * name-only rows, rather than showing nothing at all.
+   */
+  private restoreSignatories(storedIds: string | null | undefined, storedNames: string | null | undefined): void {
+    const ids = (storedIds || '')
+      .split(',')
+      .map((id: string) => id.trim())
+      .filter(Boolean);
+    const names = (storedNames || '')
+      .split(',')
+      .map((name: string) => name.trim())
+      .filter(Boolean);
+
+    if (!ids.length) {
+      this.signatories = names.map((displayName: string) => ({ displayName }));
+      return;
+    }
+
+    this.signatories = ids.map((id: string, index: number) => ({
+      id: Number(id),
+      displayName: names[index] || '',
+      _loading: true
+    }));
+    this.signatories.forEach((sig: any) => this.fetchClientFullDetails(sig.id, sig));
+  }
+
   private syncSignatoryNames(): void {
     const names = this.signatories.map((s) => s.displayName).join(', ');
-    this.createClientForm.get('clientNonPersonDetails')?.patchValue({ authorizedSignatory: names });
+    // Ids are written in the same order as the names, so the two columns line up on reload.
+    const clientIds = this.signatories.map((s) => s.id).join(',');
+    this.createClientForm.get('clientNonPersonDetails')?.patchValue({
+      authorizedSignatory: names,
+      authorizedSignatoryClientIds: clientIds
+    });
   }
 
   /** Watch MSME turnover & investment for auto-classification */
@@ -1745,6 +1940,38 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     return salutation ? `${salutation} ${full}` : full;
   }
 
+  /**
+   * The name PAN and Aadhaar are actually matched against.
+   *
+   * Deliberately not {@link fullNamePreview}: that prefixes the salutation, while
+   * ClientKycWritePlatformServiceJpaRepositoryImpl builds the verification name from firstname +
+   * middlename + lastname only. Values are passed through untouched rather than capitalised, so what
+   * the KYC step displays is exactly what goes to the provider.
+   */
+  get verificationName(): string {
+    return [
+      this.createClientForm?.get('firstname')?.value,
+      this.createClientForm?.get('middlename')?.value,
+      this.createClientForm?.get('lastname')?.value
+    ]
+      .map((part: any) => (part || '').toString().trim())
+      .filter(Boolean)
+      .join(' ');
+  }
+
+  /** Date of birth as captured, sent to the provider formatted dd/MM/yyyy. */
+  get verificationDateOfBirth(): Date | null {
+    const value = this.createClientForm?.get('dateOfBirth')?.value;
+    if (!value) {
+      return null;
+    }
+    if (value instanceof Date) {
+      return value;
+    }
+    const parsed = new Date(value);
+    return isNaN(parsed.getTime()) ? null : parsed;
+  }
+
   getSelectedGender(): any {
     const val = this.createClientForm.get('genderId')?.value;
     return this.genderOptions?.find((g: any) => g.id === val) || null;
@@ -2127,6 +2354,12 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
         delete generalDetails[key];
       }
     }
+    // Entity name is normalised here as well as on blur: a pasted/auto-filled value, or one the
+    // user never blurred out of before submitting, would otherwise reach Fineract exactly as typed.
+    if (generalDetails.fullname) {
+      generalDetails.fullname = toProperNameCase(generalDetails.fullname);
+    }
+
     if (generalDetails.submittedOnDate instanceof Date) {
       generalDetails.submittedOnDate = this.dateUtils.formatDate(generalDetails.submittedOnDate, dateFormat);
     }
@@ -2196,15 +2429,97 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     ];
     unsupportedFields.forEach((f) => delete generalDetails[f]);
 
-    // Format dateOfRegistration if present
-    if (generalDetails.clientNonPersonDetails?.dateOfRegistration instanceof Date) {
-      generalDetails.clientNonPersonDetails.dateOfRegistration = this.dateUtils.formatDate(
-        generalDetails.clientNonPersonDetails.dateOfRegistration,
-        dateFormat
-      );
+    return generalDetails;
+  }
+
+  /**
+   * Turnover ladder that decides an entity's risk when no configured risk rule matches it.
+   *
+   * A company's size is the one thing about it the branch always knows at onboarding, and the
+   * bigger the book the more exposure it carries — so the band moves up with annual turnover
+   * instead of every entity landing on a flat Medium regardless of whether it turns over ten lakh
+   * or a hundred crore. Thresholds follow the MSME-style split the business already thinks in
+   * (crores), and are only a fallback: a rule configured in m_client_risk_rule with
+   * minAnnualTurnover / maxAnnualTurnover still wins, which is where a bank sets its own numbers.
+   *
+   * Amounts are in rupees. `upTo: null` is the open-ended top band.
+   */
+  private static readonly ENTITY_TURNOVER_RISK_BANDS: { upTo: number | null; category: number; label: string }[] = [
+    { upTo: 10000000, category: 1, label: 'up to ₹1 crore' },
+    { upTo: 100000000, category: 2, label: '₹1 crore to ₹10 crore' },
+    { upTo: null, category: 3, label: 'above ₹10 crore' }
+  ];
+
+  /**
+   * A numeric rule bound counts as configured only when it is present and above zero.
+   *
+   * Migration 0448 replaced every unset income/turnover NULL with 0.0, so "absent" now arrives as
+   * either. Every comparison in calculatedRisk already pairs its check with `> 0` for that reason;
+   * this keeps the criteria-less test reading the columns the same way.
+   */
+  private static isConfigured(bound: number | string | null | undefined): boolean {
+    return bound != null && parseFloat(String(bound)) > 0;
+  }
+
+  /** "Low Risk" / "Medium Risk" / "High Risk" for a category id. */
+  riskCategoryLabel(category: number): string {
+    if (category === 3) {
+      return 'High Risk';
+    }
+    return category === 2 ? 'Medium Risk' : 'Low Risk';
+  }
+
+  /**
+   * Entity risk from annual turnover, for the fallback path only.
+   *
+   * AML is deliberately left CLEAR even in the top band. A configured High-risk rule defaults to
+   * FLAGGED because someone decided that case warrants it; turnover on its own is a size signal,
+   * not a suspicion, and auto-flagging every large company would put them all in the AML queue.
+   */
+  private entityRiskFromTurnover(annualTurnover: number): {
+    category: number;
+    reason: string;
+    amlCheckStatus: string;
+    bannedEntityMatch: string;
+    willfulDefaulter: string;
+    ecgcSalFlag: string;
+    dormantFlag: string;
+  } {
+    const base = {
+      amlCheckStatus: 'CLEAR',
+      bannedEntityMatch: 'NO',
+      willfulDefaulter: 'NO',
+      ecgcSalFlag: 'NO',
+      dormantFlag: 'ACTIVE'
+    };
+
+    // Nothing captured yet — the entity default stands until a turnover is entered.
+    if (!annualTurnover || annualTurnover <= 0) {
+      return {
+        category: 2,
+        reason: 'Non-Individual / Entity profile (Default Medium Risk)',
+        ...base
+      };
     }
 
-    return generalDetails;
+    const band =
+      ClientGeneralStepComponent.ENTITY_TURNOVER_RISK_BANDS.find((b) => b.upTo == null || annualTurnover <= b.upTo) ??
+      ClientGeneralStepComponent.ENTITY_TURNOVER_RISK_BANDS[
+        ClientGeneralStepComponent.ENTITY_TURNOVER_RISK_BANDS.length - 1
+      ];
+
+    return {
+      category: band.category,
+      reason: `Annual turnover ₹${annualTurnover.toLocaleString('en-IN')} — ${band.label} (${this.riskCategoryLabel(
+        band.category
+      )})`,
+      ...base
+    };
+  }
+
+  /** Live risk band for the entity turnover card in the General step. */
+  get entityTurnoverRisk(): { category: number; reason: string } {
+    return this.calculatedRisk;
   }
 
   get calculatedRisk(): {
@@ -2232,17 +2547,32 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     // Evaluate rules from DB (ordered by orderPosition ASC)
     if (this.riskRules && this.riskRules.length > 0) {
       for (const rule of this.riskRules) {
-        // Skip transaction/AML rules that have no KYC criteria
+        // Only KYC profile rules categorise a customer at onboarding. The same table also holds
+        // ~221 AML transaction-monitoring scenarios ("Large cash transaction", "Additional RFIs
+        // Rule - 91", ...) which describe behaviour and may only fire against posted transactions,
+        // as AML alerts — RBI Master Direction on KYC separates risk categorisation (Section 12)
+        // from transaction monitoring (Section 13). ruleKind, set on the row, is what tells them
+        // apart; it replaced an inference from "this rule has no criteria set", which migration
+        // 0448 silently broke by writing 0.0 over those NULLs. That let rule 91 match a salaried
+        // client on an income band it was never meant to carry and pre-flag them for AML.
+        if (rule.ruleKind === 'AML') {
+          continue;
+        }
+
+        // Backstop for a rule row predating rule_kind: a rule naming no occupation, no legal form
+        // and no income or turnover band constrains nothing, so it would match every customer.
+        // Treat 0 as unset — that is how the comparisons below read it, and what 0448 left behind.
         if (
+          rule.ruleKind == null &&
           rule.legalFormId == null &&
           rule.occupationCategoryCvId == null &&
           rule.occupationCvId == null &&
-          rule.minMonthlyIncome == null &&
-          rule.maxMonthlyIncome == null &&
-          rule.minAnnualIncome == null &&
-          rule.maxAnnualIncome == null &&
-          rule.minAnnualTurnover == null &&
-          rule.maxAnnualTurnover == null
+          !ClientGeneralStepComponent.isConfigured(rule.minMonthlyIncome) &&
+          !ClientGeneralStepComponent.isConfigured(rule.maxMonthlyIncome) &&
+          !ClientGeneralStepComponent.isConfigured(rule.minAnnualIncome) &&
+          !ClientGeneralStepComponent.isConfigured(rule.maxAnnualIncome) &&
+          !ClientGeneralStepComponent.isConfigured(rule.minAnnualTurnover) &&
+          !ClientGeneralStepComponent.isConfigured(rule.maxAnnualTurnover)
         ) {
           continue;
         }
@@ -2263,26 +2593,26 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
         }
 
         // Match monthly income ranges
-        if (rule.minMonthlyIncome != null && monthlyIncome < rule.minMonthlyIncome) {
+        if (rule.minMonthlyIncome != null && rule.minMonthlyIncome > 0 && monthlyIncome < rule.minMonthlyIncome) {
           continue;
         }
-        if (rule.maxMonthlyIncome != null && monthlyIncome > rule.maxMonthlyIncome) {
+        if (rule.maxMonthlyIncome != null && rule.maxMonthlyIncome > 0 && monthlyIncome > rule.maxMonthlyIncome) {
           continue;
         }
 
         // Match annual income ranges (evaluated against totalAnnualIncome)
-        if (rule.minAnnualIncome != null && totalAnnualIncome < rule.minAnnualIncome) {
+        if (rule.minAnnualIncome != null && rule.minAnnualIncome > 0 && totalAnnualIncome < rule.minAnnualIncome) {
           continue;
         }
-        if (rule.maxAnnualIncome != null && totalAnnualIncome > rule.maxAnnualIncome) {
+        if (rule.maxAnnualIncome != null && rule.maxAnnualIncome > 0 && totalAnnualIncome > rule.maxAnnualIncome) {
           continue;
         }
 
         // Match turnover ranges
-        if (rule.minAnnualTurnover != null && annualTurnover < rule.minAnnualTurnover) {
+        if (rule.minAnnualTurnover != null && rule.minAnnualTurnover > 0 && annualTurnover < rule.minAnnualTurnover) {
           continue;
         }
-        if (rule.maxAnnualTurnover != null && annualTurnover > rule.maxAnnualTurnover) {
+        if (rule.maxAnnualTurnover != null && rule.maxAnnualTurnover > 0 && annualTurnover > rule.maxAnnualTurnover) {
           continue;
         }
 
@@ -2290,7 +2620,12 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
         return {
           category: rule.riskCategory,
           reason: rule.reason,
-          amlCheckStatus: rule.amlCheckStatus || (rule.riskCategory === 3 ? 'FLAGGED' : 'CLEAR'),
+          // A profile rule sets the risk category; it does not raise an AML flag. High Risk means
+          // enhanced due diligence and a 2-yearly KYC refresh (RBI MD Sections 12 and 38), not
+          // suspicion — an alert belongs to observed transaction behaviour (Section 13), so a
+          // customer who has transacted nothing yet stays CLEAR. A bank that genuinely wants a
+          // rule to flag on match can still say so explicitly via the rule's own amlCheckStatus.
+          amlCheckStatus: rule.amlCheckStatus || 'CLEAR',
           bannedEntityMatch: rule.bannedEntityMatch || 'NO',
           willfulDefaulter: rule.willfulDefaulter || 'NO',
           ecgcSalFlag: rule.ecgcSalFlag || 'NO',
@@ -2301,15 +2636,7 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
 
     // Default Fallbacks
     if (legalFormId !== LegalFormId.PERSON) {
-      return {
-        category: 2,
-        reason: 'Non-Individual / Entity profile (Default Medium Risk)',
-        amlCheckStatus: 'CLEAR',
-        bannedEntityMatch: 'NO',
-        willfulDefaulter: 'NO',
-        ecgcSalFlag: 'NO',
-        dormantFlag: 'ACTIVE'
-      };
+      return this.entityRiskFromTurnover(annualTurnover);
     }
     return {
       category: 1,

src/app/clients/client-stepper/client-general-step/dip-verify-dialog.component.ts

@@ -1,8 +1,17 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
 import { Component, OnInit, OnDestroy, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatButtonModule } from '@angular/material/button';
+import { FormsModule } from '@angular/forms';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { ClientsService } from 'app/clients/clients.service';
 
@@ -31,13 +40,18 @@ import { ClientsService } from 'app/clients/clients.service';
           <span class="warning-text">This may take a few seconds. Do not close or refresh this window.</span>
         </div>
       }
+      <!--
+        An unreachable DoT service means the number was NOT checked. Reporting that as a green
+        "verification completed successfully — number is CLEAN" claimed a check that never ran and
+        stored the client as verified, so the outage is now shown for what it is.
+      -->
       @if (!verifying && serviceUnavailable) {
-        <div class="verify-result">
-          <fa-icon icon="check-circle" class="result-icon"></fa-icon>
-          <p class="result-msg">DIP & MNRL verification completed successfully.</p>
-          <div class="success-detail">
-            <fa-icon icon="shield-alt" class="success-detail-icon"></fa-icon>
-            <span>Mobile number is <strong>CLEAN</strong> — not found in the revocation list.</span>
+        <div class="verify-result unavailable">
+          <fa-icon icon="exclamation-triangle" class="result-icon unavailable-icon"></fa-icon>
+          <p class="result-msg unavailable-msg">Could not verify — DIP/MNRL service unavailable</p>
+          <div class="unavailable-detail">
+            This number has <strong>not</strong> been checked against the DoT Digital Intelligence Platform. Retry once
+            the service is reachable, or proceed with a recorded reason.
           </div>
         </div>
       }
@@ -66,11 +80,63 @@ import { ClientsService } from 'app/clients/clients.service';
           <p class="result-msg error-msg">{{ error }}</p>
         </div>
       }
+
+      <!--
+        A number turned away before is a standing signal. Without this the next officer screens
+        it as if it had no history and can wave through what a colleague already refused.
+      -->
+      @if (!verifying && priorRejection) {
+        <div class="prior-rejection">
+          <fa-icon icon="history" class="prior-icon"></fa-icon>
+          <div>
+            <strong>This number was rejected before.</strong>
+            <div class="prior-detail">
+              Rejected by user {{ priorRejection.decidedBy }} on {{ priorRejection.decidedOn | date: 'medium' }} —
+              status was {{ priorRejection.lookupStatus }}.
+            </div>
+          </div>
+        </div>
+      }
+
+      @if (!verifying && needsDecision && showReasonForm) {
+        <div class="reason-form">
+          <label class="reason-label">Why is this number acceptable despite the DIP/MNRL result?</label>
+          <textarea
+            class="reason-input"
+            rows="3"
+            [(ngModel)]="decisionReason"
+            placeholder="e.g. Number re-issued to the applicant on 02/2026; ownership confirmed against the operator's CAF and a fresh OTP."
+          ></textarea>
+          <div class="reason-hint" [class.reason-error]="reasonTouched && !reasonValid">
+            Minimum 10 characters — this reason is kept on the lookup record.
+          </div>
+          @if (decisionError) {
+            <div class="reason-hint reason-error">{{ decisionError }}</div>
+          }
+        </div>
+      }
     </mat-dialog-content>
     <mat-dialog-actions align="end">
-      @if (!verifying) {
+      @if (!verifying && !needsDecision) {
         <button mat-raised-button color="primary" (click)="close()">OK</button>
       }
+      <!--
+        A flagged number is a decision, not a notification: the officer must either reject it or
+        say in writing why it is acceptable. Previously a single OK dismissed the warning and the
+        number was onboarded with nothing recorded.
+      -->
+      @if (!verifying && needsDecision && !showReasonForm) {
+        <button mat-stroked-button color="warn" (click)="reject()" [disabled]="saving">Reject this Number</button>
+        <button mat-raised-button color="primary" (click)="startProceed()" [disabled]="saving">
+          Proceed with Reason
+        </button>
+      }
+      @if (!verifying && needsDecision && showReasonForm) {
+        <button mat-stroked-button (click)="cancelProceed()" [disabled]="saving">Back</button>
+        <button mat-raised-button color="primary" (click)="submitProceed()" [disabled]="saving">
+          {{ saving ? 'Saving…' : 'Save Decision & Proceed' }}
+        </button>
+      }
     </mat-dialog-actions>
   `,
   styles: [
@@ -228,13 +294,100 @@ import { ClientsService } from 'app/clients/clients.service';
         color: #d32f2f;
       }
 
+      .unavailable-icon {
+        color: #b45309;
+      }
+
+      .unavailable-msg {
+        color: #b45309;
+      }
+
+      .unavailable-detail {
+        font-size: 13px;
+        color: #92400e;
+        background: #fffbeb;
+        border: 1px solid #fde68a;
+        border-radius: 6px;
+        padding: 10px 12px;
+        line-height: 1.6;
+        margin-top: 8px;
+      }
+
+      .prior-rejection {
+        display: flex;
+        align-items: flex-start;
+        gap: 10px;
+        font-size: 13px;
+        color: #7f1d1d;
+        background: #fef2f2;
+        border: 1px solid #fecaca;
+        border-left: 4px solid #dc2626;
+        border-radius: 6px;
+        padding: 10px 12px;
+        margin-top: 12px;
+        line-height: 1.5;
+      }
+
+      .prior-icon {
+        color: #dc2626;
+        font-size: 16px;
+        margin-top: 2px;
+      }
+
+      .prior-detail {
+        font-size: 12px;
+        color: #991b1b;
+        margin-top: 2px;
+      }
+
+      .reason-form {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        margin-top: 14px;
+      }
+
+      .reason-label {
+        font-size: 12px;
+        font-weight: 600;
+        color: #374151;
+      }
+
+      .reason-input {
+        width: 100%;
+        box-sizing: border-box;
+        font-family: inherit;
+        font-size: 13px;
+        padding: 8px 10px;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        resize: vertical;
+      }
+
+      .reason-input:focus {
+        outline: none;
+        border-color: #1074b9;
+      }
+
+      .reason-hint {
+        font-size: 11px;
+        color: #9ca3af;
+      }
+
+      .reason-error {
+        color: #dc2626;
+        font-weight: 600;
+      }
+
       mat-dialog-actions {
         padding: 8px 24px 16px;
+        gap: 8px;
       }
     `
   ],
   imports: [
     CommonModule,
+    FormsModule,
     MatDialogModule,
     MatProgressBarModule,
     MatButtonModule,
@@ -255,6 +408,25 @@ export class DipVerifyDialogComponent implements OnInit, OnDestroy {
   suspectedStatus = '';
   suspectedReason = '';
   suspectedReportedBy = '';
+
+  /** Set when this number was rejected on an earlier client — history the officer must see. */
+  priorRejection: any = null;
+
+  /** Officer decision capture for a flagged or unverifiable number. */
+  showReasonForm = false;
+  decisionReason = '';
+  reasonTouched = false;
+  saving = false;
+  decisionError = '';
+
+  /** A hit or an unverified number cannot simply be dismissed with OK. */
+  get needsDecision(): boolean {
+    return this.suspected || this.serviceUnavailable;
+  }
+
+  get reasonValid(): boolean {
+    return this.decisionReason.trim().length >= 10;
+  }
   private subscription: any;
   private intervalId: any;
   private apiResponse: any = null;
@@ -305,6 +477,7 @@ export class DipVerifyDialogComponent implements OnInit, OnDestroy {
     }
 
     const res = this.apiResponse;
+    this.priorRejection = res?.priorRejection || null;
     if (res?.data?.status === 'SERVICE_UNAVAILABLE') {
       this.serviceUnavailable = true;
       this.resultMessage = res.message || 'DIP/MNRL lookup service is unavailable. Number treated as CLEAN by default.';
@@ -329,11 +502,68 @@ export class DipVerifyDialogComponent implements OnInit, OnDestroy {
     }
   }
 
+  startProceed() {
+    this.showReasonForm = true;
+    this.reasonTouched = false;
+    this.decisionError = '';
+  }
+
+  cancelProceed() {
+    this.showReasonForm = false;
+    this.decisionReason = '';
+    this.decisionError = '';
+  }
+
+  submitProceed() {
+    this.reasonTouched = true;
+    if (!this.reasonValid) {
+      return;
+    }
+    this.recordDecision('PROCEEDED', this.decisionReason.trim(), true);
+  }
+
+  reject() {
+    this.recordDecision('REJECTED', 'Number rejected at onboarding following DIP/MNRL result.', false);
+  }
+
+  /**
+   * Persists the decision before closing. The number is only usable downstream once the backend
+   * has stored PROCEEDED — the client-create gate re-checks this, so closing without saving
+   * would simply fail at save time with no explanation.
+   */
+  private recordDecision(decision: string, reason: string, verified: boolean) {
+    const logId = this.apiResponse?.lookupLogId;
+    if (!logId) {
+      this.decisionError = 'Lookup reference missing — re-run the check before recording a decision.';
+      return;
+    }
+    this.saving = true;
+    this.decisionError = '';
+    this.clientsService.recordDipDecision(logId, decision, reason).subscribe({
+      next: () => {
+        this.saving = false;
+        this.dialogRef.close({
+          verified,
+          decision,
+          lookupLogId: logId,
+          status: this.apiResponse?.data?.status || null,
+          timestamp: this.apiResponse?.timestamp || null
+        });
+      },
+      error: (err: any) => {
+        this.saving = false;
+        this.decisionError =
+          err?.error?.defaultUserMessage || err?.error?.message || err?.message || 'Could not save the decision.';
+      }
+    });
+  }
+
   close() {
-    const verified = !this.suspected && !this.error;
+    const verified = !this.suspected && !this.error && !this.serviceUnavailable;
     this.dialogRef.close({
       verified,
       lookupLogId: this.apiResponse?.lookupLogId || null,
+      status: this.apiResponse?.data?.status || null,
       timestamp: this.apiResponse?.timestamp || null
     });
   }

src/app/clients/client-stepper/client-general-step/sanctions-verify-dialog.component.ts

@@ -11,6 +11,7 @@ import { CommonModule } from '@angular/common';
 import { MatDialogRef, MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatButtonModule } from '@angular/material/button';
+import { FormsModule } from '@angular/forms';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { ClientsService } from 'app/clients/clients.service';
 
@@ -38,10 +39,17 @@ import { ClientsService } from 'app/clients/clients.service';
             }
           </div>
           <p class="sanctions-msg">
-            Screening <strong>{{ clientName }}</strong> against<br />
-            <strong>UN Security Council</strong> &amp;
-            <strong>Financial Intelligence Unit - India (FIU-IND under UNSC Resolution 2231)</strong>
+            Screening <strong>{{ clientName }}</strong> against the<br />
+            <strong>UN Security Council Consolidated List</strong><br />
+            <span class="sanctions-lists"
+              >ISIL (Da&rsquo;esh) &amp; Al-Qaida (1267/1989/2253) and Taliban (1988) sanctions lists</span
+            >
           </p>
+          @if (listDataAsOf) {
+            <p class="list-as-of">
+              Sanctions list data as of <strong>{{ listDataAsOf }}</strong>
+            </p>
+          }
           <p class="regulatory-note">{{ regulatoryBasis }}</p>
         </div>
       }
@@ -54,8 +62,8 @@ import { ClientsService } from 'app/clients/clients.service';
           <h3 class="approve-title">No Sanctions Match Found</h3>
           <p class="approve-detail">
             <strong>{{ clientName }}</strong> has been screened against the
-            <strong>UN Security Council Consolidated List</strong> and <strong>FIU-IND</strong> records. No confirmed
-            match was found.
+            <strong>UN Security Council Consolidated List</strong> (ISIL &amp; Al-Qaida and Taliban sanctions lists). No
+            confirmed match was found.
           </p>
           <div class="approve-meta">
             <div class="meta-row">
@@ -111,10 +119,78 @@ import { ClientsService } from 'app/clients/clients.service';
               </div>
             }
           </div>
+          <!--
+            The list matches on name alone, so a hit is a "stop and verify", not a verdict. The
+            officer has to be able to compare the listed particulars against the applicant's own
+            before deciding — showing only a red banner made that impossible.
+          -->
+          <div class="compare-header">
+            <fa-icon icon="search"></fa-icon>
+            Compare the applicant against the listed particulars
+          </div>
+          <div class="applicant-card">
+            <div class="applicant-label">Applicant</div>
+            <div class="applicant-values">
+              <span
+                ><strong>{{ clientName }}</strong></span
+              >
+              <span>DOB: {{ applicantDob || '—' }}</span>
+              <span>Nationality: {{ applicantNationality || '—' }}</span>
+            </div>
+          </div>
+          <div class="match-list">
+            @for (m of matches; track m.id) {
+              <div class="match-item">
+                <div class="match-name">{{ m.fullName }}</div>
+                <div class="match-meta">
+                  <span class="match-type">{{ m.entryType }}</span>
+                  @if (m.unListType) {
+                    <span class="match-list-type">{{ m.unListType }}</span>
+                  }
+                  @if (m.referenceNumber) {
+                    <span class="match-ref">{{ m.referenceNumber }}</span>
+                  }
+                </div>
+                <div class="match-aliases">
+                  DOB: {{ m.dateOfBirth || '—' }} &middot; Nationality: {{ m.nationality || '—' }} &middot; Place of
+                  birth: {{ m.placeOfBirth || '—' }}
+                </div>
+                @if (m.aliases?.length) {
+                  <div class="match-aliases">Aliases: {{ m.aliases.join('; ') }}</div>
+                }
+                @if (m.listedOn) {
+                  <div class="match-aliases">Listed on: {{ m.listedOn }}</div>
+                }
+              </div>
+            }
+          </div>
           <div class="escalate-banner">
             <fa-icon icon="exclamation-circle" class="escalate-icon"></fa-icon>
             <span><strong>Escalate to Principal Officer immediately.</strong> Account opening blocked.</span>
           </div>
+          @if (showReasonForm) {
+            <div class="reason-form">
+              <label class="reason-label">
+                {{
+                  pendingDisposition === 'FALSE_POSITIVE'
+                    ? 'Why is this NOT the same person? State the identifiers you compared.'
+                    : 'Record the basis on which this match is confirmed.'
+                }}
+              </label>
+              <textarea
+                class="reason-input"
+                rows="3"
+                [(ngModel)]="dispositionReason"
+                placeholder="e.g. DOB 12/03/1988 vs listed 1965; nationality IN vs listed AF; passport number does not match."
+              ></textarea>
+              <div class="reason-hint" [class.reason-error]="reasonTouched && !reasonValid">
+                Minimum 10 characters — this text is the compliance record.
+              </div>
+              @if (dispositionError) {
+                <div class="reason-hint reason-error">{{ dispositionError }}</div>
+              }
+            </div>
+          }
           <p class="regulatory-note">{{ regulatoryBasis }}</p>
         </div>
       }
@@ -134,9 +210,26 @@ import { ClientsService } from 'app/clients/clients.service';
         </button>
       }
       @if (!verifying && matchFound) {
-        <button mat-raised-button color="warn" (click)="close(false)" class="reject-btn">
-          <fa-icon icon="times"></fa-icon> Flag &amp; Escalate
-        </button>
+        @if (!showReasonForm) {
+          <button mat-stroked-button (click)="startDisposition('FALSE_POSITIVE')" class="approve-btn-secondary">
+            Not the Same Person
+          </button>
+          <button mat-raised-button color="warn" (click)="startDisposition('CONFIRMED_MATCH')" class="reject-btn">
+            <fa-icon icon="times"></fa-icon> Confirm Match &amp; Escalate
+          </button>
+        }
+        @if (showReasonForm) {
+          <button mat-stroked-button (click)="cancelDisposition()" [disabled]="savingDisposition">Back</button>
+          <button
+            mat-raised-button
+            [color]="pendingDisposition === 'FALSE_POSITIVE' ? 'primary' : 'warn'"
+            (click)="submitDisposition()"
+            [disabled]="savingDisposition"
+            class="reject-btn"
+          >
+            {{ savingDisposition ? 'Saving…' : 'Submit for Principal Officer Approval' }}
+          </button>
+        }
       }
       @if (!verifying && errorOccurred) {
         <button mat-raised-button (click)="close(false)">Close</button>
@@ -167,8 +260,13 @@ import { ClientsService } from 'app/clients/clients.service';
 
       mat-dialog-content {
         padding: 16px 24px;
-        max-height: unset;
-        overflow: visible;
+        /*
+          The match card lists every hit with its aliases, so this content is now tall enough to
+          push the action row off-screen if the dialog is allowed to grow unbounded — which left
+          "Not the Same Person" unreachable. Scroll the body instead and keep the buttons pinned.
+        */
+        max-height: 62vh;
+        overflow-y: auto;
       }
 
       .progress-section {
@@ -222,6 +320,20 @@ import { ClientsService } from 'app/clients/clients.service';
         text-align: center;
       }
 
+      .list-as-of {
+        font-size: 12px;
+        color: #374151;
+        text-align: center;
+        margin: 4px 0 0;
+      }
+
+      .sanctions-lists {
+        display: inline-block;
+        margin-top: 4px;
+        font-size: 12px;
+        color: #6b7280;
+      }
+
       .regulatory-note {
         font-size: 11px;
         color: #9ca3af;
@@ -468,8 +580,6 @@ import { ClientsService } from 'app/clients/clients.service';
 
       .match-list {
         width: 100%;
-        max-height: unset;
-        overflow: visible;
         margin: 8px 0;
       }
 
@@ -510,6 +620,84 @@ import { ClientsService } from 'app/clients/clients.service';
         margin-top: 4px;
       }
 
+      .compare-header {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        width: 100%;
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.4px;
+        text-transform: uppercase;
+        color: #6b7280;
+        margin-top: 4px;
+      }
+
+      .applicant-card {
+        width: 100%;
+        background: #eff6ff;
+        border: 1px solid #bfdbfe;
+        border-left: 4px solid #1074b9;
+        border-radius: 4px;
+        padding: 8px 12px;
+      }
+
+      .applicant-label {
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.5px;
+        text-transform: uppercase;
+        color: #1074b9;
+      }
+
+      .applicant-values {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        font-size: 12px;
+        color: #374151;
+        margin-top: 2px;
+      }
+
+      .reason-form {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .reason-label {
+        font-size: 12px;
+        font-weight: 600;
+        color: #374151;
+      }
+
+      .reason-input {
+        width: 100%;
+        box-sizing: border-box;
+        font-family: inherit;
+        font-size: 13px;
+        padding: 8px 10px;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        resize: vertical;
+      }
+
+      .reason-input:focus {
+        outline: none;
+        border-color: #1074b9;
+      }
+
+      .reason-hint {
+        font-size: 11px;
+        color: #9ca3af;
+      }
+
+      .reason-error {
+        color: #dc2626;
+        font-weight: 600;
+      }
+
       .block-msg {
         font-size: 14px;
         font-weight: 600;
@@ -524,11 +712,15 @@ import { ClientsService } from 'app/clients/clients.service';
 
       mat-dialog-actions {
         padding: 8px 24px 16px;
+        /* Sits below a scrolling body, so mark it off clearly as the fixed action row. */
+        border-top: 1px solid #e5e7eb;
+        gap: 8px;
       }
     `
   ],
   imports: [
     CommonModule,
+    FormsModule,
     MatDialogModule,
     MatProgressBarModule,
     MatButtonModule,
@@ -537,10 +729,13 @@ import { ClientsService } from 'app/clients/clients.service';
 })
 export class SanctionsVerifyDialogComponent implements OnInit, OnDestroy {
   private dialogRef = inject(MatDialogRef<SanctionsVerifyDialogComponent>);
-  private data: { name: string } = inject(MAT_DIALOG_DATA);
+  private data: { name: string; dateOfBirth?: string; nationality?: string } = inject(MAT_DIALOG_DATA);
   private clientsService = inject(ClientsService);
 
   clientName = '';
+  /** Applicant's own identifiers, shown beside the listed particulars for comparison. */
+  applicantDob = '';
+  applicantNationality = '';
   verifying = true;
   matchFound = false;
   matchCount = 0;
@@ -550,16 +745,37 @@ export class SanctionsVerifyDialogComponent implements OnInit, OnDestroy {
   screeningLogId: number | null = null;
   listDataAsOf: string | null = null;
 
+  /** Disposition capture — a hit must be closed out, not merely acknowledged. */
+  showReasonForm = false;
+  pendingDisposition: 'FALSE_POSITIVE' | 'CONFIRMED_MATCH' | null = null;
+  dispositionReason = '';
+  reasonTouched = false;
+  savingDisposition = false;
+  dispositionError = '';
+
+  /** Mirrors the backend's minimum: an unexplained assessment is not a review. */
+  get reasonValid(): boolean {
+    return this.dispositionReason.trim().length >= 10;
+  }
+
+  /**
+   * Cites the direction actually in force. Chapter IX ("Requirements/obligations under International
+   * Agreements") is the clause that puts the UNSC lists in scope, and the 2025 Directions superseded
+   * the older Master Direction this screen used to name.
+   */
   regulatoryBasis =
-    'Screened as per Section 51-A of the Unlawful Activities (Prevention) Act, 1967 and the RBI Master Direction on KYC.';
+    'Screened under Section 51-A of the Unlawful Activities (Prevention) Act, 1967 and Chapter IX of the ' +
+    'RBI Know Your Customer Directions, 2025 (amended as on December 29, 2025).';
 
   screenedDate = new Date().toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
   progressValue = 0;
   currentStep = 0;
+  // Steps describe the screening that actually runs against the UNSC consolidated list; there is no
+  // FIU-IND lookup behind this call, so it is no longer claimed here.
   progressSteps = [
     { label: 'Connecting to UN Security Council database...', icon: 'globe' as any },
     { label: 'Screening name against consolidated list...', icon: 'search' as any },
-    { label: 'Cross-checking FIU-IND records...', icon: 'database' as any },
+    { label: 'Cross-checking listed aliases and entities...', icon: 'database' as any },
     { label: 'Analyzing results...', icon: 'chart-bar' as any }
   ];
 
@@ -570,6 +786,8 @@ export class SanctionsVerifyDialogComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.clientName = this.data?.name || '';
+    this.applicantDob = this.data?.dateOfBirth || '';
+    this.applicantNationality = this.data?.nationality || '';
     this.dialogRef.disableClose = true;
 
     // Start API call immediately
@@ -577,6 +795,9 @@ export class SanctionsVerifyDialogComponent implements OnInit, OnDestroy {
       next: (result: any) => {
         this.apiResult = result;
         this.apiDone = true;
+        // Surfaced while the screening is still running, so the operator can see which snapshot of
+        // the UNSC list the check is being made against rather than only learning it afterwards.
+        this.listDataAsOf = this.formatListDate(result?.listDataAsOf);
       },
       error: (err: any) => {
         this.apiError = err;
@@ -652,13 +873,7 @@ export class SanctionsVerifyDialogComponent implements OnInit, OnDestroy {
           'Unable to connect to sanctions screening service.';
       } else {
         this.screeningLogId = this.apiResult?.screeningLogId || null;
-        this.listDataAsOf = this.apiResult?.listDataAsOf
-          ? new Date(this.apiResult.listDataAsOf).toLocaleDateString('en-IN', {
-              day: '2-digit',
-              month: 'short',
-              year: 'numeric'
-            })
-          : null;
+        this.listDataAsOf = this.formatListDate(this.apiResult?.listDataAsOf);
         if (this.apiResult?.matchFound) {
           this.matchFound = true;
           this.matchCount = this.apiResult.matchCount || 0;
@@ -668,10 +883,73 @@ export class SanctionsVerifyDialogComponent implements OnInit, OnDestroy {
     }, 400);
   }
 
+  /** Formats the date the UNSC snapshot was loaded; null when the backend did not report one. */
+  private formatListDate(value: string | null | undefined): string | null {
+    if (!value) {
+      return null;
+    }
+    const parsed = new Date(value);
+    if (isNaN(parsed.getTime())) {
+      return null;
+    }
+    return parsed.toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
+  }
+
   ngOnDestroy() {
     clearInterval(this.progressTimer);
   }
 
+  startDisposition(disposition: 'FALSE_POSITIVE' | 'CONFIRMED_MATCH') {
+    this.pendingDisposition = disposition;
+    this.showReasonForm = true;
+    this.reasonTouched = false;
+    this.dispositionError = '';
+  }
+
+  cancelDisposition() {
+    this.showReasonForm = false;
+    this.pendingDisposition = null;
+    this.dispositionReason = '';
+    this.dispositionError = '';
+  }
+
+  submitDisposition() {
+    this.reasonTouched = true;
+    if (!this.reasonValid || !this.pendingDisposition) {
+      return;
+    }
+    // Without a log id there is nothing to attach the assessment to — close as a plain block
+    // rather than silently discarding the officer's reasoning.
+    if (!this.screeningLogId) {
+      this.dispositionError = 'Screening reference missing — re-run the check before recording an outcome.';
+      return;
+    }
+
+    this.savingDisposition = true;
+    this.clientsService
+      .recordSanctionsDisposition(this.screeningLogId, this.pendingDisposition, this.dispositionReason.trim())
+      .subscribe({
+        next: () => {
+          this.savingDisposition = false;
+          // Both outcomes keep the client blocked. A false positive only takes effect once the
+          // Principal Officer approves it from the Sanctions Logs screen.
+          this.dialogRef.close({
+            verified: false,
+            screeningLogId: this.screeningLogId,
+            disposition: this.pendingDisposition
+          });
+        },
+        error: (err: any) => {
+          this.savingDisposition = false;
+          this.dispositionError =
+            err?.error?.defaultUserMessage ||
+            err?.error?.message ||
+            err?.message ||
+            'Could not save the review outcome.';
+        }
+      });
+  }
+
   close(verified: boolean) {
     this.dialogRef.close({ verified, screeningLogId: this.screeningLogId });
   }

src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.html

@@ -122,8 +122,41 @@
         }
 
         <div class="addr-proof-field">
-          <label class="addr-proof-label"><mat-icon>description</mat-icon> Document type</label>
-          <div class="addr-chip-wrap" [class.addr-chip-wrap--locked]="readOnly">
+          <div
+            class="addr-proof-label-row"
+            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px"
+          >
+            <label class="addr-proof-label" style="margin-bottom: 0"
+              ><mat-icon>description</mat-icon> Document type</label
+            >
+            @if (isAddressProofLinkedToKyc && !readOnly) {
+              <div
+                class="addr-proof-linked-note"
+                style="
+                  display: flex;
+                  align-items: center;
+                  gap: 8px;
+                  color: #059669;
+                  font-size: 0.85rem;
+                  background: #ecfdf5;
+                  padding: 4px 12px;
+                  border-radius: 16px;
+                "
+              >
+                <mat-icon style="font-size: 16px; width: 16px; height: 16px">link</mat-icon>
+                Automatically linked from KYC step
+                <button
+                  mat-icon-button
+                  (click)="unlinkAddressProof()"
+                  matTooltip="Provide a different address proof"
+                  style="width: 24px; height: 24px; padding: 0; line-height: 24px"
+                >
+                  <mat-icon style="font-size: 16px; color: #047857">edit</mat-icon>
+                </button>
+              </div>
+            }
+          </div>
+          <div class="addr-chip-wrap" [class.addr-chip-wrap--locked]="readOnly || isAddressProofLinkedToKyc">
             @for (group of addressGroups; track group.label; let last = $last) {
               <div class="addr-chip-group-label"><mat-icon>folder_open</mat-icon> {{ group.label }}</div>
               <div class="addr-chip-grid">
@@ -131,11 +164,11 @@
                   <span
                     class="addr-chip"
                     [class.addr-chip--sel]="isAddrProofSelected(p)"
-                    [class.addr-chip--locked]="readOnly && !isAddrProofSelected(p)"
-                    [attr.aria-disabled]="readOnly ? 'true' : null"
-                    (click)="readOnly ? null : selectAddrProof(p)"
-                    (keydown.enter)="readOnly ? null : selectAddrProof(p)"
-                    [attr.tabindex]="readOnly ? -1 : 0"
+                    [class.addr-chip--locked]="(readOnly || isAddressProofLinkedToKyc) && !isAddrProofSelected(p)"
+                    [attr.aria-disabled]="readOnly || isAddressProofLinkedToKyc ? 'true' : null"
+                    (click)="readOnly || isAddressProofLinkedToKyc ? null : selectAddrProof(p)"
+                    (keydown.enter)="readOnly || isAddressProofLinkedToKyc ? null : selectAddrProof(p)"
+                    [attr.tabindex]="readOnly || isAddressProofLinkedToKyc ? -1 : 0"
                     role="button"
                   >
                     <mat-icon class="addr-chip__icon">
@@ -167,17 +200,43 @@
               <input
                 matInput
                 formControlName="documentKey"
+                [readonly]="readOnly || isAddressProofLinkedToKyc"
                 [placeholder]="selectedAddrProof.documentKeyPlaceholder || ''"
               />
             </mat-form-field>
             @if (selectedAddrProof.requiresDate) {
               <mat-form-field appearance="outline" class="addr-ff">
                 <mat-label>Issue / bill date</mat-label>
-                <input matInput [matDatepicker]="addrIssueDatePicker" formControlName="issueDate" />
-                <mat-datepicker-toggle matSuffix [for]="addrIssueDatePicker"></mat-datepicker-toggle>
+                <input
+                  matInput
+                  [matDatepicker]="addrIssueDatePicker"
+                  formControlName="issueDate"
+                  [readonly]="readOnly || isAddressProofLinkedToKyc"
+                />
+                <mat-datepicker-toggle
+                  matSuffix
+                  [for]="addrIssueDatePicker"
+                  [disabled]="readOnly || isAddressProofLinkedToKyc"
+                ></mat-datepicker-toggle>
                 <mat-datepicker #addrIssueDatePicker></mat-datepicker>
               </mat-form-field>
             }
+            <mat-form-field appearance="outline" class="addr-ff">
+              <mat-label>Expiry date (optional)</mat-label>
+              <span matPrefix class="addr-prefix"><mat-icon>event_busy</mat-icon></span>
+              <input
+                matInput
+                [matDatepicker]="addrExpiryDatePicker"
+                formControlName="expiryDate"
+                [readonly]="readOnly || isAddressProofLinkedToKyc"
+              />
+              <mat-datepicker-toggle
+                matSuffix
+                [for]="addrExpiryDatePicker"
+                [disabled]="readOnly || isAddressProofLinkedToKyc"
+              ></mat-datepicker-toggle>
+              <mat-datepicker #addrExpiryDatePicker></mat-datepicker>
+            </mat-form-field>
           </div>
 
           <div class="addr-upload-grid" [class.addr-upload-grid--two]="selectedAddrProof.sides === 2">
@@ -195,14 +254,18 @@
               @if (existingAddressProofDocuments.length > 0 && !addrFiles.front && readOnly) {
                 <div class="addr-dropzone addr-dropzone--has addr-dropzone--locked">
                   <div class="addr-dropzone__existing">
-                    @if (addrMergedPreview) {
-                      <img [src]="addrMergedPreview" alt="Saved address proof" class="addr-dropzone__thumb" />
+                    @if (existingAddrFrontSlotPreview) {
+                      <img
+                        [src]="existingAddrFrontSlotPreview"
+                        alt="Saved address proof"
+                        class="addr-dropzone__thumb"
+                      />
                     } @else {
                       <mat-icon class="addr-dropzone__doc-ic">description</mat-icon>
                     }
                     <div class="addr-dropzone__existing-meta">
                       <span class="addr-dropzone__existing-name">
-                        {{ existingAddressProofDocuments[0].fileName || existingAddressProofDocuments[0].name }}
+                        {{ existingAddrFrontSlotName }}
                       </span>
                       <button type="button" class="addr-dropzone__view" (click)="viewExistingAddressProof()">
                         <mat-icon>visibility</mat-icon>
@@ -235,14 +298,18 @@
                     <!-- Edit mode WITH existing doc — let the user view it OR
                          click anywhere to replace. -->
                     <div class="addr-dropzone__existing">
-                      @if (addrMergedPreview) {
-                        <img [src]="addrMergedPreview" alt="Saved address proof" class="addr-dropzone__thumb" />
+                      @if (existingAddrFrontSlotPreview) {
+                        <img
+                          [src]="existingAddrFrontSlotPreview"
+                          alt="Saved address proof"
+                          class="addr-dropzone__thumb"
+                        />
                       } @else {
                         <mat-icon class="addr-dropzone__doc-ic">description</mat-icon>
                       }
                       <div class="addr-dropzone__existing-meta">
                         <span class="addr-dropzone__existing-name">
-                          {{ existingAddressProofDocuments[0].fileName || existingAddressProofDocuments[0].name }}
+                          {{ existingAddrFrontSlotName }}
                         </span>
                         <div class="addr-dropzone__existing-actions">
                           <button
@@ -284,14 +351,18 @@
                 @if (existingAddressProofDocuments.length > 0 && !addrFiles.back && readOnly) {
                   <div class="addr-dropzone addr-dropzone--has addr-dropzone--locked">
                     <div class="addr-dropzone__existing">
-                      @if (addrMergedPreview) {
-                        <img [src]="addrMergedPreview" alt="Saved address proof" class="addr-dropzone__thumb" />
+                      @if (existingAddrBackSlotPreview) {
+                        <img
+                          [src]="existingAddrBackSlotPreview"
+                          alt="Saved address proof"
+                          class="addr-dropzone__thumb"
+                        />
                       } @else {
                         <mat-icon class="addr-dropzone__doc-ic">description</mat-icon>
                       }
                       <div class="addr-dropzone__existing-meta">
                         <span class="addr-dropzone__existing-name">
-                          {{ existingAddressProofDocuments[0].fileName || existingAddressProofDocuments[0].name }}
+                          {{ existingAddrBackSlotName }}
                         </span>
                         <button type="button" class="addr-dropzone__view" (click)="viewExistingAddressProof()">
                           <mat-icon>visibility</mat-icon>
@@ -324,14 +395,18 @@
                       <!-- Edit mode WITH existing combined doc — same view + replace
                            pattern as the front slot, anchored to the saved file. -->
                       <div class="addr-dropzone__existing">
-                        @if (addrMergedPreview) {
-                          <img [src]="addrMergedPreview" alt="Saved address proof" class="addr-dropzone__thumb" />
+                        @if (existingAddrBackSlotPreview) {
+                          <img
+                            [src]="existingAddrBackSlotPreview"
+                            alt="Saved address proof"
+                            class="addr-dropzone__thumb"
+                          />
                         } @else {
                           <mat-icon class="addr-dropzone__doc-ic">description</mat-icon>
                         }
                         <div class="addr-dropzone__existing-meta">
                           <span class="addr-dropzone__existing-name">
-                            {{ existingAddressProofDocuments[0].fileName || existingAddressProofDocuments[0].name }}
+                            {{ existingAddrBackSlotName }}
                           </span>
                           <div class="addr-dropzone__existing-actions">
                             <button

src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.ts

@@ -55,9 +55,22 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
    * NPR/Birth Certificate/School ID) from the proof-of-address picker; a company's registered
    * office address is evidenced by utility bills, GST/rent documents etc., not a person's ID. */
   @Input() isNonIndividual = false;
+  /** KYC form data passed down from the parent wizard so we can pre-fill address proof */
+  @Input() kycData: any;
+  /** KYC document code for robust matching */
+  @Input() kycDocCode: string | undefined;
+  /** KYC document files passed down to avoid re-uploading */
+  @Input() kycDocFiles: { front: File | null; back: File | null } | null = null;
+  /** Combined preview string for KYC document */
+  @Input() kycDocMergedPreview: string | null = null;
+  /** Existing server documents from KYC step (used in Edit mode) */
+  @Input() existingKycDocSides: { front: any | null; back: any | null } | null = null;
+  /** Identifier ID for existing server documents */
+  @Input() existingKycIdentifierId: string | null = null;
 
   activeTab = 0;
   sameAsPermanent = false;
+  isAddressProofLinkedToKyc = false;
 
   permanentForm: UntypedFormGroup = this.fb.group({
     addressLine1: [
@@ -89,7 +102,8 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
       Validators.required
     ],
     documentKey: [''],
-    issueDate: ['']
+    issueDate: [''],
+    expiryDate: ['']
   });
 
   currentForm: UntypedFormGroup = this.fb.group({
@@ -209,6 +223,12 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
     size: number;
     previewUrl: string | null;
   }[] = [];
+  /** Set only when the saved documents are separately-uploaded "<Proof> — Front"/"— Back"
+   *  files (the CKYC tab / client-kyc-step convention) rather than this component's own single
+   *  merged-PNG upload — lets the two slots show their own file instead of both showing
+   *  whichever one happened to be first. */
+  private existingAddrFrontPreview: string | null = null;
+  private existingAddrBackPreview: string | null = null;
 
   residenceTypes = [
     'Owned',
@@ -240,6 +260,8 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
   /** Address type name → tab mapping for loading existing data */
   private typeToTab: Record<string, string> = {};
 
+  private existingAddressProofCheckComplete = false;
+
   ngOnInit(): void {
     this.loadProofTypes();
     if (this.clientId) {
@@ -247,6 +269,74 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
     }
   }
 
+  private findMatchingProof(targetName: string | undefined): any {
+    if (!targetName) return undefined;
+    const cleanStr = (s: string) => (s || '').toLowerCase().replace(/[^a-z0-9]/g, '');
+    const n = cleanStr(targetName);
+    return this.addressProofs.find((p) => {
+      const pname = cleanStr(p.name);
+      return pname === n || n.includes(pname) || pname.includes(n);
+    });
+  }
+
+  private tryLinkKycData(): void {
+    if (!this.kycData || !this.kycData.kycDocumentName) return;
+
+    if (this.clientId && !this.existingAddressProofCheckComplete) return;
+
+    if (this.isAddressProofLinkedToKyc || !this.permanentForm.get('documentKey')?.value) {
+      let matchedProof = undefined;
+      if (this.kycDocCode) {
+        matchedProof = this.addressProofs.find((p) => p.code === this.kycDocCode);
+      }
+      if (!matchedProof) {
+        matchedProof = this.findMatchingProof(this.kycData.kycDocumentName);
+      }
+      if (matchedProof) {
+        this.isAddressProofLinkedToKyc = true;
+        this.selectAddrProof(matchedProof);
+        this.permanentForm.patchValue({
+          documentKey: this.kycData.kycDocumentNumber,
+          issueDate: this.kycData.kycDocIssueDate
+        });
+        this.currentForm.patchValue({
+          documentKey: this.kycData.kycDocumentNumber,
+          issueDate: this.kycData.kycDocIssueDate
+        });
+
+        // Sync uploaded images if they exist in KYC step
+        if (this.kycDocFiles && (this.kycDocFiles.front || this.kycDocFiles.back)) {
+          this.addrFiles = { front: this.kycDocFiles.front || null, back: this.kycDocFiles.back || null };
+          if (this.kycDocMergedPreview) {
+            this.addrMergedPreview = this.kycDocMergedPreview;
+          }
+        } else if (this.existingKycDocSides && (this.existingKycDocSides.front || this.existingKycDocSides.back)) {
+          this.existingAddressProofDocuments = [];
+          if (this.existingKycDocSides.front) this.existingAddressProofDocuments.push(this.existingKycDocSides.front);
+          if (this.existingKycDocSides.back) this.existingAddressProofDocuments.push(this.existingKycDocSides.back);
+          // These already carry their own per-side preview from the KYC step's own mapping —
+          // keep the two slots distinct rather than collapsing them into one shared preview.
+          this.existingAddrFrontPreview = this.existingKycDocSides.front?.previewUrl || null;
+          this.existingAddrBackPreview = this.existingKycDocSides.back?.previewUrl || null;
+          this.existingAddressProofIdentifierId = this.existingKycIdentifierId;
+        }
+      } else if (this.isAddressProofLinkedToKyc) {
+        // If it was linked but the KYC document changed to something not allowed for address (e.g. PAN for non-individuals), unlink.
+        this.unlinkAddressProof();
+      }
+    }
+  }
+
+  unlinkAddressProof(): void {
+    this.isAddressProofLinkedToKyc = false;
+    this.permanentForm.patchValue({ documentKey: '', issueDate: null });
+    this.currentForm.patchValue({ documentKey: '', issueDate: null });
+    this.addrFiles = { front: null, back: null };
+    this.addrMergedPreview = null;
+    this.existingAddrFrontPreview = null;
+    this.existingAddrBackPreview = null;
+  }
+
   /**
    * Resets transient address-tab state for a brand-new client.
    *
@@ -274,9 +364,12 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
     this.addrFiles = { front: null, back: null };
     this.addrMergedFile = null;
     this.addrMergedPreview = null;
+    this.existingAddrFrontPreview = null;
+    this.existingAddrBackPreview = null;
     this.existingAddressProofIdentifierId = null;
     this.existingAddressProofDocuments = [];
     this.addressLoaded = false;
+    this.existingAddressProofCheckComplete = false;
     // Re-fetch rather than re-filter `addressProofs` in place — if the previous session's
     // isMinor filtering already reduced it (e.g. down to Aadhaar/Passport only), filtering
     // that reduced list again can never recover the items it already removed.
@@ -293,6 +386,7 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
         );
         this.addressGroups = groupProofsByCategory(this.addressProofs);
         this.loadingProofs = false;
+        this.tryLinkKycData();
       },
       error: () => {
         this.loadingProofs = false;
@@ -404,6 +498,7 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
     proofId: any;
     documentKey: string;
     issueDate: string;
+    expiryDate: string;
     files: { slot: string; file: File }[];
   } {
     const files: { slot: string; file: File }[] = [];
@@ -416,16 +511,29 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
       }
     }
     const rawIssueDate = this.permanentForm.get('issueDate')?.value;
+    const rawExpiryDate = this.permanentForm.get('expiryDate')?.value;
     return {
       proof: this.selectedAddrProof,
       proofId: this.permanentForm.get('proofId')?.value || '',
       documentKey: this.permanentForm.get('documentKey')?.value || '',
       issueDate: rawIssueDate ? this.dates.getDate(rawIssueDate) : '',
+      expiryDate: rawExpiryDate ? this.dates.getDate(rawExpiryDate) : '',
       files
     };
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    if (changes['kycData'] || changes['existingKycDocSides']) {
+      this.tryLinkKycData();
+    }
+    if (changes['existingKycIdentifierId']) {
+      if (
+        this.existingAddressProofIdentifierId &&
+        this.existingAddressProofIdentifierId === this.existingKycIdentifierId
+      ) {
+        this.isAddressProofLinkedToKyc = true;
+      }
+    }
     if (changes['readOnly']) {
       const forms = [
         this.permanentForm,
@@ -544,33 +652,51 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
     }
     this.clientsService.getClientIdentifiers(this.clientId).subscribe({
       next: (identifiers: any[]) => {
-        if (!identifiers || identifiers.length === 0) return;
-        const proofNames = new Set(this.addressProofs.map((p) => p.name?.toLowerCase()).filter(Boolean));
-        const identifier = identifiers.find((i: any) => {
-          const n = i?.documentType?.name?.toLowerCase();
-          return n && proofNames.has(n);
-        });
-        if (!identifier?.id) return;
+        if (!identifiers || identifiers.length === 0) {
+          this.existingAddressProofCheckComplete = true;
+          this.tryLinkKycData();
+          return;
+        }
+        // Aadhaar, Passport, Voter ID and Driving Licence are valid OVDs for both this slot and
+        // the separate identity-proof one (client-kyc-step) — when a client has two such
+        // dual-purpose identifiers, that step always runs first and picks the OLDEST match (the
+        // one on file first, historically the identity proof), so picking the NEWEST match here
+        // lands this step on the other row without the two steps needing to coordinate.
+        const identifier = [...identifiers]
+          .sort((a: any, b: any) => (b?.id ?? 0) - (a?.id ?? 0))
+          .find((i: any) => this.findMatchingProof(i?.documentType?.name));
+        if (!identifier?.id) {
+          this.existingAddressProofCheckComplete = true;
+          this.tryLinkKycData();
+          return;
+        }
 
+        this.existingAddressProofCheckComplete = true;
         this.existingAddressProofIdentifierId = identifier.id.toString();
+        if (this.existingKycIdentifierId && this.existingKycIdentifierId === this.existingAddressProofIdentifierId) {
+          this.isAddressProofLinkedToKyc = true;
+        }
         // Restore selected chip + form values
-        const matchedProof = this.addressProofs.find(
-          (p) => p.name?.toLowerCase() === identifier.documentType?.name?.toLowerCase()
-        );
+        const matchedProof = this.findMatchingProof(identifier.documentType?.name);
         if (matchedProof) {
           this.selectedAddrProof = matchedProof;
           this.permanentForm.patchValue({
             proofId: matchedProof.id,
             documentKey: identifier.documentKey || ''
           });
-          // The description carries `Issue date: yyyy-MM-dd` when set on create (see
-          // create-client.saveAddressProof) — pull it out so the form's issueDate field
-          // shows what was previously entered.
+          // The description carries "Issue date: yyyy-MM-dd, Expiry date: yyyy-MM-dd" when set on
+          // create (see create-client.saveAddressProof / CkycTabComponent) — pull both out so the
+          // form's date fields show what was previously entered. Each match stops at the next
+          // comma so adding expiry after issue doesn't get swallowed into the issue-date capture.
           const desc: string = identifier.description || '';
-          const issueMatch = desc.match(/Issue date:\s*(.+)$/i);
+          const issueMatch = desc.match(/Issue date:\s*([^,|]+)/i);
+          const expiryMatch = desc.match(/Expiry date:\s*([^,|]+)/i);
           if (issueMatch) {
             this.permanentForm.patchValue({ issueDate: this.dates.parseDate(issueMatch[1].trim()) });
           }
+          if (expiryMatch) {
+            this.permanentForm.patchValue({ expiryDate: this.dates.parseDate(expiryMatch[1].trim()) });
+          }
         }
 
         this.clientsService.getClientIdentificationDocuments(this.existingAddressProofIdentifierId).subscribe({
@@ -584,6 +710,29 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
               size: d.size || 0,
               previewUrl: null as string | null
             }));
+
+            const sideOf = (d: { name: string; fileName: string }): 'front' | 'back' | null => {
+              const text = `${d.name || ''} ${d.fileName || ''}`.toLowerCase();
+              if (text.includes('back')) return 'back';
+              if (text.includes('front')) return 'front';
+              return null;
+            };
+            // Changing the document type (e.g. Aadhaar -> Passport) keeps the old front/back
+            // files attached to this same identifier rather than removing them, so there can be
+            // more than one "— Front"/"— Back" pair on file — sort newest-first before matching
+            // or this would keep showing the very first scan ever uploaded here.
+            const byNewest = [...this.existingAddressProofDocuments].sort((a, b) => Number(b.id) - Number(a.id));
+            const frontDoc = byNewest.find((d) => sideOf(d) === 'front');
+            const backDoc = byNewest.find((d) => sideOf(d) === 'back');
+
+            if (frontDoc || backDoc) {
+              // Separately-uploaded front/back — each side gets its own preview.
+              if (frontDoc) this.downloadAddrSidePreview(frontDoc, 'front');
+              if (backDoc) this.downloadAddrSidePreview(backDoc, 'back');
+              return;
+            }
+
+            // Legacy/single-file case: one combined (or unlabelled) document covers both slots.
             const firstImage = this.existingAddressProofDocuments.find((d) =>
               (d.type || '').toLowerCase().startsWith('image/')
             );
@@ -614,6 +763,50 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
     });
   }
 
+  private downloadAddrSidePreview(doc: { id: string; fileName: string; name: string }, slot: 'front' | 'back'): void {
+    this.clientsService.downloadClientIdentificationDocument(this.existingAddressProofIdentifierId!, doc.id).subscribe({
+      next: async (blob: any) => {
+        const buffer = await blob.arrayBuffer();
+        const bytes = new Uint8Array(buffer);
+        let binary = '';
+        for (let i = 0; i < bytes.length; i++) {
+          binary += String.fromCharCode(bytes[i]);
+        }
+        const url = 'data:' + blob.type + ';base64,' + btoa(binary);
+        if (slot === 'front') this.existingAddrFrontPreview = url;
+        else this.existingAddrBackPreview = url;
+      },
+      error: () => {}
+    });
+  }
+
+  /** What the Front slot should show: its own saved file when front/back were uploaded
+   *  separately, falling back to the single combined preview for legacy/merged uploads. */
+  get existingAddrFrontSlotPreview(): string | null {
+    return this.existingAddrFrontPreview || this.addrMergedPreview;
+  }
+
+  get existingAddrFrontSlotName(): string {
+    const front = this.existingAddressProofDocuments.find((d) =>
+      `${d.name} ${d.fileName}`.toLowerCase().includes('front')
+    );
+    const doc = front || this.existingAddressProofDocuments[0];
+    return doc?.fileName || doc?.name || '';
+  }
+
+  /** Same as above, for the Back slot. */
+  get existingAddrBackSlotPreview(): string | null {
+    return this.existingAddrBackPreview || this.addrMergedPreview;
+  }
+
+  get existingAddrBackSlotName(): string {
+    const back = this.existingAddressProofDocuments.find((d) =>
+      `${d.name} ${d.fileName}`.toLowerCase().includes('back')
+    );
+    const doc = back || this.existingAddressProofDocuments[0];
+    return doc?.fileName || doc?.name || '';
+  }
+
   onPinInput(tab: string) {
     const form = this.getForm(tab);
     const pin = form.get('pinCode')?.value?.replace(/\D/g, '') || '';