Merge branch 'Dev' into feat/ci-cd-implementation

change in to merge
initiating connection fixes
2026-09-16 18:30:22 +00:00 · 2026-09-16 23:48:07 +05:30 · 2026-09-16 23:47:47 +05:30 · 2026-09-16 13:53:57 +05:30 · 2026-09-16 06:36:19 +00:00 · 2026-09-16 06:24:55 +00:00
151 changed files with 41587 additions and 1782 deletions
@@ -0,0 +1,10 @@
+# Deployment assets execute on the Linux runner / VPS. Force LF no matter which OS commits them:
+# a CRLF script fails with "/usr/bin/env: 'bash\r': No such file or directory".
+*.sh            text eol=lf
+*.service       text eol=lf
+*.conf          text eol=lf
+*.yml           text eol=lf
+*.yaml          text eol=lf
+Dockerfile      text eol=lf
+.dockerignore   text eol=lf
+*.env.example   text eol=lf
@@ -0,0 +1,509 @@
+# CI/CD — ERP Core. One workflow for pull-request checks and the production deploy
+# (https://erp.hexdive.com). Runbook: docs/40-DEPLOYMENT.md, "Active".
+#
+# Which jobs run for which event:
+#   PR opened / updated into Dev or production → checks: detect → backend / frontend / e2e-typecheck /
+#                                                scripts (only the sides the PR touches) → ci-ok
+#   PR merged into production                  → build-and-deploy (checks are skipped)
+#   PR merged into Dev, or closed unmerged     → nothing (every job skipped)
+#   Run workflow (manual)                      → build-and-deploy with the deploy_backend / deploy_frontend boxes
+#
+# Checks: `ci-ok` is the single required status check for branch protection. It passes when every
+# check passed or was skipped, and rejects PRs into production that don't come from Dev or hotfix/*.
+#
+# Deploy: same shape as the Fitness workflows (publish on the host → stop → copy → fix permissions →
+# start → verify), plus: only the side whose folder changed in the PR is deployed, the database is
+# backed up when the PR changes migrations, and the verify steps FAIL the job (no automatic rollback).
+# Detection only sees the PR being merged: after a failed deploy, fix it and use "Run workflow".
+# The test environment is on hold (deploy/on-hold/).
+#
+# Security model: the dotnet/npm/tsc/eslint check work runs in capped containers without secrets, but
+# the deploy/scripts/*.sh steps come from the PR checkout and run on the host runner as root, some with
+# ERPSECRET in their environment. Acceptable only while the repo is private and every PR author is a
+# trusted team member.
+name: CI/CD - ERP Core
+
+on:
+  pull_request:
+    branches:
+      - Dev
+      - production
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - closed
+  workflow_dispatch:
+    inputs:
+      deploy_backend:
+        description: "Deploy the backend (after changing the config in this file's env: block, or after a failed deploy)"
+        type: boolean
+        default: false
+      deploy_frontend:
+        description: "Deploy the frontend"
+        type: boolean
+        default: false
+
+# One group for the whole file, never cancelled: a deploy (or its migration) must not be interrupted
+# by a PR push. Superseded check runs therefore queue instead of being cancelled; with the runner at
+# capacity 1 they would run one after another anyway.
+concurrency:
+  group: erp-core-cicd
+  cancel-in-progress: false
+
+jobs:
+  # ════════════════════════════ Pull-request checks ════════════════════════════
+  detect:
+    name: detect
+    if: github.event_name == 'pull_request' && github.event.action != 'closed'
+    runs-on: linux
+    outputs:
+      backend: ${{ steps.detect.outputs.backend }}
+      frontend: ${{ steps.detect.outputs.frontend }}
+      e2e: ${{ steps.detect.outputs.e2e }}
+      scripts: ${{ steps.detect.outputs.scripts }}
+    steps:
+      - name: Checkout PR head
+        env:
+          ERP_GIT_TOKEN: ${{ secrets.ERPSECRET }}
+          SHA: ${{ github.event.pull_request.head.sha }}
+          REF: refs/pull/${{ github.event.pull_request.number }}/head
+        run: |
+          basic="$(printf 'oauth2:%s' "$ERP_GIT_TOKEN" | base64 | tr -d '\n')"
+          url="https://gitea.hexdive.com/New_REP_SYSTEM/ERP-core.git"
+          git init -q .
+          git -c "http.extraHeader=Authorization: Basic $basic" fetch -q --depth 1 "$url" "$SHA" \
+            || git -c "http.extraHeader=Authorization: Basic $basic" fetch -q --depth 50 "$url" "$REF"
+          git checkout -qf "$SHA" && git clean -ffdxq
+          git log -1 --format='checked out %h %s'
+      - name: Detect changed sides
+        id: detect
+        env:
+          ERP_GIT_TOKEN: ${{ secrets.ERPSECRET }}
+          BASE_REF: ${{ github.base_ref }}
+        run: bash deploy/scripts/ci-detect.sh
+
+  backend:
+    name: backend
+    needs: detect
+    if: needs.detect.outputs.backend == 'true'
+    runs-on: linux
+    steps:
+      - name: Checkout PR head
+        env:
+          ERP_GIT_TOKEN: ${{ secrets.ERPSECRET }}
+          SHA: ${{ github.event.pull_request.head.sha }}
+          REF: refs/pull/${{ github.event.pull_request.number }}/head
+        run: |
+          basic="$(printf 'oauth2:%s' "$ERP_GIT_TOKEN" | base64 | tr -d '\n')"
+          url="https://gitea.hexdive.com/New_REP_SYSTEM/ERP-core.git"
+          git init -q .
+          git -c "http.extraHeader=Authorization: Basic $basic" fetch -q --depth 1 "$url" "$SHA" \
+            || git -c "http.extraHeader=Authorization: Basic $basic" fetch -q --depth 50 "$url" "$REF"
+          git checkout -qf "$SHA" && git clean -ffdxq
+      - name: Build, test, pending model changes
+        run: bash deploy/scripts/ci-backend.sh
+      - name: Destructive migration scan
+        env:
+          ERP_GIT_TOKEN: ${{ secrets.ERPSECRET }}
+          BASE_REF: ${{ github.base_ref }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+        run: bash deploy/scripts/migration-scan.sh
+
+  frontend:
+    name: frontend
+    needs: detect
+    if: needs.detect.outputs.frontend == 'true'
+    runs-on: linux
+    steps:
+      - name: Checkout PR head
+        env:
+          ERP_GIT_TOKEN: ${{ secrets.ERPSECRET }}
+          SHA: ${{ github.event.pull_request.head.sha }}
+          REF: refs/pull/${{ github.event.pull_request.number }}/head
+        run: |
+          basic="$(printf 'oauth2:%s' "$ERP_GIT_TOKEN" | base64 | tr -d '\n')"
+          url="https://gitea.hexdive.com/New_REP_SYSTEM/ERP-core.git"
+          git init -q .
+          git -c "http.extraHeader=Authorization: Basic $basic" fetch -q --depth 1 "$url" "$SHA" \
+            || git -c "http.extraHeader=Authorization: Basic $basic" fetch -q --depth 50 "$url" "$REF"
+          git checkout -qf "$SHA" && git clean -ffdxq
+      # Checks only (no image): build-and-deploy builds its own image with `docker build` after the merge.
+      - name: Type-check, lint, build
+        run: |
+          z=""; if command -v selinuxenabled >/dev/null 2>&1 && selinuxenabled; then z=":z"; fi
+          docker run --rm --cpus=2 --memory=2500m \
+            -e CI=true -e NEXT_TELEMETRY_DISABLED=1 -e NODE_OPTIONS=--max-old-space-size=2048 \
+            -v "$PWD/Frontend/erp-system:/app$z" -v erp-npm-cache:/root/.npm -w /app node:24-alpine \
+            sh -ec 'npm ci --no-audit --no-fund && npx tsc --noEmit && npx eslint . && npm run build'
+
+  e2e-typecheck:
+    name: e2e-typecheck
+    needs: detect
+    if: needs.detect.outputs.e2e == 'true'
+    runs-on: linux
+    steps:
+      - name: Checkout PR head
+        env:
+          ERP_GIT_TOKEN: ${{ secrets.ERPSECRET }}
+          SHA: ${{ github.event.pull_request.head.sha }}
+          REF: refs/pull/${{ github.event.pull_request.number }}/head
+        run: |
+          basic="$(printf 'oauth2:%s' "$ERP_GIT_TOKEN" | base64 | tr -d '\n')"
+          url="https://gitea.hexdive.com/New_REP_SYSTEM/ERP-core.git"
+          git init -q .
+          git -c "http.extraHeader=Authorization: Basic $basic" fetch -q --depth 1 "$url" "$SHA" \
+            || git -c "http.extraHeader=Authorization: Basic $basic" fetch -q --depth 50 "$url" "$REF"
+          git checkout -qf "$SHA" && git clean -ffdxq
+      - name: Type-check Playwright specs
+        run: |
+          z=""; if command -v selinuxenabled >/dev/null 2>&1 && selinuxenabled; then z=":z"; fi
+          docker run --rm --cpus=1 --memory=768m \
+            -v "$PWD/Testing/e2e:/e2e$z" -v erp-npm-cache:/root/.npm -w /e2e node:24-alpine \
+            sh -ec 'npm ci --no-audit --no-fund && npx tsc --noEmit'
+
+  scripts:
+    name: scripts
+    needs: detect
+    if: needs.detect.outputs.scripts == 'true'
+    runs-on: linux
+    steps:
+      - name: Checkout PR head
+        env:
+          ERP_GIT_TOKEN: ${{ secrets.ERPSECRET }}
+          SHA: ${{ github.event.pull_request.head.sha }}
+          REF: refs/pull/${{ github.event.pull_request.number }}/head
+        run: |
+          basic="$(printf 'oauth2:%s' "$ERP_GIT_TOKEN" | base64 | tr -d '\n')"
+          url="https://gitea.hexdive.com/New_REP_SYSTEM/ERP-core.git"
+          git init -q .
+          git -c "http.extraHeader=Authorization: Basic $basic" fetch -q --depth 1 "$url" "$SHA" \
+            || git -c "http.extraHeader=Authorization: Basic $basic" fetch -q --depth 50 "$url" "$REF"
+          git checkout -qf "$SHA" && git clean -ffdxq
+      - name: bash -n + shellcheck
+        run: |
+          for f in deploy/scripts/*.sh; do bash -n "$f"; done
+          z=""; if command -v selinuxenabled >/dev/null 2>&1 && selinuxenabled; then z=":z"; fi
+          files=""; for f in deploy/scripts/*.sh; do files="$files /mnt/${f#deploy/}"; done
+          # shellcheck disable=SC2086
+          docker run --rm -v "$PWD/deploy:/mnt$z" koalaman/shellcheck:stable \
+            --severity=warning --external-sources --source-path=SCRIPTDIR $files
+
+  ci-ok:
+    name: ci-ok
+    needs: [detect, backend, frontend, e2e-typecheck, scripts]
+    if: always() && github.event_name == 'pull_request' && github.event.action != 'closed'
+    runs-on: linux
+    steps:
+      - name: All required checks passed or were skipped
+        env:
+          RESULTS: >-
+            detect=${{ needs.detect.result }}
+            backend=${{ needs.backend.result }}
+            frontend=${{ needs.frontend.result }}
+            e2e-typecheck=${{ needs.e2e-typecheck.result }}
+            scripts=${{ needs.scripts.result }}
+          BASE_REF: ${{ github.base_ref }}
+          HEAD_REF: ${{ github.head_ref }}
+        run: |
+          failed=0
+          for r in $RESULTS; do
+            case "${r#*=}" in
+              success|skipped) echo "ok      $r" ;;
+              *) echo "FAILED  $r"; failed=1 ;;
+            esac
+          done
+          if [ "$BASE_REF" = production ]; then
+            case "$HEAD_REF" in
+              Dev|hotfix/*) ;;
+              *) echo "PRs into production must come from Dev or hotfix/* (this one is from '$HEAD_REF')"; failed=1 ;;
+            esac
+          fi
+          exit "$failed"
+
+  # ════════════════════════════ Production deploy ════════════════════════════
+  # No `needs: ci-ok`: that job belongs to the PR-open events and is skipped on a merge, so the
+  # deploy would never run. The pre-merge gate is branch protection requiring ci-ok.
+  build-and-deploy:
+    name: Build & Deploy
+    runs-on: linux
+    # base.ref matters: without it a PR merged into Dev would deploy production.
+    if: >-
+      github.event_name == 'workflow_dispatch' ||
+      (github.event.pull_request.merged == true &&
+       github.event.pull_request.base.ref == 'production')
+    env:
+      PUBLISH_DIR: /home/erp/core/publish
+      BUILD_DIR: /tmp/erp-deploy
+      SERVICE: erpcore.service
+      SERVICE_USER: erpuser
+      BACKEND_PORT: "5220"
+      DB_NAME: ERPCore
+      DB_USER: erpcore
+      BACKUP_DIR: /var/backups/erpcore
+      WEB_IMAGE: erp-web:latest
+      WEB_CONTAINER: erp-web
+      WEB_PORT: "3020"
+      # ── Backend runtime config ────────────────────────────────────────────────────────────
+      # There is no /etc/erpcore/erpcore.env. These values are the single source of truth: the
+      # "Install unit + write config" step writes them into a systemd drop-in on every backend
+      # deploy. Change a setting here, then merge or use "Run workflow" with deploy_backend.
+      # The two secrets (DB password, GL API key) come from Gitea secrets, never from this file.
+      AUTHHEX_BASE_URL: "http://127.0.0.1:5433"
+      GL_BASE_URL: "http://127.0.0.1:5433/api/v1/"
+      STORAGE_ROOT: /var/lib/erpcore/hr-documents
+      LOG_PATH: /var/log/erpcore/erpcore-.log
+      SEED_DEMO_DATA: "false"
+      # Door policy: blank = any valid AuthHex token is admitted. Set the real AuthHex codes to
+      # restrict ERP to one user type / role (Infra/Auth/JwtAuthExtensions.cs).
+      AUTH_REQUIRED_USER_TYPE: ""
+      AUTH_REQUIRED_ROLE: ""
+
+    steps:
+      - name: Checkout code
+        env:
+          ERP_GIT_TOKEN: ${{ secrets.ERPSECRET }}
+          MERGE_SHA: ${{ github.event.pull_request.merge_commit_sha }}
+          BASE_SHA: ${{ github.event.pull_request.base.sha }}
+        run: |
+          basic="$(printf 'oauth2:%s' "$ERP_GIT_TOKEN" | base64 | tr -d '\n')"
+          url="https://gitea.hexdive.com/New_REP_SYSTEM/ERP-core.git"
+          fetch() { git -c "http.extraHeader=Authorization: Basic $basic" fetch -q --depth 1 "$url" "$1"; }
+          git init -q .
+          # The exact merge commit, not the branch tip (a second merge may already have landed).
+          if [ -n "$MERGE_SHA" ] && fetch "$MERGE_SHA"; then :; else fetch production; fi
+          git checkout -qf FETCH_HEAD && git clean -ffdxq
+          # production as it was before this PR — the detect step compares against it.
+          if [ -n "$BASE_SHA" ]; then fetch "$BASE_SHA" || echo "could not fetch base $BASE_SHA — both sides will deploy"; fi
+          git log -1 --format='Deploying %h %s'
+
+      - name: Detect changes
+        id: changes
+        env:
+          EVENT: ${{ github.event_name }}
+          BASE_SHA: ${{ github.event.pull_request.base.sha }}
+          INPUT_BACKEND: ${{ inputs.deploy_backend }}
+          INPUT_FRONTEND: ${{ inputs.deploy_frontend }}
+        run: |
+          # A folder's git tree hash changes only when something inside it changed, so comparing
+          # production-before-the-PR with the merge result works for merge, squash and rebase merges.
+          changed() {
+            if [ -z "$BASE_SHA" ] || ! git cat-file -e "$BASE_SHA^{commit}" 2>/dev/null; then echo true; return; fi
+            now="$(git rev-parse -q --verify "HEAD:$1" || true)"
+            before="$(git rev-parse -q --verify "$BASE_SHA:$1" || true)"
+            if [ "$now" != "$before" ]; then echo true; else echo false; fi
+          }
+          if [ "$EVENT" = workflow_dispatch ]; then
+            backend="${INPUT_BACKEND:-false}"
+            frontend="${INPUT_FRONTEND:-false}"
+            migrations="$backend" # unknown on a manual run → take the backup
+          else
+            backend="$(changed Backend/ERPCore)"
+            frontend="$(changed Frontend/erp-system)"
+            migrations="$(changed Backend/ERPCore/Migrations)"
+          fi
+          {
+            echo "backend=$backend"
+            echo "frontend=$frontend"
+            echo "migrations=$migrations"
+          } >> "$GITHUB_OUTPUT"
+          echo "backend=$backend  frontend=$frontend  migrations=$migrations"
+          if [ "$backend" != true ] && [ "$frontend" != true ]; then echo "Nothing to deploy."; fi
+
+      # ── Backend ──────────────────────────────────────────────────────────────────────────────
+      - name: Restore
+        if: steps.changes.outputs.backend == 'true'
+        run: dotnet restore Backend/ERPCore/ERPCore.csproj -r linux-x64
+
+      - name: Publish
+        if: steps.changes.outputs.backend == 'true'
+        run: |
+          rm -rf "$BUILD_DIR"
+          mkdir -p "$BUILD_DIR"
+          dotnet publish Backend/ERPCore/ERPCore.csproj \
+            -c Release \
+            -r linux-x64 \
+            --self-contained true \
+            --no-restore \
+            -o "$BUILD_DIR"
+
+      - name: Backup database
+        if: steps.changes.outputs.backend == 'true' && steps.changes.outputs.migrations == 'true'
+        run: |
+          mkdir -p "$BACKUP_DIR"
+          pg_dump="$(command -v pg_dump || echo /usr/pgsql-16/bin/pg_dump)"
+          file="$BACKUP_DIR/$DB_NAME-$(date -u +%Y%m%dT%H%M%SZ).dump"
+          runuser -u postgres -- "$pg_dump" -Fc "$DB_NAME" > "$file.partial"
+          mv "$file.partial" "$file"
+          echo "Backup: $file"
+          find "$BACKUP_DIR" -maxdepth 1 -name '*.dump' -mtime +30 -delete
+
+      - name: Install unit + write config
+        if: steps.changes.outputs.backend == 'true'
+        env:
+          DB_PASSWORD: ${{ secrets.ERP_DB_PASSWORD }}
+          GL_API_KEY: ${{ secrets.ERP_GL_API_KEY }}
+        run: |
+          # Config lives in this workflow's env: block, not in a file on the server. It is written
+          # to a systemd drop-in here, before the service is stopped, so a bad value fails the job
+          # while the OLD release is still serving.
+          case "$AUTHHEX_BASE_URL$GL_BASE_URL" in
+            *CHANGE_ME*) echo "❌ AUTHHEX_BASE_URL / GL_BASE_URL still hold CHANGE_ME — set the real ports in ci-cd.yml (run 'ss -ltnp' on the VPS)"; exit 1 ;;
+          esac
+          [ -n "$DB_PASSWORD" ] || { echo "❌ Gitea secret ERP_DB_PASSWORD is not set"; exit 1; }
+          [ -n "$GL_API_KEY" ]  || { echo "❌ Gitea secret ERP_GL_API_KEY is not set"; exit 1; }
+          case "$DB_PASSWORD" in
+            *";"*) echo "❌ ERP_DB_PASSWORD contains ';' — Npgsql would truncate the connection string there. Use a password without ';'"; exit 1 ;;
+          esac
+
+          # "Copy to deploy folder" empties the publish folder, so uploads and logs must live elsewhere.
+          publish="$(realpath -m "$PUBLISH_DIR")"
+          for path in "$STORAGE_ROOT" "$LOG_PATH"; do
+            case "$path" in
+              /*) ;;
+              *) echo "❌ $path is relative — it would resolve inside $PUBLISH_DIR"; exit 1 ;;
+            esac
+            case "$(realpath -m "$path")/" in
+              "$publish"/*) echo "❌ $path is inside $PUBLISH_DIR, which every deploy wipes"; exit 1 ;;
+            esac
+            echo "ok  $path"
+          done
+
+          # The unit is installed from the repo, so editing deploy/systemd/erpcore.service and
+          # deploying is enough — no manual copy step on the server.
+          install -m 644 deploy/systemd/erpcore.service /etc/systemd/system/erpcore.service
+          install -d -m 755 /etc/systemd/system/erpcore.service.d
+          conf=/etc/systemd/system/erpcore.service.d/10-erpcore-env.conf
+          # Values are quoted: systemd would otherwise split a password containing spaces.
+          umask 077
+          # Only the listening URL. Everything else is app configuration and lands in
+          # appsettings.Production.json (written after the copy step) — ASPNETCORE_URLS is host
+          # configuration, the one setting appsettings cannot reliably provide.
+          cat > "$conf" <<EOF
+          [Service]
+          Environment="ASPNETCORE_URLS=http://127.0.0.1:$BACKEND_PORT"
+          EOF
+          chmod 600 "$conf"
+          systemctl daemon-reload
+          # Idempotent: creates the multi-user.target.wants symlink so the app survives a reboot.
+          systemctl enable "$SERVICE"
+          echo "✅ unit + drop-in installed ($(grep -c '^Environment=' "$conf") settings; values not printed)"
+
+          # Data dirs must exist and belong to the service user (Serilog fails silently otherwise).
+          install -d -m 750 -o "$SERVICE_USER" -g "$SERVICE_USER" "$STORAGE_ROOT" "$(dirname "$LOG_PATH")"
+
+      - name: Stop service
+        if: steps.changes.outputs.backend == 'true'
+        run: systemctl stop "$SERVICE" || true
+
+      - name: Copy to deploy folder
+        if: steps.changes.outputs.backend == 'true'
+        run: |
+          mkdir -p "$PUBLISH_DIR"
+          rm -rf "${PUBLISH_DIR:?}"/*
+          cp -r "$BUILD_DIR"/. "$PUBLISH_DIR"/
+
+      - name: Fix ownership and permissions
+        if: steps.changes.outputs.backend == 'true'
+        run: |
+          chown -R "$SERVICE_USER:$SERVICE_USER" "$PUBLISH_DIR"
+          find "$PUBLISH_DIR" -type d -exec chmod 755 {} +
+          find "$PUBLISH_DIR" -type f -exec chmod 644 {} +
+          chmod +x "$PUBLISH_DIR/ERPCore"
+
+      # Written AFTER "Fix ownership" so it keeps mode 640 (root:erpuser) instead of being
+      # flattened to 644 — it holds the DB password and the GL API key.
+      - name: Write appsettings.Production.json
+        if: steps.changes.outputs.backend == 'true'
+        env:
+          DB_PASSWORD: ${{ secrets.ERP_DB_PASSWORD }}
+          GL_API_KEY: ${{ secrets.ERP_GL_API_KEY }}
+        run: |
+          # Deployed config lives in appsettings.Production.json, generated here from this
+          # workflow's env: block + the Gitea secrets. It is NOT in git (.gitignore ignores
+          # appsettings.*.json) and is rewritten on every backend deploy, which is why the
+          # publish folder being wiped does not matter. It MERGES over appsettings.json, so
+          # Auth:RsaPublicKeyXml, Issuer, Audience and FileStorage:MaxSizeBytes still come
+          # from the committed base file.
+          conf="$PUBLISH_DIR/appsettings.Production.json"
+          # python3 emits the JSON so a password containing " or \ is escaped correctly.
+          python3 - > "$conf" <<'PY'
+          import json, os
+          e = os.environ
+          print(json.dumps({
+            "ConnectionStrings": {
+              "DefaultConnection":
+                "Host=127.0.0.1;Port=5432;Database=%s;Username=%s;Password=%s"
+                % (e["DB_NAME"], e["DB_USER"], e["DB_PASSWORD"]),
+            },
+            "AuthHex": {"BaseUrl": e["AUTHHEX_BASE_URL"]},
+            "GeneralLedgerService": {"BaseUrl": e["GL_BASE_URL"], "ApiKey": e["GL_API_KEY"]},
+            "Auth": {
+              "RequiredUserTypeCode": e["AUTH_REQUIRED_USER_TYPE"],
+              "RequiredRoleCode": e["AUTH_REQUIRED_ROLE"],
+            },
+            "FileStorage": {"RootPath": e["STORAGE_ROOT"]},
+            "LogFile": {"Path": e["LOG_PATH"]},
+            "Seed": {"DemoData": e["SEED_DEMO_DATA"] == "true"},
+          }, indent=2))
+          PY
+          chown "root:$SERVICE_USER" "$conf"
+          chmod 640 "$conf"
+          python3 -c "import json,sys; json.load(open(sys.argv[1]))" "$conf"
+          echo "✅ appsettings.Production.json written ($(wc -c < "$conf") bytes, mode 640, values not printed)"
+
+      - name: Start service
+        if: steps.changes.outputs.backend == 'true'
+        run: |
+          systemctl reset-failed "$SERVICE" 2>/dev/null || true
+          systemctl start "$SERVICE" || echo "systemctl start returned an error — the verify step shows why"
+          # Baseline for the crash check in the verify step.
+          echo "RESTARTS_AT_START=$(systemctl show -p NRestarts --value "$SERVICE")" >> "$GITHUB_ENV"
+
+      - name: Verify backend
+        if: steps.changes.outputs.backend == 'true'
+        env:
+          HEALTH_TIMEOUT: "300" # migrations run at startup; a crash still fails within seconds
+        run: bash deploy/scripts/wait-healthy.sh
+
+      # ── Frontend (after the backend: a failed backend step stops the job here) ─────────────
+      - name: Build frontend image
+        if: steps.changes.outputs.frontend == 'true'
+        run: docker build -t "$WEB_IMAGE" Frontend/erp-system
+
+      - name: Stop & remove existing container
+        if: steps.changes.outputs.frontend == 'true'
+        run: |
+          docker stop "$WEB_CONTAINER" 2>/dev/null || true
+          docker rm "$WEB_CONTAINER" 2>/dev/null || true
+
+      - name: Start container
+        if: steps.changes.outputs.frontend == 'true'
+        run: |
+          docker run -d \
+            --name "$WEB_CONTAINER" \
+            -p "127.0.0.1:$WEB_PORT:3000" \
+            --memory=512m \
+            --restart unless-stopped \
+            "$WEB_IMAGE"
+
+      - name: Verify frontend
+        if: steps.changes.outputs.frontend == 'true'
+        run: |
+          for _ in $(seq 1 15); do
+            if curl -fsS -o /dev/null "http://127.0.0.1:$WEB_PORT/login"; then
+              echo "✅ Frontend serving on 127.0.0.1:$WEB_PORT"
+              exit 0
+            fi
+            sleep 2
+          done
+          echo "❌ Frontend did not serve /login within 30s"
+          docker ps -a --filter "name=$WEB_CONTAINER" --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"
+          docker logs --tail 50 "$WEB_CONTAINER" || true
+          exit 1
+
+      - name: Remove old images
+        if: steps.changes.outputs.frontend == 'true'
+        run: |
+          docker image prune -f
+          docker builder prune -f --filter until=168h
@@ -36,4 +36,8 @@ Testing/e2e/test-results/
 Testing/e2e/.auth/
 Testing/e2e/blob-report/

+# ── Python (Backend/smoke) ────────────────────────────────────────────
+__pycache__/
+*.pyc
+

@@ -11,6 +11,8 @@ internal sealed class TestCurrentUser : ICurrentUser
    public string UserId => "system";
    public int AuditUserId => User.SystemUserId;
    public bool IsAuthenticated => false;
+    public string? RoleCode => null;
+    public bool IsAdmin => false;
 }

 internal sealed class ThrowingUnitOfWork : ERPCore.Infra.UoW.IUnitOfWork
@@ -5,6 +5,8 @@ VisualStudioVersion = 17.0.31903.59
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ERPCore", "ERPCore\ERPCore.csproj", "{B38203ED-80EA-41C6-8B7D-B664451299E3}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ERPCore.Tests", "ERPCore.Tests\ERPCore.Tests.csproj", "{E451472F-550F-40A0-AE82-E24ECD6C647A}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -27,6 +29,18 @@ Global
 		{B38203ED-80EA-41C6-8B7D-B664451299E3}.Release|x64.Build.0 = Release|Any CPU
 		{B38203ED-80EA-41C6-8B7D-B664451299E3}.Release|x86.ActiveCfg = Release|Any CPU
 		{B38203ED-80EA-41C6-8B7D-B664451299E3}.Release|x86.Build.0 = Release|Any CPU
+		{E451472F-550F-40A0-AE82-E24ECD6C647A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{E451472F-550F-40A0-AE82-E24ECD6C647A}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{E451472F-550F-40A0-AE82-E24ECD6C647A}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{E451472F-550F-40A0-AE82-E24ECD6C647A}.Debug|x64.Build.0 = Debug|Any CPU
+		{E451472F-550F-40A0-AE82-E24ECD6C647A}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{E451472F-550F-40A0-AE82-E24ECD6C647A}.Debug|x86.Build.0 = Debug|Any CPU
+		{E451472F-550F-40A0-AE82-E24ECD6C647A}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{E451472F-550F-40A0-AE82-E24ECD6C647A}.Release|Any CPU.Build.0 = Release|Any CPU
+		{E451472F-550F-40A0-AE82-E24ECD6C647A}.Release|x64.ActiveCfg = Release|Any CPU
+		{E451472F-550F-40A0-AE82-E24ECD6C647A}.Release|x64.Build.0 = Release|Any CPU
+		{E451472F-550F-40A0-AE82-E24ECD6C647A}.Release|x86.ActiveCfg = Release|Any CPU
+		{E451472F-550F-40A0-AE82-E24ECD6C647A}.Release|x86.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -27,13 +27,15 @@ public sealed class AuthController : ControllerBase
    private readonly IAuthRecoveryService _recovery;
    private readonly IAuthAltService _alt;
    private readonly IRoleService _roles;
+    private readonly IAuditService _audit;

-    public AuthController(IAuthUserService users, IAuthRecoveryService recovery, IAuthAltService alt, IRoleService roles)
+    public AuthController(IAuthUserService users, IAuthRecoveryService recovery, IAuthAltService alt, IRoleService roles, IAuditService audit)
    {
        _users = users;
        _recovery = recovery;
        _alt = alt;
        _roles = roles;
+        _audit = audit;
    }

    /// <summary>
@@ -68,6 +70,7 @@ public sealed class AuthController : ControllerBase
    {
        var result = await _users.LoginAsync(request, ct);
        AuthCookieWriter.WriteSession(Response, result.AccessToken, result.RefreshToken, result.Body.ExpiresIn);
+        if (result.Body.User?.UserId is Guid authUserId) await _audit.RecordLoginAsync(authUserId, ClientIp(), ClientUserAgent(), ct);
        return Ok(result.Body);
    }

@@ -78,9 +81,13 @@ public sealed class AuthController : ControllerBase
    {
        var result = await _users.VerifyOtpForLoginAsync(request, ct);
        AuthCookieWriter.WriteSession(Response, result.AccessToken, result.RefreshToken, result.Body.ExpiresIn);
+        if (result.Body.User?.UserId is Guid authUserId) await _audit.RecordLoginAsync(authUserId, ClientIp(), ClientUserAgent(), ct);
        return Ok(result.Body);
    }

+    private string? ClientIp() => HttpContext.Connection.RemoteIpAddress?.ToString();
+    private string? ClientUserAgent() => Request.Headers.UserAgent.ToString() is { Length: > 0 } ua ? ua : null;
+
    [HttpPost("refresh-token")]
    [AllowAnonymous]
    [ProducesResponseType(typeof(AuthSessionResponse), StatusCodes.Status200OK)]
@@ -61,4 +61,14 @@ public sealed class BranchesController : ApiControllerBase
        await _branches.SetStatusAsync(branchId, request.Status, ct);
        return NoContent();
    }
+
+    [HttpDelete("{branchId:int}")]
+    [ProducesResponseType(StatusCodes.Status204NoContent)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    [ProducesResponseType(StatusCodes.Status409Conflict)]
+    public async Task<IActionResult> Delete(int branchId, CancellationToken ct)
+    {
+        await _branches.DeleteAsync(branchId, ct);
+        return NoContent();
+    }
 }
@@ -62,4 +62,14 @@ public sealed class DepartmentsController : ApiControllerBase
        await _departments.SetStatusAsync(departmentId, request.Status, ct);
        return NoContent();
    }
+
+    [HttpDelete("{departmentId:int}")]
+    [ProducesResponseType(StatusCodes.Status204NoContent)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    [ProducesResponseType(StatusCodes.Status409Conflict)]
+    public async Task<IActionResult> Delete(int departmentId, CancellationToken ct)
+    {
+        await _departments.DeleteAsync(departmentId, ct);
+        return NoContent();
+    }
 }
@@ -61,4 +61,14 @@ public sealed class DesignationsController : ApiControllerBase
        await _designations.SetStatusAsync(designationId, request.Status, ct);
        return NoContent();
    }
+
+    [HttpDelete("{designationId:int}")]
+    [ProducesResponseType(StatusCodes.Status204NoContent)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    [ProducesResponseType(StatusCodes.Status409Conflict)]
+    public async Task<IActionResult> Delete(int designationId, CancellationToken ct)
+    {
+        await _designations.DeleteAsync(designationId, ct);
+        return NoContent();
+    }
 }
@@ -83,7 +83,6 @@ public sealed class EmployeesController : ApiControllerBase
        return Ok(result.Value);
    }

-    /// <summary>Never a hard delete — Employee is retained forever (docs/12-BACKEND-HRM.md C.2).</summary>
    [HttpPatch("{employeeId:int}/status")]
    [ProducesResponseType(StatusCodes.Status204NoContent)]
    [ProducesResponseType(StatusCodes.Status404NotFound)]
@@ -93,6 +92,17 @@ public sealed class EmployeesController : ApiControllerBase
        return NoContent();
    }

+    /// <summary>Permanently deletes the employee and all dependent HR records. Blocked (409) if payroll history exists.</summary>
+    [HttpDelete("{employeeId:int}")]
+    [ProducesResponseType(StatusCodes.Status204NoContent)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    [ProducesResponseType(StatusCodes.Status409Conflict)]
+    public async Task<IActionResult> Delete(int employeeId, CancellationToken ct)
+    {
+        await _employees.DeleteAsync(employeeId, ct);
+        return NoContent();
+    }
+
    [HttpPost("{employeeId:int}/link-user")]
    [ProducesResponseType(StatusCodes.Status204NoContent)]
    [ProducesResponseType(StatusCodes.Status404NotFound)]
@@ -61,4 +61,14 @@ public sealed class EmploymentTypesController : ApiControllerBase
        await _employmentTypes.SetStatusAsync(employmentTypeId, request.Status, ct);
        return NoContent();
    }
+
+    [HttpDelete("{employmentTypeId:int}")]
+    [ProducesResponseType(StatusCodes.Status204NoContent)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    [ProducesResponseType(StatusCodes.Status409Conflict)]
+    public async Task<IActionResult> Delete(int employmentTypeId, CancellationToken ct)
+    {
+        await _employmentTypes.DeleteAsync(employmentTypeId, ct);
+        return NoContent();
+    }
 }
@@ -61,4 +61,14 @@ public sealed class HrDocumentTypesController : ApiControllerBase
        await _types.SetStatusAsync(hrDocumentTypeId, request.Status, ct);
        return NoContent();
    }
+
+    [HttpDelete("{hrDocumentTypeId:int}")]
+    [ProducesResponseType(StatusCodes.Status204NoContent)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    [ProducesResponseType(StatusCodes.Status409Conflict)]
+    public async Task<IActionResult> Delete(int hrDocumentTypeId, CancellationToken ct)
+    {
+        await _types.DeleteAsync(hrDocumentTypeId, ct);
+        return NoContent();
+    }
 }
@@ -61,4 +61,14 @@ public sealed class LeaveTypesController : ApiControllerBase
        await _leaveTypes.SetStatusAsync(leaveTypeId, request.Status, ct);
        return NoContent();
    }
+
+    [HttpDelete("{leaveTypeId:int}")]
+    [ProducesResponseType(StatusCodes.Status204NoContent)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    [ProducesResponseType(StatusCodes.Status409Conflict)]
+    public async Task<IActionResult> Delete(int leaveTypeId, CancellationToken ct)
+    {
+        await _leaveTypes.DeleteAsync(leaveTypeId, ct);
+        return NoContent();
+    }
 }
@@ -61,4 +61,14 @@ public sealed class SalaryComponentsController : ApiControllerBase
        await _components.SetStatusAsync(salaryComponentId, request.Status, ct);
        return NoContent();
    }
+
+    [HttpDelete("{salaryComponentId:int}")]
+    [ProducesResponseType(StatusCodes.Status204NoContent)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    [ProducesResponseType(StatusCodes.Status409Conflict)]
+    public async Task<IActionResult> Delete(int salaryComponentId, CancellationToken ct)
+    {
+        await _components.DeleteAsync(salaryComponentId, ct);
+        return NoContent();
+    }
 }
@@ -61,4 +61,14 @@ public sealed class WorkShiftsController : ApiControllerBase
        await _shifts.SetStatusAsync(workShiftId, request.Status, ct);
        return NoContent();
    }
+
+    [HttpDelete("{workShiftId:int}")]
+    [ProducesResponseType(StatusCodes.Status204NoContent)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    [ProducesResponseType(StatusCodes.Status409Conflict)]
+    public async Task<IActionResult> Delete(int workShiftId, CancellationToken ct)
+    {
+        await _shifts.DeleteAsync(workShiftId, ct);
+        return NoContent();
+    }
 }
@@ -1,3 +1,5 @@
+using ERPCore.Domain.Enums;
+using ERPCore.Dtos.Audit;
 using ERPCore.Dtos.Common;
 using ERPCore.Dtos.Hrm;
 using ERPCore.Dtos.Users;
@@ -16,12 +18,14 @@ public sealed class UsersController : ApiControllerBase
 {
    private readonly IUserManagementService _users;
    private readonly IEmployeeUserLinkService _links;
+    private readonly IAuditService _audit;
    private readonly ICurrentUser _currentUser;

-    public UsersController(IUserManagementService users, IEmployeeUserLinkService links, ICurrentUser currentUser)
+    public UsersController(IUserManagementService users, IEmployeeUserLinkService links, IAuditService audit, ICurrentUser currentUser)
    {
        _users = users;
        _links = links;
+        _audit = audit;
        _currentUser = currentUser;
    }

@@ -33,8 +37,8 @@ public sealed class UsersController : ApiControllerBase

    [HttpGet]
    [ProducesResponseType(typeof(PagedResponse<ManagedUserDto>), StatusCodes.Status200OK)]
-    public async Task<ActionResult<PagedResponse<ManagedUserDto>>> List([FromQuery] PageQuery query, CancellationToken ct)
-        => Ok(await _users.ListAsync(query, ct));
+    public async Task<ActionResult<PagedResponse<ManagedUserDto>>> List([FromQuery] PageQuery query, [FromQuery] EntityStatus? status, [FromQuery] string? roleCode, CancellationToken ct)
+        => Ok(await _users.ListAsync(query, status, roleCode, ct));

    /// <summary>AuthHex UserType options for the create-user form's select.</summary>
    [HttpGet("user-types")]
@@ -65,4 +69,18 @@ public sealed class UsersController : ApiControllerBase
    [ProducesResponseType(StatusCodes.Status404NotFound)]
    public async Task<ActionResult<ManagedUserDto>> UpdateRole(int userId, [FromBody] UpdateUserRoleRequest request, CancellationToken ct)
        => Ok(await _users.UpdateRoleAsync(userId, request, ct));
+
+    /// <summary>Revokes/restores standing inside ERPCore only — see <see cref="IUserManagementService.SetStatusAsync"/>.</summary>
+    [HttpPatch("{userId:int}/status")]
+    [ProducesResponseType(typeof(ManagedUserDto), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    public async Task<ActionResult<ManagedUserDto>> UpdateStatus(int userId, [FromBody] UpdateUserStatusRequest request, CancellationToken ct)
+        => Ok(await _users.SetStatusAsync(userId, request.Status, ct));
+
+    /// <summary>Device/login history ERPCore captures itself — not AuthHex's "currently active sessions"
+    /// (which only ever reports the caller's own). See <see cref="IAuditService.ListLoginDevicesAsync"/>.</summary>
+    [HttpGet("{userId:int}/login-devices")]
+    [ProducesResponseType(typeof(PagedResponse<LoginActivityDto>), StatusCodes.Status200OK)]
+    public async Task<ActionResult<PagedResponse<LoginActivityDto>>> ListLoginDevices(int userId, [FromQuery] PageQuery query, CancellationToken ct)
+        => Ok(await _audit.ListLoginDevicesAsync(userId, query, ct));
 }
@@ -15,8 +15,9 @@ public sealed class WarehousesController : ApiControllerBase

    [HttpGet]
    [ProducesResponseType(typeof(PagedResponse<WarehouseDto>), StatusCodes.Status200OK)]
-    public async Task<ActionResult<PagedResponse<WarehouseDto>>> List([FromQuery] PageQuery query, CancellationToken ct)
-        => Ok(await _warehouses.ListAsync(query, ct));
+    public async Task<ActionResult<PagedResponse<WarehouseDto>>> List(
+        [FromQuery] PageQuery query, [FromQuery] int? branchId, CancellationToken ct)
+        => Ok(await _warehouses.ListAsync(query, branchId, ct));

    [HttpGet("{warehouseId:int}")]
    [ProducesResponseType(typeof(WarehouseDto), StatusCodes.Status200OK)]
@@ -6,8 +6,10 @@ namespace ERPCore.Domain.Entities;
 /// Staff record (FR-HR-MD-02) — distinct from <see cref="User"/> (the system login
 /// account): not every employee has a login, and not every login belongs to an
 /// employee. <see cref="UserId"/> is the optional, explicit, human-confirmed link
-/// between the two (docs/12-BACKEND-HRM.md A.5/C.2, Part B.3.2). Never hard-deleted —
-/// separation is recorded via <see cref="Status"/> + <see cref="LastWorkingDate"/>.
+/// between the two (docs/12-BACKEND-HRM.md A.5/C.2, Part B.3.2). Normal separation is
+/// recorded via <see cref="Status"/> + <see cref="LastWorkingDate"/> rather than deletion;
+/// an explicit hard delete is also available (<see cref="Services.Interfaces.IEmployeeService.DeleteAsync"/>)
+/// and cascades to every dependent HR record, blocked only if payroll history exists.
 /// <see cref="EmployeeCode"/> is user-entered (not <see cref="NumberSequence"/>-issued):
 /// HR departments keep their own legacy numbering scheme, and NumberSequence's
 /// year-scoping is the wrong shape for an identifier that must never look "reset".
@@ -0,0 +1,22 @@
+namespace ERPCore.Domain.Entities;
+
+/// <summary>
+/// One row per successful sign-in, captured directly by ERPCore (not AuthHex) so an
+/// admin can see a user's device/login history — AuthHex's own session listing only
+/// ever reports the currently-authenticated caller's own sessions, with no admin-scoped
+/// call to inspect anyone else's. This is a history of past logins, not a live "currently
+/// active sessions" view (that would need AuthHex to expose one).
+/// </summary>
+public class LoginActivity
+{
+    public int LoginActivityId { get; set; }
+    public int UserId { get; set; }
+    public User? User { get; set; }
+
+    public string? IpAddress { get; set; }
+    public string? UserAgent { get; set; }
+    /// <summary>Best-effort "Browser on OS" label parsed from <see cref="UserAgent"/> for display.</summary>
+    public string? DeviceLabel { get; set; }
+
+    public DateTime LoginAt { get; set; }
+}
@@ -5,5 +5,8 @@ public enum AuditAction
 {
    Create,
    Update,
-    Delete
+    Delete,
+    /// <summary>A successful sign-in — written explicitly (not via ErpDbContext's automatic
+    /// entity-change capture, since a login mutates nothing) by AuthController.</summary>
+    Login
 }
@@ -10,3 +10,7 @@ public sealed record AuditLogDto(
 /// <summary>A GL-ready journal stub emitted per stock movement (FR-STK-13).</summary>
 public sealed record JournalEntryStubDto(
    int JournalId, string SourceDocType, int SourceDocId, string DebitAccount, string CreditAccount, decimal Amount);
+
+/// <summary>A captured past sign-in — device history, not a live "currently active sessions" view.</summary>
+public sealed record LoginActivityDto(
+    int LoginActivityId, string? IpAddress, string? DeviceLabel, DateTime LoginAt);
@@ -53,5 +53,10 @@ public sealed class UpdateUserRoleRequest
    [Required] public int RoleId { get; set; }
 }

+public sealed class UpdateUserStatusRequest
+{
+    [Required, EnumDataType(typeof(EntityStatus))] public EntityStatus Status { get; set; }
+}
+
 /// <summary>AuthHex UserType lookup, for populating the create-user form's select (no local shadow — read-only passthrough).</summary>
 public sealed record UserTypeOptionDto(Guid UserTypeId, string? Code, string? Description);
@@ -0,0 +1,39 @@
+namespace ERPCore.Infra.Auth;
+
+/// <summary>
+/// Best-effort "Browser on OS" label from a raw User-Agent string, for display in the
+/// login-device history — not a full parsing library, just enough to be readable
+/// (docs call this out: exact device model detection is out of scope).
+/// </summary>
+public static class UserAgentLabeler
+{
+    public static string Label(string? userAgent)
+    {
+        if (string.IsNullOrWhiteSpace(userAgent)) return "Unknown device";
+
+        var os = DetectOs(userAgent);
+        var browser = DetectBrowser(userAgent);
+        return $"{browser} on {os}";
+    }
+
+    private static string DetectOs(string ua)
+    {
+        if (ua.Contains("Windows", StringComparison.OrdinalIgnoreCase)) return "Windows";
+        if (ua.Contains("Mac OS X", StringComparison.OrdinalIgnoreCase) || ua.Contains("Macintosh", StringComparison.OrdinalIgnoreCase)) return "macOS";
+        if (ua.Contains("Android", StringComparison.OrdinalIgnoreCase)) return "Android";
+        if (ua.Contains("iPhone", StringComparison.OrdinalIgnoreCase) || ua.Contains("iPad", StringComparison.OrdinalIgnoreCase)) return "iOS";
+        if (ua.Contains("Linux", StringComparison.OrdinalIgnoreCase)) return "Linux";
+        return "an unknown OS";
+    }
+
+    private static string DetectBrowser(string ua)
+    {
+        // Order matters: Edge/OPR/Chrome all also contain "Safari"/"Chrome" tokens.
+        if (ua.Contains("Edg/", StringComparison.OrdinalIgnoreCase)) return "Edge";
+        if (ua.Contains("OPR/", StringComparison.OrdinalIgnoreCase) || ua.Contains("Opera", StringComparison.OrdinalIgnoreCase)) return "Opera";
+        if (ua.Contains("Firefox", StringComparison.OrdinalIgnoreCase)) return "Firefox";
+        if (ua.Contains("CriOS", StringComparison.OrdinalIgnoreCase) || ua.Contains("Chrome", StringComparison.OrdinalIgnoreCase)) return "Chrome";
+        if (ua.Contains("Safari", StringComparison.OrdinalIgnoreCase)) return "Safari";
+        return "an unknown browser";
+    }
+}
@@ -18,6 +18,11 @@ public sealed class GeneralLedgerClient(HttpClient http, IConfiguration configur
    public async Task<GeneralLedgerResponse> SendAsync(
        HttpMethod method, string path, string? queryString, string? contentType, Stream? body, CancellationToken ct)
    {
+        // The base appsettings.json ships the key blank; name it here rather than forward GL's 401
+        // for an empty X-Api-Key (deployed environments already refuse to start without it).
+        if (string.IsNullOrWhiteSpace(_apiKey))
+            throw new DomainException(ErrorCodes.GlServiceUnavailable, "GeneralLedgerService:ApiKey is not configured.", 503);
+
        var relativeUri = path.TrimStart('/') + queryString;
        using var request = new HttpRequestMessage(method, relativeUri);
        request.Headers.TryAddWithoutValidation("X-Api-Key", _apiKey);
@@ -21,7 +21,7 @@ public static class AuditScribe
    private static readonly HashSet<Type> Excluded =
    [
        typeof(AuditLog), typeof(JournalEntryStub), typeof(NumberSequence),
-        typeof(StockLedger), typeof(StockLayer),
+        typeof(StockLedger), typeof(StockLayer), typeof(LoginActivity),
    ];

    private static readonly JsonSerializerOptions Json = new()
@@ -0,0 +1,23 @@
+using ERPCore.Domain.Entities;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Metadata.Builders;
+
+namespace ERPCore.Infra.Persistence.Configurations;
+
+public sealed class LoginActivityConfiguration : IEntityTypeConfiguration<LoginActivity>
+{
+    public void Configure(EntityTypeBuilder<LoginActivity> builder)
+    {
+        builder.ToTable("login_activities");
+        builder.HasKey(l => l.LoginActivityId);
+
+        builder.Property(l => l.IpAddress).HasMaxLength(64);
+        builder.Property(l => l.UserAgent).HasMaxLength(500);
+        builder.Property(l => l.DeviceLabel).HasMaxLength(200);
+        builder.Property(l => l.LoginAt).IsRequired();
+
+        builder.HasOne(l => l.User).WithMany().HasForeignKey(l => l.UserId).OnDelete(DeleteBehavior.Cascade);
+
+        builder.HasIndex(l => new { l.UserId, l.LoginAt });
+    }
+}
@@ -29,7 +29,8 @@ public sealed class NavItemConfiguration : IEntityTypeConfiguration<NavItem>
        builder.HasData(
            new NavItem { NavItemId = 1, Code = "dashboard", Label = "Dashboard", Href = "/dashboard", SortOrder = 1 },
            new NavItem { NavItemId = 2, Code = "products", Label = "Products", Href = "/dashboard/products", SortOrder = 2 },
-            new NavItem { NavItemId = 3, Code = "vendors", Label = "Vendors", Href = "/dashboard/vendors", SortOrder = 3 },
+            // NavItemId 3 ("vendors") retired 2026-09-09 — Vendors moved under Procurement as a
+            // sub-item (see SubNavItemConfiguration/PermissionConfiguration), matching the sidebar.
            new NavItem { NavItemId = 4, Code = "procurement", Label = "Procurement", Href = "/dashboard/procurement", SortOrder = 4 },
            new NavItem { NavItemId = 5, Code = "receiving", Label = "Receiving", Href = "/dashboard/receiving/grn", SortOrder = 5 },
            new NavItem { NavItemId = 6, Code = "stock", Label = "Stock", Href = "/dashboard/stock", SortOrder = 6 },
@@ -26,7 +26,9 @@ public sealed class PermissionConfiguration : IEntityTypeConfiguration<Permissio
        builder.HasData(
            new Permission { PermissionId = 1, Code = "NAV:dashboard", NavItemId = 1 },
            new Permission { PermissionId = 2, Code = "NAV:products", NavItemId = 2 },
-            new Permission { PermissionId = 3, Code = "NAV:vendors", NavItemId = 3 },
+            // Moved under Procurement as a sub-item (2026-09-09) — same PermissionId (3), just
+            // repointed to the new SubNavItem, so any role already granted this permission keeps it.
+            new Permission { PermissionId = 3, Code = "NAV:procurement.vendors", SubNavItemId = 30 },
            new Permission { PermissionId = 4, Code = "NAV:procurement", NavItemId = 4 },
            new Permission { PermissionId = 5, Code = "NAV:receiving", NavItemId = 5 },
            new Permission { PermissionId = 6, Code = "NAV:stock", NavItemId = 6 },
@@ -67,7 +69,21 @@ public sealed class PermissionConfiguration : IEntityTypeConfiguration<Permissio
            new Permission { PermissionId = 37, Code = "NAV:production.runs", SubNavItemId = 25 },
            new Permission { PermissionId = 38, Code = "NAV:production.produced", SubNavItemId = 26 },
            new Permission { PermissionId = 39, Code = "NAV:procurement.purchase-invoices", SubNavItemId = 28 },
-            new Permission { PermissionId = 40, Code = "NAV:settings.branches", SubNavItemId = 29 }
+            new Permission { PermissionId = 40, Code = "NAV:settings.branches", SubNavItemId = 29 },
+            new Permission { PermissionId = 41, Code = "NAV:stock.ledger", SubNavItemId = 31 },
+            new Permission { PermissionId = 42, Code = "NAV:stock.enquiry", SubNavItemId = 32 },
+            new Permission { PermissionId = 43, Code = "NAV:stock.valuation", SubNavItemId = 33 },
+            new Permission { PermissionId = 44, Code = "NAV:stock.transfers", SubNavItemId = 34 },
+            new Permission { PermissionId = 45, Code = "NAV:stock.adjustments", SubNavItemId = 35 },
+            new Permission { PermissionId = 46, Code = "NAV:stock.counts", SubNavItemId = 36 },
+            new Permission { PermissionId = 47, Code = "NAV:stock.reorder-alerts", SubNavItemId = 37 },
+            new Permission { PermissionId = 48, Code = "NAV:stock.wastage", SubNavItemId = 38 },
+            // Sales (NavItemId 13) children — SubNavItemId 23 had no permission row before now
+            // (mirrors SubNavItemConfiguration's rename of that row to sales.bundle-templates).
+            new Permission { PermissionId = 49, Code = "NAV:sales.bundle-templates", SubNavItemId = 23 },
+            new Permission { PermissionId = 50, Code = "NAV:sales.invoices", SubNavItemId = 40 },
+            new Permission { PermissionId = 51, Code = "NAV:sales.free-issues", SubNavItemId = 41 },
+            new Permission { PermissionId = 52, Code = "NAV:sales.day-end", SubNavItemId = 42 }
        );
    }
 }
@@ -35,10 +35,19 @@ public sealed class SubNavItemConfiguration : IEntityTypeConfiguration<SubNavIte
            new SubNavItem { SubNavItemId = 7, NavItemId = 9, Code = "settings.roles", Label = "Roles", Href = "/dashboard/settings/roles", SortOrder = 1 },
            new SubNavItem { SubNavItemId = 8, NavItemId = 9, Code = "settings.users", Label = "Users", Href = "/dashboard/settings/users", SortOrder = 2 },
            new SubNavItem { SubNavItemId = 24, NavItemId = 9, Code = "settings.notification-config", Label = "Notification Config", Href = "/dashboard/settings/notification-config", SortOrder = 3 },
-            new SubNavItem { SubNavItemId = 23, NavItemId = 13, Code = "sales.bundle-sales", Label = "Bundle Sales", Href = "/dashboard/sales/bundles", SortOrder = 1 },
+            // Sales (NavItemId 13) children — mirror the sidebar order (AppSidebar.tsx). SubNavItemId
+            // 23 is renamed in place (was "sales.bundle-sales" / Bundle Sales) rather than
+            // delete+recreate, so any role already granted this permission keeps it; the rest are new.
+            new SubNavItem { SubNavItemId = 40, NavItemId = 13, Code = "sales.invoices", Label = "Sales", Href = "/dashboard/sales/invoices", SortOrder = 1 },
+            new SubNavItem { SubNavItemId = 23, NavItemId = 13, Code = "sales.bundle-templates", Label = "Bundle Templates", Href = "/dashboard/sales/bundles/templates", SortOrder = 2 },
+            new SubNavItem { SubNavItemId = 41, NavItemId = 13, Code = "sales.free-issues", Label = "Free Issues", Href = "/dashboard/sales/free-issues", SortOrder = 3 },
+            new SubNavItem { SubNavItemId = 42, NavItemId = 13, Code = "sales.day-end", Label = "Day End", Href = "/dashboard/sales/day-end", SortOrder = 4 },
            // Procurement (NavItemId 4) children — mirror the hub page order.
            // IDs 17-20 (not 9-12): 9-12 were already claimed by the Ledgers sub-items below;
            // these procurement rows were never actually migrated into the database before now.
+            // Vendors (SubNavItemId 30) reuses PermissionId 3, which used to point at the retired
+            // top-level "vendors" NavItem — so any role already granted this permission keeps it.
+            new SubNavItem { SubNavItemId = 30, NavItemId = 4, Code = "procurement.vendors", Label = "Vendors", Href = "/dashboard/vendors", SortOrder = 0 },
            new SubNavItem { SubNavItemId = 17, NavItemId = 4, Code = "procurement.requisitions", Label = "Requisitions", Href = "/dashboard/procurement/requisitions", SortOrder = 1 },
            new SubNavItem { SubNavItemId = 18, NavItemId = 4, Code = "procurement.rfqs", Label = "RFQs", Href = "/dashboard/procurement/rfqs", SortOrder = 2 },
            new SubNavItem { SubNavItemId = 19, NavItemId = 4, Code = "procurement.purchase-orders", Label = "Purchase Orders", Href = "/dashboard/procurement/purchase-orders", SortOrder = 3 },
@@ -64,7 +73,18 @@ public sealed class SubNavItemConfiguration : IEntityTypeConfiguration<SubNavIte
            // FixProductionTemplatesSubNavItemIdConflict for the data repair.
            new SubNavItem { SubNavItemId = 27, NavItemId = 14, Code = "production.templates", Label = "Templates", Href = "/dashboard/production/templates", SortOrder = 1 },
            new SubNavItem { SubNavItemId = 25, NavItemId = 14, Code = "production.runs", Label = "Runs", Href = "/dashboard/production/runs", SortOrder = 2 },
-            new SubNavItem { SubNavItemId = 26, NavItemId = 14, Code = "production.produced", Label = "Produced", Href = "/dashboard/production/produced", SortOrder = 3 }
+            new SubNavItem { SubNavItemId = 26, NavItemId = 14, Code = "production.produced", Label = "Produced", Href = "/dashboard/production/produced", SortOrder = 3 },
+            // Stock (NavItemId 6) children — mirror the sidebar order (AppSidebar.tsx). These rows
+            // never existed in the database before now, so "stock" is still bypassed frontend-side
+            // in AppSidebar.tsx until roles are actually granted these permissions.
+            new SubNavItem { SubNavItemId = 31, NavItemId = 6, Code = "stock.ledger", Label = "Stock Ledger", Href = "/dashboard/stock/ledger", SortOrder = 1 },
+            new SubNavItem { SubNavItemId = 32, NavItemId = 6, Code = "stock.enquiry", Label = "Stock Enquiry", Href = "/dashboard/stock/enquiry", SortOrder = 2 },
+            new SubNavItem { SubNavItemId = 33, NavItemId = 6, Code = "stock.valuation", Label = "Valuation", Href = "/dashboard/stock/valuation", SortOrder = 3 },
+            new SubNavItem { SubNavItemId = 34, NavItemId = 6, Code = "stock.transfers", Label = "Transfers", Href = "/dashboard/stock/transfers", SortOrder = 4 },
+            new SubNavItem { SubNavItemId = 35, NavItemId = 6, Code = "stock.adjustments", Label = "Adjustments", Href = "/dashboard/stock/adjustments", SortOrder = 5 },
+            new SubNavItem { SubNavItemId = 36, NavItemId = 6, Code = "stock.counts", Label = "Counts", Href = "/dashboard/stock/counts", SortOrder = 6 },
+            new SubNavItem { SubNavItemId = 37, NavItemId = 6, Code = "stock.reorder-alerts", Label = "Reorder Alerts", Href = "/dashboard/stock/reorder-alerts", SortOrder = 7 },
+            new SubNavItem { SubNavItemId = 38, NavItemId = 6, Code = "stock.wastage", Label = "Wastage", Href = "/dashboard/stock/wastage", SortOrder = 8 }
        );
    }
 }
@@ -39,17 +39,29 @@ public static class DataSeeder
        ("PRD-REWORK-LOSS", "Production Rework Loss", ReasonContext.Production),
    ];

-    public static async Task SeedAsync(ErpDbContext db, CancellationToken ct = default)
+    /// <param name="includeDemoData">
+    /// Also seed demo rows — sample warehouses/UOMs/category/items, an on-hand stock layer,
+    /// customers, bundle and draft sales documents (<c>Seed:DemoData</c>). On for Development
+    /// and the test deployment (the E2E suite relies on MAIN/SHOP, PCS/BOX, General Goods);
+    /// never for release, which gets reference data only (docs/40-DEPLOYMENT.md).
+    /// </param>
+    public static async Task SeedAsync(ErpDbContext db, bool includeDemoData, CancellationToken ct = default)
    {
+        // Reference data — every environment.
        var dirty = await SeedReasonCodesAsync(db, ct);
        dirty |= await SeedItemTypesAsync(db, ct);
        // dirty |= await SeedCompanyProfileAsync(db, ct);
        dirty |= await SeedProductConfigAsync(db, ct);
        dirty |= await SeedBranchConfigAsync(db, ct);
        dirty |= await SeedNotificationConfigAsync(db, ct);
-        dirty |= await SeedSalesMastersAsync(db, ct);
-        dirty |= await SeedSalesStockAsync(db, ct);
-        dirty |= await SeedSalesAsync(db, ct);
+        dirty |= await SeedSalesSequencesAsync(db, ct);
+
+        if (includeDemoData)
+        {
+            dirty |= await SeedSalesMastersAsync(db, ct);
+            dirty |= await SeedSalesStockAsync(db, ct);
+            dirty |= await SeedSalesAsync(db, ct);
+        }

        if (dirty) await db.SaveChangesAsync(ct);
    }
@@ -344,9 +356,9 @@ public static class DataSeeder
    }

    /// <summary>
-    /// Seeds the minimum sales bootstrap data needed for UI/backend development:
-    /// a couple of customer rows, current-year document counters, and a few draft
-    /// invoice/slip samples when the required master data already exists.
+    /// Seeds the demo sales data used for UI/backend development: a couple of customer
+    /// rows and a few draft invoice/slip samples when the required master data already
+    /// exists. (Current-year document counters are reference data, seeded in SeedAsync.)
    /// This intentionally never clears or rewrites any existing rows.
    /// </summary>
    private static async Task<bool> SeedSalesAsync(ErpDbContext db, CancellationToken ct)
@@ -354,7 +366,6 @@ public static class DataSeeder
        var dirty = false;

        dirty |= await SeedSalesCustomersAsync(db, ct);
-        dirty |= await SeedSalesSequencesAsync(db, ct);
        dirty |= await SeedSampleSalesDocsAsync(db, ct);

        try
@@ -114,6 +114,7 @@ public class ErpDbContext : DbContext
    // --- Cross-cutting: audit trail + GL-ready journal (docs/10 Part C.7) ---
    public DbSet<AuditLog> AuditLogs => Set<AuditLog>();
    public DbSet<JournalEntryStub> JournalEntryStubs => Set<JournalEntryStub>();
+    public DbSet<LoginActivity> LoginActivities => Set<LoginActivity>();

    // --- HRM: org masters (docs/12-BACKEND-HRM.md Part C.1) ---
    public DbSet<Branch> Branches => Set<Branch>();
@@ -0,0 +1,55 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace ERPCore.Migrations
+{
+    /// <inheritdoc />
+    public partial class MoveVendorsUnderProcurement : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            // Order matters: Permission.NavItemId cascades on delete, so the permission row must be
+            // repointed off NavItemId 3 (via the new sub_nav_item) before that nav_item is deleted —
+            // otherwise the delete cascades and removes the permission row first.
+            migrationBuilder.InsertData(
+                table: "sub_nav_items",
+                columns: new[] { "SubNavItemId", "Code", "Href", "Icon", "Label", "NavItemId", "SortOrder" },
+                values: new object[] { 30, "procurement.vendors", "/dashboard/vendors", null, "Vendors", 4, 0 });
+
+            migrationBuilder.UpdateData(
+                table: "permissions",
+                keyColumn: "PermissionId",
+                keyValue: 3,
+                columns: new[] { "Code", "NavItemId", "SubNavItemId" },
+                values: new object[] { "NAV:procurement.vendors", null, 30 });
+
+            migrationBuilder.DeleteData(
+                table: "nav_items",
+                keyColumn: "NavItemId",
+                keyValue: 3);
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DeleteData(
+                table: "sub_nav_items",
+                keyColumn: "SubNavItemId",
+                keyValue: 30);
+
+            migrationBuilder.InsertData(
+                table: "nav_items",
+                columns: new[] { "NavItemId", "Code", "Href", "Icon", "Label", "SortOrder", "Status" },
+                values: new object[] { 3, "vendors", "/dashboard/vendors", null, "Vendors", 3, "Active" });
+
+            migrationBuilder.UpdateData(
+                table: "permissions",
+                keyColumn: "PermissionId",
+                keyValue: 3,
+                columns: new[] { "Code", "NavItemId", "SubNavItemId" },
+                values: new object[] { "NAV:vendors", 3, null });
+        }
+    }
+}
@@ -0,0 +1,130 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+#pragma warning disable CA1814 // Prefer jagged arrays over multidimensional
+
+namespace ERPCore.Migrations
+{
+    /// <inheritdoc />
+    public partial class AddStockSubNavItems : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.InsertData(
+                table: "sub_nav_items",
+                columns: new[] { "SubNavItemId", "Code", "Href", "Icon", "Label", "NavItemId", "SortOrder" },
+                values: new object[,]
+                {
+                    { 31, "stock.ledger", "/dashboard/stock/ledger", null, "Stock Ledger", 6, 1 },
+                    { 32, "stock.enquiry", "/dashboard/stock/enquiry", null, "Stock Enquiry", 6, 2 },
+                    { 33, "stock.valuation", "/dashboard/stock/valuation", null, "Valuation", 6, 3 },
+                    { 34, "stock.transfers", "/dashboard/stock/transfers", null, "Transfers", 6, 4 },
+                    { 35, "stock.adjustments", "/dashboard/stock/adjustments", null, "Adjustments", 6, 5 },
+                    { 36, "stock.counts", "/dashboard/stock/counts", null, "Counts", 6, 6 },
+                    { 37, "stock.reorder-alerts", "/dashboard/stock/reorder-alerts", null, "Reorder Alerts", 6, 7 },
+                    { 38, "stock.wastage", "/dashboard/stock/wastage", null, "Wastage", 6, 8 }
+                });
+
+            migrationBuilder.InsertData(
+                table: "permissions",
+                columns: new[] { "PermissionId", "Code", "NavItemId", "SubNavItemId" },
+                values: new object[,]
+                {
+                    { 41, "NAV:stock.ledger", null, 31 },
+                    { 42, "NAV:stock.enquiry", null, 32 },
+                    { 43, "NAV:stock.valuation", null, 33 },
+                    { 44, "NAV:stock.transfers", null, 34 },
+                    { 45, "NAV:stock.adjustments", null, 35 },
+                    { 46, "NAV:stock.counts", null, 36 },
+                    { 47, "NAV:stock.reorder-alerts", null, 37 },
+                    { 48, "NAV:stock.wastage", null, 38 }
+                });
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DeleteData(
+                table: "permissions",
+                keyColumn: "PermissionId",
+                keyValue: 41);
+
+            migrationBuilder.DeleteData(
+                table: "permissions",
+                keyColumn: "PermissionId",
+                keyValue: 42);
+
+            migrationBuilder.DeleteData(
+                table: "permissions",
+                keyColumn: "PermissionId",
+                keyValue: 43);
+
+            migrationBuilder.DeleteData(
+                table: "permissions",
+                keyColumn: "PermissionId",
+                keyValue: 44);
+
+            migrationBuilder.DeleteData(
+                table: "permissions",
+                keyColumn: "PermissionId",
+                keyValue: 45);
+
+            migrationBuilder.DeleteData(
+                table: "permissions",
+                keyColumn: "PermissionId",
+                keyValue: 46);
+
+            migrationBuilder.DeleteData(
+                table: "permissions",
+                keyColumn: "PermissionId",
+                keyValue: 47);
+
+            migrationBuilder.DeleteData(
+                table: "permissions",
+                keyColumn: "PermissionId",
+                keyValue: 48);
+
+            migrationBuilder.DeleteData(
+                table: "sub_nav_items",
+                keyColumn: "SubNavItemId",
+                keyValue: 31);
+
+            migrationBuilder.DeleteData(
+                table: "sub_nav_items",
+                keyColumn: "SubNavItemId",
+                keyValue: 32);
+
+            migrationBuilder.DeleteData(
+                table: "sub_nav_items",
+                keyColumn: "SubNavItemId",
+                keyValue: 33);
+
+            migrationBuilder.DeleteData(
+                table: "sub_nav_items",
+                keyColumn: "SubNavItemId",
+                keyValue: 34);
+
+            migrationBuilder.DeleteData(
+                table: "sub_nav_items",
+                keyColumn: "SubNavItemId",
+                keyValue: 35);
+
+            migrationBuilder.DeleteData(
+                table: "sub_nav_items",
+                keyColumn: "SubNavItemId",
+                keyValue: 36);
+
+            migrationBuilder.DeleteData(
+                table: "sub_nav_items",
+                keyColumn: "SubNavItemId",
+                keyValue: 37);
+
+            migrationBuilder.DeleteData(
+                table: "sub_nav_items",
+                keyColumn: "SubNavItemId",
+                keyValue: 38);
+        }
+    }
+}
@@ -0,0 +1,94 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+#pragma warning disable CA1814 // Prefer jagged arrays over multidimensional
+
+namespace ERPCore.Migrations
+{
+    /// <inheritdoc />
+    public partial class AddSalesSubNavItems : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.InsertData(
+                table: "permissions",
+                columns: new[] { "PermissionId", "Code", "NavItemId", "SubNavItemId" },
+                values: new object[] { 49, "NAV:sales.bundle-templates", null, 23 });
+
+            migrationBuilder.UpdateData(
+                table: "sub_nav_items",
+                keyColumn: "SubNavItemId",
+                keyValue: 23,
+                columns: new[] { "Code", "Href", "Label", "SortOrder" },
+                values: new object[] { "sales.bundle-templates", "/dashboard/sales/bundles/templates", "Bundle Templates", 2 });
+
+            migrationBuilder.InsertData(
+                table: "sub_nav_items",
+                columns: new[] { "SubNavItemId", "Code", "Href", "Icon", "Label", "NavItemId", "SortOrder" },
+                values: new object[,]
+                {
+                    { 40, "sales.invoices", "/dashboard/sales/invoices", null, "Sales", 13, 1 },
+                    { 41, "sales.free-issues", "/dashboard/sales/free-issues", null, "Free Issues", 13, 3 },
+                    { 42, "sales.day-end", "/dashboard/sales/day-end", null, "Day End", 13, 4 }
+                });
+
+            migrationBuilder.InsertData(
+                table: "permissions",
+                columns: new[] { "PermissionId", "Code", "NavItemId", "SubNavItemId" },
+                values: new object[,]
+                {
+                    { 50, "NAV:sales.invoices", null, 40 },
+                    { 51, "NAV:sales.free-issues", null, 41 },
+                    { 52, "NAV:sales.day-end", null, 42 }
+                });
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DeleteData(
+                table: "permissions",
+                keyColumn: "PermissionId",
+                keyValue: 49);
+
+            migrationBuilder.DeleteData(
+                table: "permissions",
+                keyColumn: "PermissionId",
+                keyValue: 50);
+
+            migrationBuilder.DeleteData(
+                table: "permissions",
+                keyColumn: "PermissionId",
+                keyValue: 51);
+
+            migrationBuilder.DeleteData(
+                table: "permissions",
+                keyColumn: "PermissionId",
+                keyValue: 52);
+
+            migrationBuilder.DeleteData(
+                table: "sub_nav_items",
+                keyColumn: "SubNavItemId",
+                keyValue: 40);
+
+            migrationBuilder.DeleteData(
+                table: "sub_nav_items",
+                keyColumn: "SubNavItemId",
+                keyValue: 41);
+
+            migrationBuilder.DeleteData(
+                table: "sub_nav_items",
+                keyColumn: "SubNavItemId",
+                keyValue: 42);
+
+            migrationBuilder.UpdateData(
+                table: "sub_nav_items",
+                keyColumn: "SubNavItemId",
+                keyValue: 23,
+                columns: new[] { "Code", "Href", "Label", "SortOrder" },
+                values: new object[] { "sales.bundle-sales", "/dashboard/sales/bundles", "Bundle Sales", 1 });
+        }
+    }
+}
@@ -0,0 +1,51 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+
+#nullable disable
+
+namespace ERPCore.Migrations
+{
+    /// <inheritdoc />
+    public partial class AddLoginActivity : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.CreateTable(
+                name: "login_activities",
+                columns: table => new
+                {
+                    LoginActivityId = table.Column<int>(type: "integer", nullable: false)
+                        .Annotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn),
+                    UserId = table.Column<int>(type: "integer", nullable: false),
+                    IpAddress = table.Column<string>(type: "character varying(64)", maxLength: 64, nullable: true),
+                    UserAgent = table.Column<string>(type: "character varying(500)", maxLength: 500, nullable: true),
+                    DeviceLabel = table.Column<string>(type: "character varying(200)", maxLength: 200, nullable: true),
+                    LoginAt = table.Column<DateTime>(type: "timestamp with time zone", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_login_activities", x => x.LoginActivityId);
+                    table.ForeignKey(
+                        name: "FK_login_activities_users_UserId",
+                        column: x => x.UserId,
+                        principalTable: "users",
+                        principalColumn: "UserId",
+                        onDelete: ReferentialAction.Cascade);
+                });
+
+            migrationBuilder.CreateIndex(
+                name: "IX_login_activities_UserId_LoginAt",
+                table: "login_activities",
+                columns: new[] { "UserId", "LoginAt" });
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropTable(
+                name: "login_activities");
+        }
+    }
+}
@@ -2171,6 +2171,39 @@ namespace ERPCore.Migrations
                    b.ToTable("hr_loan_installments", (string)null);
                });

+            modelBuilder.Entity("ERPCore.Domain.Entities.LoginActivity", b =>
+                {
+                    b.Property<int>("LoginActivityId")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("LoginActivityId"));
+
+                    b.Property<string>("DeviceLabel")
+                        .HasMaxLength(200)
+                        .HasColumnType("character varying(200)");
+
+                    b.Property<string>("IpAddress")
+                        .HasMaxLength(64)
+                        .HasColumnType("character varying(64)");
+
+                    b.Property<DateTime>("LoginAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("UserAgent")
+                        .HasMaxLength(500)
+                        .HasColumnType("character varying(500)");
+
+                    b.Property<int>("UserId")
+                        .HasColumnType("integer");
+
+                    b.HasKey("LoginActivityId");
+
+                    b.HasIndex("UserId", "LoginAt");
+
+                    b.ToTable("login_activities", (string)null);
+                });
+
            modelBuilder.Entity("ERPCore.Domain.Entities.NavItem", b =>
                {
                    b.Property<int>("NavItemId")
@@ -2234,15 +2267,6 @@ namespace ERPCore.Migrations
                            Status = "Active"
                        },
                        new
-                        {
-                            NavItemId = 3,
-                            Code = "vendors",
-                            Href = "/dashboard/vendors",
-                            Label = "Vendors",
-                            SortOrder = 3,
-                            Status = "Active"
-                        },
-                        new
                        {
                            NavItemId = 4,
                            Code = "procurement",
@@ -2766,8 +2790,8 @@ namespace ERPCore.Migrations
                        new
                        {
                            PermissionId = 3,
-                            Code = "NAV:vendors",
-                            NavItemId = 3
+                            Code = "NAV:procurement.vendors",
+                            SubNavItemId = 30
                        },
                        new
                        {
@@ -2990,6 +3014,78 @@ namespace ERPCore.Migrations
                            PermissionId = 40,
                            Code = "NAV:settings.branches",
                            SubNavItemId = 29
+                        },
+                        new
+                        {
+                            PermissionId = 41,
+                            Code = "NAV:stock.ledger",
+                            SubNavItemId = 31
+                        },
+                        new
+                        {
+                            PermissionId = 42,
+                            Code = "NAV:stock.enquiry",
+                            SubNavItemId = 32
+                        },
+                        new
+                        {
+                            PermissionId = 43,
+                            Code = "NAV:stock.valuation",
+                            SubNavItemId = 33
+                        },
+                        new
+                        {
+                            PermissionId = 44,
+                            Code = "NAV:stock.transfers",
+                            SubNavItemId = 34
+                        },
+                        new
+                        {
+                            PermissionId = 45,
+                            Code = "NAV:stock.adjustments",
+                            SubNavItemId = 35
+                        },
+                        new
+                        {
+                            PermissionId = 46,
+                            Code = "NAV:stock.counts",
+                            SubNavItemId = 36
+                        },
+                        new
+                        {
+                            PermissionId = 47,
+                            Code = "NAV:stock.reorder-alerts",
+                            SubNavItemId = 37
+                        },
+                        new
+                        {
+                            PermissionId = 48,
+                            Code = "NAV:stock.wastage",
+                            SubNavItemId = 38
+                        },
+                        new
+                        {
+                            PermissionId = 49,
+                            Code = "NAV:sales.bundle-templates",
+                            SubNavItemId = 23
+                        },
+                        new
+                        {
+                            PermissionId = 50,
+                            Code = "NAV:sales.invoices",
+                            SubNavItemId = 40
+                        },
+                        new
+                        {
+                            PermissionId = 51,
+                            Code = "NAV:sales.free-issues",
+                            SubNavItemId = 41
+                        },
+                        new
+                        {
+                            PermissionId = 52,
+                            Code = "NAV:sales.day-end",
+                            SubNavItemId = 42
                        });
                });

@@ -5502,15 +5598,55 @@ namespace ERPCore.Migrations
                        },
                        new
                        {
-                            SubNavItemId = 23,
-                            Code = "sales.bundle-sales",
-                            Href = "/dashboard/sales/bundles",
-                            Label = "Bundle Sales",
+                            SubNavItemId = 40,
+                            Code = "sales.invoices",
+                            Href = "/dashboard/sales/invoices",
+                            Label = "Sales",
                            NavItemId = 13,
                            SortOrder = 1,
                            Status = "Active"
                        },
                        new
+                        {
+                            SubNavItemId = 23,
+                            Code = "sales.bundle-templates",
+                            Href = "/dashboard/sales/bundles/templates",
+                            Label = "Bundle Templates",
+                            NavItemId = 13,
+                            SortOrder = 2,
+                            Status = "Active"
+                        },
+                        new
+                        {
+                            SubNavItemId = 41,
+                            Code = "sales.free-issues",
+                            Href = "/dashboard/sales/free-issues",
+                            Label = "Free Issues",
+                            NavItemId = 13,
+                            SortOrder = 3,
+                            Status = "Active"
+                        },
+                        new
+                        {
+                            SubNavItemId = 42,
+                            Code = "sales.day-end",
+                            Href = "/dashboard/sales/day-end",
+                            Label = "Day End",
+                            NavItemId = 13,
+                            SortOrder = 4,
+                            Status = "Active"
+                        },
+                        new
+                        {
+                            SubNavItemId = 30,
+                            Code = "procurement.vendors",
+                            Href = "/dashboard/vendors",
+                            Label = "Vendors",
+                            NavItemId = 4,
+                            SortOrder = 0,
+                            Status = "Active"
+                        },
+                        new
                        {
                            SubNavItemId = 17,
                            Code = "procurement.requisitions",
@@ -5689,6 +5825,86 @@ namespace ERPCore.Migrations
                            NavItemId = 14,
                            SortOrder = 3,
                            Status = "Active"
+                        },
+                        new
+                        {
+                            SubNavItemId = 31,
+                            Code = "stock.ledger",
+                            Href = "/dashboard/stock/ledger",
+                            Label = "Stock Ledger",
+                            NavItemId = 6,
+                            SortOrder = 1,
+                            Status = "Active"
+                        },
+                        new
+                        {
+                            SubNavItemId = 32,
+                            Code = "stock.enquiry",
+                            Href = "/dashboard/stock/enquiry",
+                            Label = "Stock Enquiry",
+                            NavItemId = 6,
+                            SortOrder = 2,
+                            Status = "Active"
+                        },
+                        new
+                        {
+                            SubNavItemId = 33,
+                            Code = "stock.valuation",
+                            Href = "/dashboard/stock/valuation",
+                            Label = "Valuation",
+                            NavItemId = 6,
+                            SortOrder = 3,
+                            Status = "Active"
+                        },
+                        new
+                        {
+                            SubNavItemId = 34,
+                            Code = "stock.transfers",
+                            Href = "/dashboard/stock/transfers",
+                            Label = "Transfers",
+                            NavItemId = 6,
+                            SortOrder = 4,
+                            Status = "Active"
+                        },
+                        new
+                        {
+                            SubNavItemId = 35,
+                            Code = "stock.adjustments",
+                            Href = "/dashboard/stock/adjustments",
+                            Label = "Adjustments",
+                            NavItemId = 6,
+                            SortOrder = 5,
+                            Status = "Active"
+                        },
+                        new
+                        {
+                            SubNavItemId = 36,
+                            Code = "stock.counts",
+                            Href = "/dashboard/stock/counts",
+                            Label = "Counts",
+                            NavItemId = 6,
+                            SortOrder = 6,
+                            Status = "Active"
+                        },
+                        new
+                        {
+                            SubNavItemId = 37,
+                            Code = "stock.reorder-alerts",
+                            Href = "/dashboard/stock/reorder-alerts",
+                            Label = "Reorder Alerts",
+                            NavItemId = 6,
+                            SortOrder = 7,
+                            Status = "Active"
+                        },
+                        new
+                        {
+                            SubNavItemId = 38,
+                            Code = "stock.wastage",
+                            Href = "/dashboard/stock/wastage",
+                            Label = "Wastage",
+                            NavItemId = 6,
+                            SortOrder = 8,
+                            Status = "Active"
                        });
                });

@@ -6618,6 +6834,17 @@ namespace ERPCore.Migrations
                    b.Navigation("PayrollRun");
                });

+            modelBuilder.Entity("ERPCore.Domain.Entities.LoginActivity", b =>
+                {
+                    b.HasOne("ERPCore.Domain.Entities.User", "User")
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("User");
+                });
+
            modelBuilder.Entity("ERPCore.Domain.Entities.NotificationConfig", b =>
                {
                    b.HasOne("ERPCore.Domain.Entities.User", "UpdatedByUser")
@@ -15,6 +15,7 @@ using ERPCore.Services.Production;
 using ERPCore.Services.Stock;
 using ERPCore.System.Errors;
 using Microsoft.AspNetCore.Authentication;
+using Microsoft.AspNetCore.HttpOverrides;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.EntityFrameworkCore.Diagnostics;
 using Microsoft.OpenApi;
@@ -23,10 +24,32 @@ using Serilog;

 var builder = WebApplication.CreateBuilder(args);

-// Serilog (file sink) — reads levels from configuration, plus a rolling daily file.
+// Fail fast on missing deployment config. Outside Development these arrive as environment
+// variables (docs/40-DEPLOYMENT.md §5); a blank value would otherwise surface later as an
+// unrelated crash (e.g. `new Uri("")` for AuthHex:BaseUrl) instead of naming the key.
+if (!builder.Environment.IsDevelopment())
+{
+    string[] requiredKeys =
+    [
+        "ConnectionStrings:DefaultConnection",
+        "AuthHex:BaseUrl",
+        "GeneralLedgerService:BaseUrl",
+        "GeneralLedgerService:ApiKey",
+        "Auth:RsaPublicKeyXml",
+    ];
+    var missing = requiredKeys.Where(k => string.IsNullOrWhiteSpace(builder.Configuration[k])).ToArray();
+    if (missing.Length > 0)
+        throw new InvalidOperationException(
+            $"Missing required configuration for environment '{builder.Environment.EnvironmentName}': " +
+            $"{string.Join(", ", missing)}. Set them as environment variables (':' becomes '__', " +
+            "e.g. ConnectionStrings__DefaultConnection).");
+}
+
+// Serilog (file sink) — reads levels from configuration, plus a rolling daily file. The path is
+// configurable so deployed instances log outside their release folder (LogFile:Path).
 builder.Host.UseSerilog((ctx, cfg) => cfg
    .ReadFrom.Configuration(ctx.Configuration)
-    .WriteTo.File("logs/erpcore-.log", rollingInterval: RollingInterval.Day));
+    .WriteTo.File(ctx.Configuration["LogFile:Path"] ?? "logs/erpcore-.log", rollingInterval: RollingInterval.Day));

 // Controllers + JSON: serialize enums as their string names (docs/11 §8, camelCase).
 builder.Services.AddControllers()
@@ -49,8 +72,10 @@ builder.Services.AddErpJwtAuth(builder.Configuration);
 // AuthController proxy → AuthHex (docs/11 §2.0)
 builder.Services.AddHttpClient<IAuthHexClient, AuthHexClient>(c =>
 {
-    var baseUrl = builder.Configuration["AuthHex:BaseUrl"]
-        ?? throw new InvalidOperationException("AuthHex:BaseUrl is not configured.");
+    // Blank counts as missing: the base appsettings.json ships these keys empty on purpose.
+    var baseUrl = builder.Configuration["AuthHex:BaseUrl"];
+    if (string.IsNullOrWhiteSpace(baseUrl))
+        throw new InvalidOperationException("AuthHex:BaseUrl is not configured (set it in appsettings.Development.json locally).");
    c.BaseAddress = new Uri(baseUrl);
 });
 builder.Services.AddScoped<IAuthUserService, AuthUserService>();
@@ -60,8 +85,9 @@ builder.Services.AddScoped<IAuthAltService, AuthAltService>();
 // General Ledger service proxy → external GL microservice (docs/12-GENERAL-LEDGER-INTEGRATION.md)
 builder.Services.AddHttpClient<IGeneralLedgerClient, GeneralLedgerClient>(c =>
 {
-    var baseUrl = builder.Configuration["GeneralLedgerService:BaseUrl"]
-        ?? throw new InvalidOperationException("GeneralLedgerService:BaseUrl is not configured.");
+    var baseUrl = builder.Configuration["GeneralLedgerService:BaseUrl"];
+    if (string.IsNullOrWhiteSpace(baseUrl))
+        throw new InvalidOperationException("GeneralLedgerService:BaseUrl is not configured (set it in appsettings.Development.json locally).");
    c.BaseAddress = new Uri(baseUrl);
 });
 builder.Services.AddScoped<IGeneralLedgerService, GeneralLedgerService>();
@@ -205,7 +231,10 @@ using (var scope = app.Services.CreateScope())
    await db.Database.MigrateAsync();
    try
    {
-        await DataSeeder.SeedAsync(db);
+        // Demo rows (sample catalog, stock, customers, sales docs) default on only in Development;
+        // the test deployment opts in with Seed__DemoData=true, release never does.
+        var includeDemoData = app.Configuration.GetValue("Seed:DemoData", app.Environment.IsDevelopment());
+        await DataSeeder.SeedAsync(db, includeDemoData);
    }
    catch (Exception ex)
    {
@@ -213,9 +242,18 @@ using (var scope = app.Services.CreateScope())
    }
 }

+// Behind the co-located Apache reverse proxy (docs/40-DEPLOYMENT.md): take the client IP and
+// scheme from X-Forwarded-*. Only loopback proxies are trusted by default, which is exactly it.
+app.UseForwardedHeaders(new ForwardedHeadersOptions
+{
+    ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
+});
+
 app.UseSerilogRequestLogging();

-if (app.Environment.IsDevelopment())
+// Off in Production only. The test deployment (Staging) keeps it; it is still not public there
+// because Apache proxies only /api/ — reach it through an SSH tunnel to the backend port.
+if (!app.Environment.IsProduction())
 {
    app.UseSwagger();
    app.UseSwaggerUI();
@@ -1,7 +1,10 @@
 using System.Text.Json;
 using ERPCore.Domain.Entities;
+using ERPCore.Domain.Enums;
 using ERPCore.Dtos.Audit;
 using ERPCore.Dtos.Common;
+using ERPCore.Infra.Auth;
+using ERPCore.Infra.UoW;
 using ERPCore.Repositories.Interfaces;
 using ERPCore.Services.Interfaces;
 using Microsoft.EntityFrameworkCore;
@@ -12,11 +15,19 @@ public sealed class AuditService : IAuditService
 {
    private readonly IRepository<AuditLog> _logs;
    private readonly IRepository<JournalEntryStub> _journal;
+    private readonly IRepository<User> _users;
+    private readonly IRepository<LoginActivity> _loginActivities;
+    private readonly IUnitOfWork _uow;

-    public AuditService(IRepository<AuditLog> logs, IRepository<JournalEntryStub> journal)
+    public AuditService(
+        IRepository<AuditLog> logs, IRepository<JournalEntryStub> journal, IRepository<User> users,
+        IRepository<LoginActivity> loginActivities, IUnitOfWork uow)
    {
        _logs = logs;
        _journal = journal;
+        _users = users;
+        _loginActivities = loginActivities;
+        _uow = uow;
    }

    public async Task<PagedResponse<AuditLogDto>> ListLogsAsync(
@@ -55,4 +66,48 @@ public sealed class AuditService : IAuditService

        return PagedResponse<JournalEntryStubDto>.Create(rows, query.Page, query.PageSize, total);
    }
+
+    public async Task RecordLoginAsync(Guid authUserId, string? ipAddress, string? userAgent, CancellationToken ct = default)
+    {
+        var userId = await _users.Query().AsNoTracking()
+            .Where(u => u.AuthUserId == authUserId)
+            .Select(u => (int?)u.UserId)
+            .FirstOrDefaultAsync(ct);
+        // JIT provisioning may not have created the local shadow row yet on a brand-new
+        // account's very first login — nothing to attach the log to in that case.
+        if (userId is null) return;
+
+        var now = DateTime.UtcNow;
+        await _logs.AddAsync(new AuditLog
+        {
+            UserId = userId.Value,
+            EntityType = "User",
+            EntityId = userId.Value,
+            Action = AuditAction.Login,
+            ChangeSet = "{}",
+            CreatedAt = now
+        }, ct);
+        await _loginActivities.AddAsync(new LoginActivity
+        {
+            UserId = userId.Value,
+            IpAddress = ipAddress,
+            UserAgent = userAgent,
+            DeviceLabel = UserAgentLabeler.Label(userAgent),
+            LoginAt = now
+        }, ct);
+        await _uow.SaveChangesAsync(ct);
+    }
+
+    public async Task<PagedResponse<LoginActivityDto>> ListLoginDevicesAsync(int userId, PageQuery query, CancellationToken ct = default)
+    {
+        var q = _loginActivities.Query().AsNoTracking().Where(l => l.UserId == userId);
+
+        var total = await q.CountAsync(ct);
+        var rows = await q.OrderByDescending(l => l.LoginActivityId)
+            .Skip(query.Skip).Take(query.PageSize)
+            .Select(l => new LoginActivityDto(l.LoginActivityId, l.IpAddress, l.DeviceLabel, l.LoginAt))
+            .ToListAsync(ct);
+
+        return PagedResponse<LoginActivityDto>.Create(rows, query.Page, query.PageSize, total);
+    }
 }
@@ -123,5 +123,21 @@ public sealed class BranchService : IBranchService
        await _uow.SaveChangesAsync(ct);
    }

+    public async Task DeleteAsync(int branchId, CancellationToken ct = default)
+    {
+        var branch = await _branches.GetByIdAsync(branchId, ct)
+            ?? throw new NotFoundException($"Branch {branchId} was not found.");
+
+        _branches.Remove(branch);
+        try
+        {
+            await _uow.SaveChangesAsync(ct);
+        }
+        catch (DbUpdateException)
+        {
+            throw new DomainException(ErrorCodes.MasterInUse, "This branch is referenced by other records and cannot be deleted.", 409);
+        }
+    }
+
    private static BranchDto Map(Branch b) => new(b.BranchId, b.Code, b.Name, b.Address, b.PhoneNumber, b.Status, b.CreatedAt, b.UpdatedAt);
 }
@@ -127,6 +127,22 @@ public sealed class DepartmentService : IDepartmentService
        await _uow.SaveChangesAsync(ct);
    }

+    public async Task DeleteAsync(int departmentId, CancellationToken ct = default)
+    {
+        var dept = await _departments.GetByIdAsync(departmentId, ct)
+            ?? throw new NotFoundException($"Department {departmentId} was not found.");
+
+        _departments.Remove(dept);
+        try
+        {
+            await _uow.SaveChangesAsync(ct);
+        }
+        catch (DbUpdateException)
+        {
+            throw new DomainException(ErrorCodes.MasterInUse, "This department is referenced by other records (sub-departments or employees) and cannot be deleted.", 409);
+        }
+    }
+
    /// <summary>Walks up from <paramref name="newParentId"/>; throws if it ever reaches <paramref name="departmentId"/>.</summary>
    private async Task EnsureNoCycleAsync(int departmentId, int newParentId, CancellationToken ct)
    {
@@ -101,5 +101,21 @@ public sealed class DesignationService : IDesignationService
        await _uow.SaveChangesAsync(ct);
    }

+    public async Task DeleteAsync(int designationId, CancellationToken ct = default)
+    {
+        var designation = await _designations.GetByIdAsync(designationId, ct)
+            ?? throw new NotFoundException($"Designation {designationId} was not found.");
+
+        _designations.Remove(designation);
+        try
+        {
+            await _uow.SaveChangesAsync(ct);
+        }
+        catch (DbUpdateException)
+        {
+            throw new DomainException(ErrorCodes.MasterInUse, "This designation is referenced by other records and cannot be deleted.", 409);
+        }
+    }
+
    private static DesignationDto Map(Designation d) => new(d.DesignationId, d.Code, d.Name, d.Status, d.CreatedAt, d.UpdatedAt);
 }
@@ -3,6 +3,7 @@ using ERPCore.Domain.Entities;
 using ERPCore.Domain.Enums;
 using ERPCore.Dtos.Common;
 using ERPCore.Dtos.Hrm;
+using ERPCore.Infra.Storage;
 using ERPCore.Infra.UoW;
 using ERPCore.Repositories.Interfaces;
 using ERPCore.Services.Interfaces;
@@ -21,17 +22,31 @@ public sealed class EmployeeService : IEmployeeService
    private readonly IRepository<Employee> _employees;
    private readonly IRepository<User> _users;
    private readonly IRepository<EmployeeBankDetail> _bankDetails;
+    private readonly IRepository<EmployeeDocument> _documents;
+    private readonly IRepository<EmployeeSalaryStructure> _salaryStructures;
+    private readonly IRepository<EmployeeLoan> _loans;
+    private readonly IRepository<LeaveBalance> _leaveBalances;
+    private readonly IRepository<PayrollLine> _payrollLines;
+    private readonly IFileStorageService _fileStorage;
    private readonly IBranchConfigService _branchConfig;
    private readonly IBranchAccessService _branchAccess;
    private readonly IUnitOfWork _uow;

    public EmployeeService(
        IRepository<Employee> employees, IRepository<User> users, IRepository<EmployeeBankDetail> bankDetails,
-        IBranchConfigService branchConfig, IBranchAccessService branchAccess, IUnitOfWork uow)
+        IRepository<EmployeeDocument> documents, IRepository<EmployeeSalaryStructure> salaryStructures,
+        IRepository<EmployeeLoan> loans, IRepository<LeaveBalance> leaveBalances, IRepository<PayrollLine> payrollLines,
+        IFileStorageService fileStorage, IBranchConfigService branchConfig, IBranchAccessService branchAccess, IUnitOfWork uow)
    {
        _employees = employees;
        _users = users;
        _bankDetails = bankDetails;
+        _documents = documents;
+        _salaryStructures = salaryStructures;
+        _loans = loans;
+        _leaveBalances = leaveBalances;
+        _payrollLines = payrollLines;
+        _fileStorage = fileStorage;
        _branchConfig = branchConfig;
        _branchAccess = branchAccess;
        _uow = uow;
@@ -197,6 +212,48 @@ public sealed class EmployeeService : IEmployeeService
        await _uow.SaveChangesAsync(ct);
    }

+    public async Task DeleteAsync(int employeeId, CancellationToken ct = default)
+    {
+        var employee = await _employees.GetByIdAsync(employeeId, ct)
+            ?? throw new NotFoundException($"Employee {employeeId} was not found.");
+
+        if (await _payrollLines.Query().AnyAsync(l => l.EmployeeId == employeeId, ct))
+            throw new DomainException(ErrorCodes.EmployeeHasPayrollHistory, "This employee has payroll history and cannot be deleted.", 409);
+
+        // A linked system-user account survives the employee row (Employee.UserId → User is
+        // Restrict, so cascading it away isn't even an option) — deactivate it (same as the
+        // Active/Deactivate toggle on Settings > Users) rather than leaving a login standing
+        // with no staff record behind it. The User row itself is never removed.
+        if (employee.UserId is not null)
+        {
+            var linkedUser = await _users.GetByIdAsync(employee.UserId.Value, ct);
+            if (linkedUser is not null) linkedUser.Status = EntityStatus.Inactive;
+        }
+
+        // Bank details and documents cascade at the DB level, but documents also have a
+        // physical file on disk that cascading the row would silently orphan — delete those
+        // explicitly first. Salary structures, loans, and leave balances are Restrict FKs, so
+        // they must be removed before the employee row itself will delete.
+        var documents = await _documents.Query().Where(d => d.EmployeeId == employeeId).ToListAsync(ct);
+        foreach (var doc in documents)
+        {
+            await _fileStorage.DeleteAsync(doc.RelativePath, ct);
+            _documents.Remove(doc);
+        }
+
+        var salaryStructures = await _salaryStructures.Query().Where(s => s.EmployeeId == employeeId).ToListAsync(ct);
+        foreach (var structure in salaryStructures) _salaryStructures.Remove(structure);
+
+        var loans = await _loans.Query().Where(l => l.EmployeeId == employeeId).ToListAsync(ct);
+        foreach (var loan in loans) _loans.Remove(loan);
+
+        var leaveBalances = await _leaveBalances.Query().Where(b => b.EmployeeId == employeeId).ToListAsync(ct);
+        foreach (var balance in leaveBalances) _leaveBalances.Remove(balance);
+
+        _employees.Remove(employee);
+        await _uow.SaveChangesAsync(ct);
+    }
+
    public async Task<List<EmployeeBankDetailDto>> ListBankDetailsAsync(int employeeId, CancellationToken ct = default)
    {
        return await _bankDetails.Query().AsNoTracking()
@@ -101,5 +101,21 @@ public sealed class EmploymentTypeService : IEmploymentTypeService
        await _uow.SaveChangesAsync(ct);
    }

+    public async Task DeleteAsync(int employmentTypeId, CancellationToken ct = default)
+    {
+        var et = await _employmentTypes.GetByIdAsync(employmentTypeId, ct)
+            ?? throw new NotFoundException($"Employment type {employmentTypeId} was not found.");
+
+        _employmentTypes.Remove(et);
+        try
+        {
+            await _uow.SaveChangesAsync(ct);
+        }
+        catch (DbUpdateException)
+        {
+            throw new DomainException(ErrorCodes.MasterInUse, "This employment type is referenced by other records and cannot be deleted.", 409);
+        }
+    }
+
    private static EmploymentTypeDto Map(EmploymentType e) => new(e.EmploymentTypeId, e.Code, e.Name, e.Status, e.CreatedAt, e.UpdatedAt);
 }
@@ -108,6 +108,22 @@ public sealed class HrDocumentTypeService : IHrDocumentTypeService
        await _uow.SaveChangesAsync(ct);
    }

+    public async Task DeleteAsync(int hrDocumentTypeId, CancellationToken ct = default)
+    {
+        var type = await _types.GetByIdAsync(hrDocumentTypeId, ct)
+            ?? throw new NotFoundException($"Document type {hrDocumentTypeId} was not found.");
+
+        _types.Remove(type);
+        try
+        {
+            await _uow.SaveChangesAsync(ct);
+        }
+        catch (DbUpdateException)
+        {
+            throw new DomainException(ErrorCodes.MasterInUse, "This document type is referenced by other records and cannot be deleted.", 409);
+        }
+    }
+
    private static HrDocumentTypeDto Map(HrDocumentType t) => new(
        t.HrDocumentTypeId, t.Code, t.Name, t.Category, t.RequiredAtOnboarding, t.ExpiryTracked, t.Status, t.CreatedAt, t.UpdatedAt);
 }
@@ -43,6 +43,11 @@ public sealed class LeaveRequestService : ILeaveRequestService
        var q = _requests.Query().AsNoTracking().Include(r => r.Employee).Include(r => r.LeaveType).AsQueryable();
        if (employeeId is not null) q = q.Where(r => r.EmployeeId == employeeId);
        if (status is not null) q = q.Where(r => r.Status == status);
+        if (!string.IsNullOrWhiteSpace(query.Q))
+        {
+            var term = query.Q.Trim();
+            q = q.Where(r => EF.Functions.ILike(r.DocNo, $"%{term}%") || EF.Functions.ILike(r.Employee!.FullName, $"%{term}%"));
+        }

        var total = await q.CountAsync(ct);
        var rows = await q.OrderByDescending(r => r.CreatedAt)
@@ -113,6 +113,22 @@ public sealed class LeaveTypeService : ILeaveTypeService
        await _uow.SaveChangesAsync(ct);
    }

+    public async Task DeleteAsync(int leaveTypeId, CancellationToken ct = default)
+    {
+        var type = await _types.GetByIdAsync(leaveTypeId, ct)
+            ?? throw new NotFoundException($"Leave type {leaveTypeId} was not found.");
+
+        _types.Remove(type);
+        try
+        {
+            await _uow.SaveChangesAsync(ct);
+        }
+        catch (DbUpdateException)
+        {
+            throw new DomainException(ErrorCodes.MasterInUse, "This leave type is referenced by other records and cannot be deleted.", 409);
+        }
+    }
+
    private static LeaveTypeDto Map(LeaveType t) => new(
        t.LeaveTypeId, t.Code, t.Name, t.IsPaid, t.CountsAsNoPay, t.AccrualPerYear,
        t.CarryForwardAllowed, t.MaxCarryForwardDays, t.RequiresApproval, t.Status, t.CreatedAt, t.UpdatedAt);
@@ -107,6 +107,22 @@ public sealed class SalaryComponentService : ISalaryComponentService
        await _uow.SaveChangesAsync(ct);
    }

+    public async Task DeleteAsync(int salaryComponentId, CancellationToken ct = default)
+    {
+        var component = await _components.GetByIdAsync(salaryComponentId, ct)
+            ?? throw new NotFoundException($"Salary component {salaryComponentId} was not found.");
+
+        _components.Remove(component);
+        try
+        {
+            await _uow.SaveChangesAsync(ct);
+        }
+        catch (DbUpdateException)
+        {
+            throw new DomainException(ErrorCodes.MasterInUse, "This salary component is referenced by other records and cannot be deleted.", 409);
+        }
+    }
+
    private static SalaryComponentDto Map(SalaryComponent c) => new(
        c.SalaryComponentId, c.Code, c.Name, c.ComponentType, c.IsTaxable, c.IsEpfEtfApplicable, c.Status, c.CreatedAt, c.UpdatedAt);
 }
@@ -120,6 +120,22 @@ public sealed class WorkShiftService : IWorkShiftService
        await _uow.SaveChangesAsync(ct);
    }

+    public async Task DeleteAsync(int workShiftId, CancellationToken ct = default)
+    {
+        var shift = await _shifts.GetByIdAsync(workShiftId, ct)
+            ?? throw new NotFoundException($"Work shift {workShiftId} was not found.");
+
+        _shifts.Remove(shift);
+        try
+        {
+            await _uow.SaveChangesAsync(ct);
+        }
+        catch (DbUpdateException)
+        {
+            throw new DomainException(ErrorCodes.MasterInUse, "This work shift is referenced by other records and cannot be deleted.", 409);
+        }
+    }
+
    private static WorkShiftDto Map(WorkShift w) => new(
        w.WorkShiftId, w.Code, w.Name, w.StartTime, w.EndTime, w.IsOvernight,
        w.GraceMinutes, w.BreakMinutes, w.StandardWorkingMinutes, w.OtMultiplier, w.WorkingDaysMask,
@@ -5,7 +5,10 @@ namespace ERPCore.Services.Interfaces;

 /// <summary>
 /// Read access to the audit trail and GL-ready journal stubs (auditor role,
-/// 02-SECURITY B.2.3). Both are append-only; no write API.
+/// 02-SECURITY B.2.3). Both are append-only — entity mutations are captured
+/// automatically by ErpDbContext.SaveChangesAsync and never written here directly.
+/// The one deliberate exception is <see cref="RecordLoginAsync"/>: a successful
+/// sign-in changes no entity, so nothing would otherwise appear in the trail for it.
 /// </summary>
 public interface IAuditService
 {
@@ -14,4 +17,12 @@ public interface IAuditService

    Task<PagedResponse<JournalEntryStubDto>> ListJournalAsync(
        string? sourceDocType, int? sourceDocId, PageQuery query, CancellationToken ct = default);
+
+    /// <summary>Writes a Login audit row and a login-device history entry for the local User backing this
+    /// AuthHex identity, if one exists yet.</summary>
+    Task RecordLoginAsync(Guid authUserId, string? ipAddress, string? userAgent, CancellationToken ct = default);
+
+    /// <summary>Past logins for a user — a history ERPCore captures itself, not a live "currently active
+    /// sessions" view (AuthHex has no admin-scoped call to inspect another user's sessions).</summary>
+    Task<PagedResponse<LoginActivityDto>> ListLoginDevicesAsync(int userId, PageQuery query, CancellationToken ct = default);
 }
@@ -13,4 +13,5 @@ public interface IBranchService
    Task<ETagged<BranchDto>> CreateAsync(CreateBranchRequest request, CancellationToken ct = default);
    Task<ETagged<BranchDto>> UpdateAsync(int branchId, UpdateBranchRequest request, uint expectedRowVersion, CancellationToken ct = default);
    Task SetStatusAsync(int branchId, EntityStatus status, CancellationToken ct = default);
+    Task DeleteAsync(int branchId, CancellationToken ct = default);
 }
@@ -13,4 +13,5 @@ public interface IDepartmentService
    Task<ETagged<DepartmentDto>> CreateAsync(CreateDepartmentRequest request, CancellationToken ct = default);
    Task<ETagged<DepartmentDto>> UpdateAsync(int departmentId, UpdateDepartmentRequest request, uint expectedRowVersion, CancellationToken ct = default);
    Task SetStatusAsync(int departmentId, EntityStatus status, CancellationToken ct = default);
+    Task DeleteAsync(int departmentId, CancellationToken ct = default);
 }
@@ -12,4 +12,5 @@ public interface IDesignationService
    Task<ETagged<DesignationDto>> CreateAsync(CreateDesignationRequest request, CancellationToken ct = default);
    Task<ETagged<DesignationDto>> UpdateAsync(int designationId, UpdateDesignationRequest request, uint expectedRowVersion, CancellationToken ct = default);
    Task SetStatusAsync(int designationId, EntityStatus status, CancellationToken ct = default);
+    Task DeleteAsync(int designationId, CancellationToken ct = default);
 }
@@ -15,6 +15,14 @@ public interface IEmployeeService
    Task<ETagged<EmployeeDetailDto>> UpdateAsync(int employeeId, UpdateEmployeeRequest request, uint expectedRowVersion, int actorUserId, CancellationToken ct = default);
    Task SetStatusAsync(int employeeId, EmployeeStatus status, CancellationToken ct = default);

+    /// <summary>
+    /// Permanently deletes the employee and every dependent record (bank details, documents
+    /// incl. their stored files, salary structure history, loans, leave balances). Blocked with
+    /// 409 if the employee has any payroll history, since that's financial/audit record that
+    /// must never be destroyed.
+    /// </summary>
+    Task DeleteAsync(int employeeId, CancellationToken ct = default);
+
    Task<List<EmployeeBankDetailDto>> ListBankDetailsAsync(int employeeId, CancellationToken ct = default);
    Task<List<EmployeeBankDetailDto>> ReplaceBankDetailsAsync(int employeeId, ReplaceEmployeeBankDetailsRequest request, CancellationToken ct = default);
 }
@@ -12,4 +12,5 @@ public interface IEmploymentTypeService
    Task<ETagged<EmploymentTypeDto>> CreateAsync(CreateEmploymentTypeRequest request, CancellationToken ct = default);
    Task<ETagged<EmploymentTypeDto>> UpdateAsync(int employmentTypeId, UpdateEmploymentTypeRequest request, uint expectedRowVersion, CancellationToken ct = default);
    Task SetStatusAsync(int employmentTypeId, EntityStatus status, CancellationToken ct = default);
+    Task DeleteAsync(int employmentTypeId, CancellationToken ct = default);
 }
@@ -13,4 +13,5 @@ public interface IHrDocumentTypeService
    Task<ETagged<HrDocumentTypeDto>> CreateAsync(CreateHrDocumentTypeRequest request, CancellationToken ct = default);
    Task<ETagged<HrDocumentTypeDto>> UpdateAsync(int hrDocumentTypeId, UpdateHrDocumentTypeRequest request, uint expectedRowVersion, CancellationToken ct = default);
    Task SetStatusAsync(int hrDocumentTypeId, EntityStatus status, CancellationToken ct = default);
+    Task DeleteAsync(int hrDocumentTypeId, CancellationToken ct = default);
 }
@@ -12,4 +12,5 @@ public interface ILeaveTypeService
    Task<ETagged<LeaveTypeDto>> CreateAsync(CreateLeaveTypeRequest request, CancellationToken ct = default);
    Task<ETagged<LeaveTypeDto>> UpdateAsync(int leaveTypeId, UpdateLeaveTypeRequest request, uint expectedRowVersion, CancellationToken ct = default);
    Task SetStatusAsync(int leaveTypeId, EntityStatus status, CancellationToken ct = default);
+    Task DeleteAsync(int leaveTypeId, CancellationToken ct = default);
 }
@@ -12,4 +12,5 @@ public interface ISalaryComponentService
    Task<ETagged<SalaryComponentDto>> CreateAsync(CreateSalaryComponentRequest request, CancellationToken ct = default);
    Task<ETagged<SalaryComponentDto>> UpdateAsync(int salaryComponentId, UpdateSalaryComponentRequest request, uint expectedRowVersion, CancellationToken ct = default);
    Task SetStatusAsync(int salaryComponentId, EntityStatus status, CancellationToken ct = default);
+    Task DeleteAsync(int salaryComponentId, CancellationToken ct = default);
 }
@@ -1,3 +1,4 @@
+using ERPCore.Domain.Enums;
 using ERPCore.Dtos.Common;
 using ERPCore.Dtos.Users;

@@ -10,11 +11,21 @@ namespace ERPCore.Services.Interfaces;
 /// </summary>
 public interface IUserManagementService
 {
-    Task<PagedResponse<ManagedUserDto>> ListAsync(PageQuery query, CancellationToken ct = default);
+    Task<PagedResponse<ManagedUserDto>> ListAsync(PageQuery query, EntityStatus? status, string? roleCode, CancellationToken ct = default);
    Task<ManagedUserDto?> GetAsync(int userId, CancellationToken ct = default);
    Task<ManagedUserDto> CreateAsync(CreateUserRequest request, int actorUserId, CancellationToken ct = default);
    Task<ManagedUserDto> UpdateRoleAsync(int userId, UpdateUserRoleRequest request, CancellationToken ct = default);

+    /// <summary>
+    /// Flips the local shadow row's status (Active/Inactive) — this is what
+    /// BranchAccessService and the rest of ERPCore gate on. AuthHex has no
+    /// admin-scoped "deactivate someone else's account" call (its ChangeUserStatus
+    /// is self-service, acting on whoever's bearer token is passed), so the
+    /// credential itself stays live upstream; this only revokes the account's
+    /// standing inside ERPCore.
+    /// </summary>
+    Task<ManagedUserDto> SetStatusAsync(int userId, EntityStatus status, CancellationToken ct = default);
+
    /// <summary>AuthHex UserType options for the create-user form's select.</summary>
    Task<List<UserTypeOptionDto>> ListUserTypesAsync(CancellationToken ct = default);
 }
@@ -6,7 +6,7 @@ namespace ERPCore.Services.Interfaces;
 /// <summary>Warehouse &amp; bin master business logic (docs/11-BACKEND-PHASE1.md §2.5).</summary>
 public interface IWarehouseService
 {
-    Task<PagedResponse<WarehouseDto>> ListAsync(PageQuery query, CancellationToken ct = default);
+    Task<PagedResponse<WarehouseDto>> ListAsync(PageQuery query, int? branchId, CancellationToken ct = default);
    Task<WarehouseDto?> GetAsync(int warehouseId, CancellationToken ct = default);
    Task<WarehouseDto> CreateAsync(CreateWarehouseRequest request, CancellationToken ct = default);

@@ -12,4 +12,5 @@ public interface IWorkShiftService
    Task<ETagged<WorkShiftDto>> CreateAsync(CreateWorkShiftRequest request, CancellationToken ct = default);
    Task<ETagged<WorkShiftDto>> UpdateAsync(int workShiftId, UpdateWorkShiftRequest request, uint expectedRowVersion, CancellationToken ct = default);
    Task SetStatusAsync(int workShiftId, EntityStatus status, CancellationToken ct = default);
+    Task DeleteAsync(int workShiftId, CancellationToken ct = default);
 }
@@ -18,27 +18,25 @@ public sealed class UserManagementService : IUserManagementService
    private readonly IRepository<User> _users;
    private readonly IRepository<Role> _roles;
    private readonly IRepository<Employee> _employees;
-    private readonly IAuthUserService _authUsers;
    private readonly IAuthHexClient _authHex;
    private readonly IEmployeeUserLinkService _links;
    private readonly IEmployeeService _employeeService;
    private readonly IUnitOfWork _uow;

    public UserManagementService(
-        IRepository<User> users, IRepository<Role> roles, IRepository<Employee> employees, IAuthUserService authUsers,
+        IRepository<User> users, IRepository<Role> roles, IRepository<Employee> employees,
        IAuthHexClient authHex, IEmployeeUserLinkService links, IEmployeeService employeeService, IUnitOfWork uow)
    {
        _users = users;
        _roles = roles;
        _employees = employees;
-        _authUsers = authUsers;
        _authHex = authHex;
        _links = links;
        _employeeService = employeeService;
        _uow = uow;
    }

-    public async Task<PagedResponse<ManagedUserDto>> ListAsync(PageQuery query, CancellationToken ct = default)
+    public async Task<PagedResponse<ManagedUserDto>> ListAsync(PageQuery query, EntityStatus? status, string? roleCode, CancellationToken ct = default)
    {
        IQueryable<User> q = _users.Query().AsNoTracking().Include(u => u.Role);
        if (!string.IsNullOrWhiteSpace(query.Q))
@@ -46,6 +44,8 @@ public sealed class UserManagementService : IUserManagementService
            var term = query.Q.Trim();
            q = q.Where(u => EF.Functions.ILike(u.Username, $"%{term}%") || EF.Functions.ILike(u.DisplayName, $"%{term}%"));
        }
+        if (status is not null) q = q.Where(u => u.Status == status);
+        if (!string.IsNullOrWhiteSpace(roleCode)) q = q.Where(u => u.Role != null && EF.Functions.ILike(u.Role.Code, roleCode));

        var total = await q.CountAsync(ct);
        var rows = await q.OrderBy(u => u.Username)
@@ -93,8 +93,13 @@ public sealed class UserManagementService : IUserManagementService
        var authUserId = Guid.NewGuid();

        // Source of truth: AuthHex creates the credential + emails it (registerUser,
-        // ERP_Auth_Service/Services/UserManager/UserManagerService.cs).
-        await _authUsers.RegisterAsync(new RegisterRequest
+        // ERP_Auth_Service/Services/UserManager/UserManagerService.cs). Calls the raw
+        // AuthHex client directly rather than IAuthUserService.RegisterAsync — that
+        // wrapper is shaped for self-registration (AuthController.Register) and demands
+        // a session (access/refresh tokens) in the response, which makes no sense here:
+        // an admin creating an account for someone else never logs in as them, so
+        // AuthHex's registerUser response for this case carries no tokens to demand.
+        await _authHex.RegisterAsync(new RegisterRequest
        {
            UserId = authUserId,
            RoleId = role.AuthRoleId,
@@ -167,6 +172,17 @@ public sealed class UserManagementService : IUserManagementService
        return Map(user);
    }

+    public async Task<ManagedUserDto> SetStatusAsync(int userId, EntityStatus status, CancellationToken ct = default)
+    {
+        var user = await _users.Query().Include(u => u.Role).FirstOrDefaultAsync(u => u.UserId == userId, ct)
+            ?? throw new NotFoundException($"User {userId} was not found.");
+
+        user.Status = status;
+        await _uow.SaveChangesAsync(ct);
+
+        return Map(user);
+    }
+
    public async Task<List<UserTypeOptionDto>> ListUserTypesAsync(CancellationToken ct = default)
    {
        var userTypes = await _authHex.ListUserTypesAsync(ct);
@@ -28,7 +28,7 @@ public sealed class WarehouseService : IWarehouseService
        _uow = uow;
    }

-    public async Task<PagedResponse<WarehouseDto>> ListAsync(PageQuery query, CancellationToken ct = default)
+    public async Task<PagedResponse<WarehouseDto>> ListAsync(PageQuery query, int? branchId, CancellationToken ct = default)
    {
        IQueryable<Warehouse> q = _warehouses.Query().AsNoTracking().Include(w => w.Branch);
        if (!string.IsNullOrWhiteSpace(query.Q))
@@ -36,6 +36,7 @@ public sealed class WarehouseService : IWarehouseService
            var term = query.Q.Trim();
            q = q.Where(w => EF.Functions.ILike(w.Code, $"%{term}%") || EF.Functions.ILike(w.Name, $"%{term}%"));
        }
+        if (branchId is not null) q = q.Where(w => w.BranchId == branchId);

        var total = await q.CountAsync(ct);
        var rows = await q.OrderBy(w => w.Code)
@@ -47,6 +47,7 @@ public static class ErrorCodes
    public const string SalaryStructureOverlap = "SALARY_STRUCTURE_OVERLAP";
    public const string TaxSlabGapInvalid = "TAX_SLAB_GAP_INVALID";
    public const string PayrollPeriodLocked = "PAYROLL_PERIOD_LOCKED";
+    public const string EmployeeHasPayrollHistory = "EMPLOYEE_HAS_PAYROLL_HISTORY";

    // Manufacturing / Production Lines (docs/30-BACKEND-PHASE2.md §D.4)
    public const string TemplateInUse = "TEMPLATE_IN_USE";
@@ -1,14 +0,0 @@
-{
-  "Logging": {
-    "LogLevel": {
-      "Default": "Information",
-      "Microsoft.AspNetCore": "Warning"
-    }
-  },
-  "ConnectionStrings": {
-    "DefaultConnection": "Host=127.0.0.1;Port=5433;Database=ERPCoreTest;Username=postgres;Password=post@hexdive"
-  },
-  "AuthHex": {
-    "BaseUrl": "http://localhost:5011"
-  }
-}
@@ -0,0 +1,21 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "ConnectionStrings": {
+    "DefaultConnection": "Host=127.0.0.1;Port=5432;Database=ERPCore;Username=postgres;Password=CHANGE_ME"
+  },
+  "AuthHex": {
+    "BaseUrl": "http://localhost:5011"
+  },
+  "GeneralLedgerService": {
+    "BaseUrl": "https://localhost:7024/api/v1/",
+    "ApiKey": "ask-the-team-for-the-dev-key"
+  },
+  "Seed": {
+    "DemoData": true
+  }
+}
@@ -1,11 +0,0 @@
-{
-  "ConnectionStrings": {
-    "DefaultConnection": ""
-  },
-  "Jwt": {
-    "SigningKey": ""
-  },
-  "AuthHex": {
-    "BaseUrl": ""
-  }
-}
@@ -6,7 +6,7 @@
    }
  },
  "ConnectionStrings": {
-    "DefaultConnection": "Host=localhost;Port=5432;Database=ERPCore;Username=root;Password=root"
+    "DefaultConnection": ""
  },
  "Auth": {
    "Issuer": "AuthHex",
@@ -16,15 +16,18 @@
    "RequiredRoleCode": ""
  },
  "AuthHex": {
-    "BaseUrl": "http://localhost:5602"
+    "BaseUrl": ""
  },
  "FileStorage": {
    "RootPath": "App_Data/hr-documents",
    "MaxSizeBytes": 10485760
  },
+  "LogFile": {
+    "Path": "logs/erpcore-.log"
+  },
  "GeneralLedgerService": {
-    "BaseUrl": "https://localhost:7024/api/v1/",
-    "ApiKey": "1A5FE0E389C029B1FBCD2A94650CEBF0656083BF06FF48E5E11987040ABA262D"
+    "BaseUrl": "",
+    "ApiKey": ""
  },
  "Grn": {
    "GlInventoryAccountCode": "1100",
@@ -4,6 +4,34 @@ Legend: `[ ]` not started · `[~]` in progress · `[x]` done
 Spec: `docs/10-BACKEND-PHASE1.md` (model + rules) · `docs/11-BACKEND-PHASE1.md` (API)
 Convention: `docs/01-DOC-GUIDE.md §6`. Update this file in the **same commit** as the code. When ticking `[x]`, append a short note + any deviation.

+## Deployment readiness + CI/CD (2026-09-14) — `docs/40-DEPLOYMENT.md`
+
+- [x] **Secrets out of git.** `appsettings.Development.json` untracked (template: `appsettings.Development.json.example`); `appsettings.Production.json` deleted (its `Jwt:SigningKey` was unused); base `appsettings.json` now blanks the connection string, `AuthHex:BaseUrl` and `GeneralLedgerService:BaseUrl/ApiKey`; `Backend/smoke/smoke_common.py` has no default password (`ERP_SMOKE_PASSWORD`). Values committed earlier still need rotating (`docs/02-SECURITY.md` AR-06).
+- [x] **Fail-fast config check** (`Program.cs`): outside Development, startup throws one `InvalidOperationException` naming every blank required key. Verified: `ASPNETCORE_ENVIRONMENT=Production` with no env vars → lists the four blank keys and exits. In Development (where that check is skipped) the `AuthHex`/`GeneralLedgerService` HTTP-client registrations now treat a **blank** `BaseUrl` as missing — they only caught null, so the newly blank base values would have surfaced as an unnamed `UriFormatException` — and `GeneralLedgerClient` returns `GL_SERVICE_UNAVAILABLE` naming `GeneralLedgerService:ApiKey` instead of forwarding GL's 401 for an empty `X-Api-Key`.
+- [x] **`LogFile:Path`** drives the Serilog file sink (default unchanged); **Swagger** is now off only in Production (test/Staging keeps it; Apache does not proxy it); **`UseForwardedHeaders`** for X-Forwarded-For/Proto from the co-located Apache.
+- [x] **Seeder split** — `DataSeeder.SeedAsync(db, includeDemoData)`: reference data (reason codes, item types, product/branch/notification config, sales document counters) always; demo data (MAIN/SHOP warehouses, PCS/BOX UOMs, General Goods, items, stock layers, customers, bundles, sample docs) only with `Seed:DemoData` — default on in Development, `Seed__DemoData=true` on test, never on release. **Deviation from the plan:** no `Seed` key in base `appsettings.json`, because it would override the Development default.
+- [x] **`ERPCore.Tests` added to `ERPCore.sln`.** It was outside the solution and had **stopped compiling** (`TestCurrentUser` lacked `ICurrentUser.RoleCode`/`IsAdmin`, added in `f664961`) — fixed, so CI can run it.
+- [x] `dotnet ef migrations has-pending-model-changes` verified with a blank connection string (what CI has) → "No changes have been made to the model since the last migration."
+- Pipeline assets: `.gitea/workflows/{ci,deploy}.yml`, `deploy/scripts/*.sh`, `deploy/{systemd,apache,env}/`. `detect.sh` exercised locally against a scratch state dir (first deploy / no-op / frontend-only / forced backend / rollback / non-deployable branch — all as designed); `migration-scan.sh`'s awk ignores `Down()` and flags real `Up()` drops (e.g. `20260831060800_AddPurchaseInvoices`); shellcheck clean at `--severity=warning`. **Not yet exercised:** anything needing Docker or the VPS (container builds, systemd, Apache, the Gitea runner).
+- [x] **2026-09-15 — switched to a production-only, Fitness-style deployment** (only `erp.hexdive.com` exists; `docs/40-DEPLOYMENT.md` "Active").
+  - A PR merged into `production` runs one job:
+    - detect which side changed (tree hashes, `base.sha` vs merge commit);
+    - host `dotnet publish`;
+    - `pg_dump` when migrations changed (30-day retention);
+    - guard that uploads and logs are outside the publish folder;
+    - stop `erpcore.service`, wipe and copy `/home/erp/core/publish`, `chown erp`, start;
+    - `deploy/scripts/wait-healthy.sh`, which fails fast on a crash and allows up to 300 s for migrations.
+  - No auto-rollback.
+  - The two-environment pipeline, test Apache vhost, `erpcore@.service` and the hash/release/E2E/prune scripts moved to `deploy/on-hold/` (README explains restoring); the `test` branch in `common.sh` is commented out.
+  - Verified locally: both workflows are valid YAML; shellcheck is clean on the active scripts and on every inline `run:` block; the detect step gives the right flags on real merges (`8835ba9` frontend-only, `ee9fa40` backend+migrations, `8555702` neither, `eb36e0a` both), on a manual run and when the base commit is unavailable (both sides); the guard step rejects paths inside the publish folder (including the folder itself and the log path) and accepts `..`-escapes, sibling prefixes and quoted values.
+  - **Not exercised:** the real Gitea run, `erpcore.service` under `/home` (SELinux), `pg_dump` via `runuser`.
+- [x] **2026-09-15 — `ci.yml` + `deploy.yml` merged into one `.gitea/workflows/ci-cd.yml`.**
+  - Check jobs run on PR open / update / reopen into `Dev` or `production`; `Build & Deploy` runs only when a PR is merged into `production` (the job checks `pull_request.base.ref` itself, so a merge into `Dev` deploys nothing) or on a manual run.
+  - One concurrency group for the file, never cancelled: a PR push can't interrupt a deploy, but superseded check runs now queue.
+  - The deploy's env vars moved from workflow level to the deploy job, so they don't leak into the check jobs.
+  - Verified locally: valid YAML, and every job `if` evaluated against six event shapes (PR opened into Dev, updated into production, merged into Dev, merged into production, closed unmerged, manual run) gives the intended jobs.
+  - Once branch protection is set up, the required check appears as `CI/CD - ERP Core / ci-ok`.
+
 ## Per-variant content size (2026-08-11) — follow-up to the UOM re-model below

 The UOM re-model put `ContentQty`/`ContentUnit` on `Item` correctly, but the item **create page
@@ -38,7 +38,8 @@ DEFAULTS = {
    "api": "http://localhost:5224/api/v1",
    "auth": "http://localhost:5602",
    "user": "admin@gmail.com",
-    "password": "Naveen@99",
+    # Deliberately no default: credentials never live in the repo (docs/40-DEPLOYMENT.md §5).
+    "password": None,
 }


@@ -46,7 +47,10 @@ def parse_args(description: str) -> argparse.Namespace:
    p = argparse.ArgumentParser(description=description)
    for key, default in DEFAULTS.items():
        p.add_argument(f"--{key}", default=os.environ.get(f"ERP_SMOKE_{key.upper()}", default))
-    return p.parse_args()
+    args = p.parse_args()
+    if not args.password:
+        p.error("no password given: set ERP_SMOKE_PASSWORD or pass --password")
+    return args


 class Response:
@@ -345,3 +345,10 @@ Spec: `docs/21-FRONTEND-PHASE2.md` (flows/screens) · contract: `docs/30-BACKEND
  5. **Inline "add variant category":** a "+" icon button next to the checkboxes opens an inline name field that calls `variantCategoriesApi.create()` directly from `/new`, appends the result to the in-memory list, and auto-checks it — so a brand-new dimension (e.g. "Material") can be added without leaving the Item form, and it also then appears on `/dashboard/products/variants`.
  6. **Color gets a real color picker:** for whichever checked category is literally named "Color" (case-insensitive), the free-text input is replaced with a native `<input type="color">` swatch picker *plus* a required "Color name" text field — picking red alone isn't enough, a name is mandatory too. The pair is encoded as a single string `"<name>|<hex>"` in `valuesByCategory` (helpers `encodeColorValue`/`decodeColorValue`/`partLabel` in `new/page.tsx`) so the existing generic value-list plumbing didn't need a parallel data shape; every place that displays or SKU-generates from a color value decodes it back to just the name (the hex only ever drives the swatch dot next to chips and table cells) — so SKUs read `HAR-CRI` (from "Crimson"), never `HAR-EF4`.
 - Verified: `tsc --noEmit` clean after every step (same pre-existing `login/page.tsx` error only, confirmed unchanged throughout). Each change was driven end-to-end through a headless Playwright session against the dev server and screenshotted — field removal, subcategory always-visible + disabled state, checkbox show/hide of category builders, cartesian flat table with 2+ active categories, inline category creation followed by its builder appearing immediately, and the color picker + name → chip swatch → table swatch → final SKU/item name chain — with `console --errors` clean at every step and at least one full create-and-redirect-to-Items-list confirmed per major change.
+
+## Deployment readiness (2026-09-14) — `docs/40-DEPLOYMENT.md`
+- [x] **Standalone build + runtime image.** `next.config.ts` → `output: "standalone"`; runtime-only `Dockerfile` (`node:24-alpine`, non-root, copies `.next/standalone` + `.next/static` + `public`) and `.dockerignore` (keeps `.next`). The `/api` rewrite is resolved at build time and only matters locally — Apache sends `/api/` straight to ERPCore in deployed environments, so one image serves both test and release. **Deviation from the plan:** Node 24 instead of 20 (Node 20 is past end-of-life). Verified: `npm run build` produced `.next/standalone/server.js`; started on :3999 → `GET /login` 200, `GET /dashboard` without a session cookie → 307 to `/login`.
+- [x] **Lint can gate CI.** `react-hooks/set-state-in-effect` temporarily `"warn"` (React Compiler rule from eslint-config-next 16, ~80 existing hits). Fixed the other 12 errors: 7 unescaped apostrophes (`sales/day-end`, `settings/invoice-template`, `login/forgot`, `login/forgot/otp`, `login/forgot/reset`); `PasswordRequirement` hoisted to module scope in `login/forgot/reset` (a component created during render remounts on every keystroke); the `visibleGrns` memo moved above `toggleAll` in `procurement/purchase-invoices/new` (it was read before its declaration, so the compiler could not preserve the memo). Now `eslint .` → 0 errors / 114 warnings; `tsc --noEmit` clean.
+- [ ] Clear the `set-state-in-effect` backlog, then set the rule back to `"error"`.
+- [x] **2026-09-15 — production-only deploy (`docs/40-DEPLOYMENT.md` "Active").** Supersedes the runtime-only image above: `Dockerfile` is now multi-stage (deps → builder → runner on `node:24-alpine`, the Client_New_Fe pattern), so `next build` runs inside `docker build` on the server, and `.dockerignore` excludes `.next` and `node_modules`. Still `output: "standalone"` and no build args. The deploy job replaces the `erp-web` container on `127.0.0.1:3020` only when `Frontend/erp-system` changed and fails the job if `/login` doesn't answer within 30 s. PR checks now run `tsc` + `eslint` + `next build` in a capped container without producing an image. The multi-stage `docker build` has not been run yet (no Docker locally).
+- [x] **2026-09-15 — one workflow file.** `.gitea/workflows/ci.yml` and `deploy.yml` merged into `.gitea/workflows/ci-cd.yml`: the frontend PR check (`tsc` + `eslint` + `next build`) runs while a PR is open, and the `Build & Deploy` job (`docker build` → replace `erp-web` → `/login` check) runs only when a PR is merged into `production` or on a manual run. No change to the Dockerfile or the app.
@@ -0,0 +1,10 @@
+# `next build` runs inside the image (see Dockerfile), so local build output and dependencies must
+# not be sent as build context: they are large, and a Windows node_modules would break the Linux build.
+node_modules
+.next
+.git
+.env*
+*.tsbuildinfo
+npm-debug.log*
+Dockerfile
+.dockerignore
@@ -0,0 +1,38 @@
+# ERP frontend image — built on the server by .gitea/workflows/ci-cd.yml (`docker build`), using the
+# same pattern as Client_New_Fe. There are no build args: the app only calls same-origin /api/v1 and
+# Apache routes /api/ straight to ERPCore (docs/40-DEPLOYMENT.md, "Active").
+
+FROM node:24-alpine AS deps
+WORKDIR /app
+RUN apk add --no-cache libc6-compat
+COPY package.json package-lock.json ./
+RUN npm ci --no-audit --no-fund
+
+FROM node:24-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+# Shared 8 GB VPS: keep the build's heap bounded (docker build has no --memory under BuildKit).
+ENV NEXT_TELEMETRY_DISABLED=1 \
+    NODE_ENV=production \
+    NODE_OPTIONS=--max-old-space-size=2048
+RUN npm run build
+
+FROM node:24-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production \
+    NEXT_TELEMETRY_DISABLED=1 \
+    PORT=3000 \
+    HOSTNAME=0.0.0.0
+
+RUN addgroup --system --gid 1001 nodejs \
+ && adduser --system --uid 1001 nextjs
+
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+EXPOSE 3000
+
+CMD ["node", "server.js"]
@@ -1,8 +1,8 @@
 "use client"

 import { useEffect, useState } from "react"
-import { useParams } from "next/navigation"
-import { Link2, Plus, Upload } from "lucide-react"
+import { useParams, useSearchParams } from "next/navigation"
+import { Briefcase, Download, Link2, Plus, ShieldCheck, Upload, User, X } from "lucide-react"

 import { CreateEmployeeLoanRequest, CreateSalaryStructureRequest, employeesApi } from "@/lib/api/employees"
 import { branchesHrmApi, departmentsApi, designationsApi, employmentTypesApi, hrDocumentTypesApi, salaryComponentsApi, workShiftsApi } from "@/lib/api/hrm-masters"
@@ -25,13 +25,14 @@ import {
 } from "@/types/hrm"

 import { useAuth } from "@/components/auth/AuthProvider"
-import { Button } from "@/components/ui/button"
+import { Button, buttonVariants } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Skeleton } from "@/components/ui/skeleton"
+import { Switch } from "@/components/ui/switch"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { toast } from "@/components/ui/toast"

@@ -44,6 +45,7 @@ function money(n: number): string {

 export default function EmployeeDetailPage() {
  const params = useParams<{ id: string }>()
+  const searchParams = useSearchParams()
  const employeeId = Number(params.id)
  const { isAdmin, branchId: myBranchId, branchingEnabled } = useAuth()

@@ -51,6 +53,7 @@ export default function EmployeeDetailPage() {
  const [employee, setEmployee] = useState<EmployeeDetail | null>(null)
  const [etag, setEtag] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
+  const [isEditing, setIsEditing] = useState(searchParams.get("edit") === "1")

  const [departments, setDepartments] = useState<Department[]>([])
  const [designations, setDesignations] = useState<Designation[]>([])
@@ -58,8 +61,11 @@ export default function EmployeeDetailPage() {
  const [workShifts, setWorkShifts] = useState<WorkShift[]>([])
  const [branches, setBranches] = useState<Branch[]>([])
  const [saving, setSaving] = useState(false)
+  const [statusPending, setStatusPending] = useState(false)

  const [bankDetails, setBankDetails] = useState<EmployeeBankDetail[]>([])
+  const [bankDraft, setBankDraft] = useState<EmployeeBankDetail[]>([])
+  const [savingBank, setSavingBank] = useState(false)
  const [documents, setDocuments] = useState<EmployeeDocument[]>([])
  const [documentTypes, setDocumentTypes] = useState<HrDocumentType[]>([])
  const [uploadTypeId, setUploadTypeId] = useState<string>("")
@@ -100,7 +106,11 @@ export default function EmployeeDetailPage() {
  }, [branchingEnabled])

  useEffect(() => {
-    if (tab === "Bank Details") employeesApi.listBankDetails(employeeId).then(setBankDetails).catch((err) => toast.error("Could not load bank details", errorMessage(err)))
+    if (tab === "Bank Details") {
+      employeesApi.listBankDetails(employeeId)
+        .then((items) => { setBankDetails(items); setBankDraft(items.map((b) => ({ ...b }))) })
+        .catch((err) => toast.error("Could not load bank details", errorMessage(err)))
+    }
    if (tab === "Documents") employeesApi.listDocuments(employeeId).then(setDocuments).catch((err) => toast.error("Could not load documents", errorMessage(err)))
    if (tab === "Salary & Loans") {
      employeesApi.salaryStructureHistory(employeeId).then(setSalaryStructures).catch((err) => toast.error("Could not load salary history", errorMessage(err)))
@@ -109,6 +119,15 @@ export default function EmployeeDetailPage() {
    }
  }, [tab, employeeId])

+  // The active structure has no `effectiveTo`; fall back to the most recent one if none is marked Active yet.
+  const currentStructure = salaryStructures.find((s) => s.status === "Active") ?? salaryStructures[0]
+  const componentTypeById = new Map(salaryComponents.map((c) => [c.salaryComponentId, c.componentType]))
+  const structureLinesTyped = currentStructure?.lines ?? []
+  const earningLines = structureLinesTyped.filter((l) => componentTypeById.get(l.salaryComponentId) !== "Deduction")
+  const deductionLines = structureLinesTyped.filter((l) => componentTypeById.get(l.salaryComponentId) === "Deduction")
+  const grossPay = (currentStructure?.basicSalary ?? 0) + earningLines.reduce((sum, l) => sum + l.amount, 0)
+  const netPay = grossPay - deductionLines.reduce((sum, l) => sum + l.amount, 0)
+
  function addStructureLine() {
    setStructureLines((prev) => [...prev, { salaryComponentId: "", amount: 0 }])
  }
@@ -190,6 +209,7 @@ export default function EmployeeDetailPage() {
      }, etag)
      setEmployee(res.data)
      setEtag(res.etag)
+      setIsEditing(false)
      toast.success("Employee updated")
    } catch (err) {
      toast.error("Could not save", errorMessage(err))
@@ -198,6 +218,62 @@ export default function EmployeeDetailPage() {
    }
  }

+  function handleCancelEdit() {
+    setIsEditing(false)
+    setBankDraft(bankDetails.map((b) => ({ ...b })))
+    load()
+  }
+
+  // "Inactive" here maps to Suspended — a reversible off-switch, distinct from the
+  // one-way separation statuses (Resigned/Terminated/Retired) which need their own flow.
+  async function handleToggleStatus() {
+    if (!employee) return
+    const nextStatus = employee.status === "Active" ? "Suspended" : "Active"
+    setStatusPending(true)
+    try {
+      await employeesApi.updateStatus(employeeId, nextStatus)
+      setEmployee({ ...employee, status: nextStatus })
+      toast.success(nextStatus === "Active" ? "Employee activated" : "Employee deactivated")
+    } catch (err) {
+      toast.error("Could not update status", errorMessage(err))
+    } finally {
+      setStatusPending(false)
+    }
+  }
+
+  const BLANK_BANK_DETAIL: EmployeeBankDetail = {
+    employeeBankDetailId: null, bankName: "", branchName: "", accountNumber: "", accountHolderName: "", swiftCode: null, isPrimary: true, status: "Active",
+  }
+
+  function updateBankRow(index: number, patch: Partial<EmployeeBankDetail>) {
+    setBankDraft((prev) => {
+      const base = prev[index] ?? BLANK_BANK_DETAIL
+      const next = [...prev]
+      next[index] = { ...base, ...patch }
+      return next
+    })
+  }
+
+  async function handleSaveBank() {
+    const b = bankDraft[0]
+    if (!b || !b.bankName.trim() || !b.branchName.trim() || !b.accountNumber.trim() || !b.accountHolderName.trim()) {
+      toast.error("Bank name, branch, account number, and account holder name are required")
+      return
+    }
+
+    setSavingBank(true)
+    try {
+      const saved = await employeesApi.replaceBankDetails(employeeId, bankDraft)
+      setBankDetails(saved)
+      setBankDraft(saved.map((b) => ({ ...b })))
+      toast.success("Bank details updated")
+    } catch (err) {
+      toast.error("Could not save bank details", errorMessage(err))
+    } finally {
+      setSavingBank(false)
+    }
+  }
+
  async function handleUpload(file: File) {
    if (!uploadTypeId) { toast.error("Select a document type first"); return }
    try {
@@ -214,27 +290,44 @@ export default function EmployeeDetailPage() {

  return (
    <div className="flex flex-col gap-6">
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex flex-col gap-3 rounded-2xl bg-card p-5 shadow-sm ring-1 ring-foreground/10 sm:flex-row sm:items-center sm:justify-between">
        <div>
-          <h1 className="text-2xl font-bold text-foreground">{employee.fullName}</h1>
-          <p className="text-base text-muted-foreground">
-            {employee.employeeCode}
+          <div className="flex items-center gap-2.5">
+            <h1 className="text-2xl font-bold text-foreground">{employee.fullName}</h1>
+            <Badge variant="outline" className={cn("h-6 px-2.5 text-xs", employee.status === "Active" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground")}>{employee.status}</Badge>
+          </div>
+          <p className="mt-1 flex flex-wrap items-center gap-x-2 text-sm text-muted-foreground">
+            <span className="font-mono">{employee.employeeCode}</span>
+            <span aria-hidden="true">·</span>
            {employee.userId ? (
-              <span className="ml-2 inline-flex items-center gap-1 text-primary"><Link2 className="size-3.5" />Linked to a system user</span>
+              <span className="inline-flex items-center gap-1 text-primary"><Link2 className="size-3.5" />Linked to a system user</span>
            ) : (
-              <span className="ml-2 text-muted-foreground">No system login</span>
+              <span>No system login</span>
            )}
          </p>
        </div>
-        <Badge variant="outline" className={cn("h-7 px-3 text-sm", employee.status === "Active" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground")}>{employee.status}</Badge>
+
+        {(employee.status === "Active" || employee.status === "Suspended") && (
+          <div className="flex items-center gap-2">
+            <span className={cn("text-sm font-medium", employee.status === "Active" ? "text-foreground" : "text-muted-foreground")}>
+              {employee.status === "Active" ? "Active" : "Inactive"}
+            </span>
+            <Switch
+              checked={employee.status === "Active"}
+              onCheckedChange={handleToggleStatus}
+              disabled={statusPending}
+              aria-label={employee.status === "Active" ? "Deactivate employee" : "Activate employee"}
+            />
+          </div>
+        )}
      </div>

-      <div className="flex gap-1 rounded-xl bg-muted p-1 w-fit">
+      <div className="flex w-full gap-1 overflow-x-auto rounded-xl bg-muted p-1">
        {TABS.map((t) => (
          <button
            key={t}
            onClick={() => setTab(t)}
-            className={cn("rounded-lg px-4 py-2 text-sm font-medium transition-colors", tab === t ? "bg-card shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground")}
+            className={cn("flex-1 shrink-0 rounded-lg px-4 py-2 text-sm font-medium transition-colors", tab === t ? "bg-card shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground")}
          >
            {t}
          </button>
@@ -242,132 +335,231 @@ export default function EmployeeDetailPage() {
      </div>

      {tab === "Overview" && (
-        <FieldGroup className="max-w-2xl">
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-            <Field><FieldLabel>Full name</FieldLabel><Input value={employee.fullName} onChange={(e) => setEmployee({ ...employee, fullName: e.target.value })} /></Field>
-            <Field><FieldLabel>Email</FieldLabel><Input type="email" value={employee.email ?? ""} onChange={(e) => setEmployee({ ...employee, email: e.target.value })} /></Field>
-            <Field><FieldLabel>NIC</FieldLabel><Input value={employee.nic ?? ""} onChange={(e) => setEmployee({ ...employee, nic: e.target.value })} /></Field>
-            <Field><FieldLabel>Personal mobile</FieldLabel><Input value={employee.personalMobile ?? ""} onChange={(e) => setEmployee({ ...employee, personalMobile: e.target.value })} /></Field>
-            <Field>
-              <FieldLabel>Department</FieldLabel>
-              <Select value={String(employee.departmentId)} onValueChange={(v) => setEmployee({ ...employee, departmentId: Number(v) })}>
-                <SelectTrigger><SelectValue /></SelectTrigger>
-                <SelectContent>{departments.map((d) => <SelectItem key={d.departmentId} value={String(d.departmentId)}>{d.name}</SelectItem>)}</SelectContent>
-              </Select>
-            </Field>
-            <Field>
-              <FieldLabel>Designation</FieldLabel>
-              <Select value={String(employee.designationId)} onValueChange={(v) => setEmployee({ ...employee, designationId: Number(v) })}>
-                <SelectTrigger><SelectValue /></SelectTrigger>
-                <SelectContent>{designations.map((d) => <SelectItem key={d.designationId} value={String(d.designationId)}>{d.name}</SelectItem>)}</SelectContent>
-              </Select>
-            </Field>
-            <Field>
-              <FieldLabel>Employment type</FieldLabel>
-              <Select value={String(employee.employmentTypeId)} onValueChange={(v) => setEmployee({ ...employee, employmentTypeId: Number(v) })}>
-                <SelectTrigger><SelectValue /></SelectTrigger>
-                <SelectContent>{employmentTypes.map((t) => <SelectItem key={t.employmentTypeId} value={String(t.employmentTypeId)}>{t.name}</SelectItem>)}</SelectContent>
-              </Select>
-            </Field>
-            <Field>
-              <FieldLabel>Work shift</FieldLabel>
-              <Select value={String(employee.workShiftId)} onValueChange={(v) => setEmployee({ ...employee, workShiftId: Number(v) })}>
-                <SelectTrigger><SelectValue /></SelectTrigger>
-                <SelectContent>{workShifts.map((w) => <SelectItem key={w.workShiftId} value={String(w.workShiftId)}>{w.name}</SelectItem>)}</SelectContent>
-              </Select>
-            </Field>
-            {branchingEnabled && (
-              <Field>
-                <FieldLabel>Branch</FieldLabel>
-                <Select value={String(employee.branchId)} onValueChange={(v) => setEmployee({ ...employee, branchId: Number(v) })}>
-                  <SelectTrigger disabled={!isAdmin}><SelectValue placeholder="Select" /></SelectTrigger>
-                  <SelectContent>{(isAdmin ? branches : branches.filter((b) => b.branchId === myBranchId || b.branchId === employee.branchId)).map((b) => <SelectItem key={b.branchId} value={String(b.branchId)}>{b.name}</SelectItem>)}</SelectContent>
-                </Select>
-              </Field>
-            )}
-            <Field><FieldLabel>EPF number</FieldLabel><Input value={employee.epfNumber ?? ""} onChange={(e) => setEmployee({ ...employee, epfNumber: e.target.value })} /></Field>
-            <Field><FieldLabel>ETF number</FieldLabel><Input value={employee.etfNumber ?? ""} onChange={(e) => setEmployee({ ...employee, etfNumber: e.target.value })} /></Field>
-          </div>
-          <div className="flex justify-end pt-2">
-            <Button onClick={handleSave} disabled={saving}>{saving ? "Saving…" : "Save changes"}</Button>
-          </div>
-        </FieldGroup>
+        <div className="flex flex-col gap-4">
+          <section className="rounded-2xl bg-card p-5 shadow-sm ring-1 ring-foreground/10 sm:p-6">
+            <div className="flex items-center gap-2.5 border-b border-border pb-4">
+              <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+                <User className="size-4.5 text-primary" />
+              </div>
+              <div>
+                <h2 className="text-base font-semibold text-foreground">Personal details</h2>
+                <p className="text-sm text-muted-foreground">Contact and identity information.</p>
+              </div>
+            </div>
+            <FieldGroup>
+              <div className="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                <Field><FieldLabel>Full name</FieldLabel><Input disabled={!isEditing} value={employee.fullName} onChange={(e) => setEmployee({ ...employee, fullName: e.target.value })} /></Field>
+                <Field><FieldLabel>NIC</FieldLabel><Input disabled={!isEditing} value={employee.nic ?? ""} onChange={(e) => setEmployee({ ...employee, nic: e.target.value })} /></Field>
+                <Field><FieldLabel>Email</FieldLabel><Input disabled={!isEditing} type="email" value={employee.email ?? ""} onChange={(e) => setEmployee({ ...employee, email: e.target.value })} /></Field>
+                <Field><FieldLabel>Personal mobile</FieldLabel><Input disabled={!isEditing} value={employee.personalMobile ?? ""} onChange={(e) => setEmployee({ ...employee, personalMobile: e.target.value })} /></Field>
+              </div>
+            </FieldGroup>
+          </section>
+
+          <section className="rounded-2xl bg-card p-5 shadow-sm ring-1 ring-foreground/10 sm:p-6">
+            <div className="flex items-center gap-2.5 border-b border-border pb-4">
+              <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+                <Briefcase className="size-4.5 text-primary" />
+              </div>
+              <div>
+                <h2 className="text-base font-semibold text-foreground">Employment details</h2>
+                <p className="text-sm text-muted-foreground">Where and how this employee works.</p>
+              </div>
+            </div>
+            <FieldGroup>
+              <div className="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                {branchingEnabled && (
+                  <Field>
+                    <FieldLabel>Branch</FieldLabel>
+                    <Select value={String(employee.branchId)} onValueChange={(v) => setEmployee({ ...employee, branchId: Number(v) })}>
+                      <SelectTrigger disabled={!isEditing || !isAdmin}><SelectValue placeholder="Select" /></SelectTrigger>
+                      <SelectContent>{(isAdmin ? branches : branches.filter((b) => b.branchId === myBranchId || b.branchId === employee.branchId)).map((b) => <SelectItem key={b.branchId} value={String(b.branchId)}>{b.name}</SelectItem>)}</SelectContent>
+                    </Select>
+                  </Field>
+                )}
+                <Field>
+                  <FieldLabel>Department</FieldLabel>
+                  <Select value={String(employee.departmentId)} onValueChange={(v) => setEmployee({ ...employee, departmentId: Number(v) })}>
+                    <SelectTrigger disabled={!isEditing}><SelectValue /></SelectTrigger>
+                    <SelectContent>{departments.map((d) => <SelectItem key={d.departmentId} value={String(d.departmentId)}>{d.name}</SelectItem>)}</SelectContent>
+                  </Select>
+                </Field>
+                <Field>
+                  <FieldLabel>Designation</FieldLabel>
+                  <Select value={String(employee.designationId)} onValueChange={(v) => setEmployee({ ...employee, designationId: Number(v) })}>
+                    <SelectTrigger disabled={!isEditing}><SelectValue /></SelectTrigger>
+                    <SelectContent>{designations.map((d) => <SelectItem key={d.designationId} value={String(d.designationId)}>{d.name}</SelectItem>)}</SelectContent>
+                  </Select>
+                </Field>
+                <Field>
+                  <FieldLabel>Employment type</FieldLabel>
+                  <Select value={String(employee.employmentTypeId)} onValueChange={(v) => setEmployee({ ...employee, employmentTypeId: Number(v) })}>
+                    <SelectTrigger disabled={!isEditing}><SelectValue /></SelectTrigger>
+                    <SelectContent>{employmentTypes.map((t) => <SelectItem key={t.employmentTypeId} value={String(t.employmentTypeId)}>{t.name}</SelectItem>)}</SelectContent>
+                  </Select>
+                </Field>
+                <Field>
+                  <FieldLabel>Work shift</FieldLabel>
+                  <Select value={String(employee.workShiftId)} onValueChange={(v) => setEmployee({ ...employee, workShiftId: Number(v) })}>
+                    <SelectTrigger disabled={!isEditing}><SelectValue /></SelectTrigger>
+                    <SelectContent>{workShifts.map((w) => <SelectItem key={w.workShiftId} value={String(w.workShiftId)}>{w.name}</SelectItem>)}</SelectContent>
+                  </Select>
+                </Field>
+              </div>
+            </FieldGroup>
+          </section>
+
+          <section className="rounded-2xl bg-card p-5 shadow-sm ring-1 ring-foreground/10 sm:p-6">
+            <div className="flex items-center gap-2.5 border-b border-border pb-4">
+              <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+                <ShieldCheck className="size-4.5 text-primary" />
+              </div>
+              <div>
+                <h2 className="text-base font-semibold text-foreground">Statutory details</h2>
+                <p className="text-sm text-muted-foreground">Government registration numbers.</p>
+              </div>
+            </div>
+            <FieldGroup>
+              <div className="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:max-w-md">
+                <Field><FieldLabel>EPF number</FieldLabel><Input disabled={!isEditing} value={employee.epfNumber ?? ""} onChange={(e) => setEmployee({ ...employee, epfNumber: e.target.value })} /></Field>
+                <Field><FieldLabel>ETF number</FieldLabel><Input disabled={!isEditing} value={employee.etfNumber ?? ""} onChange={(e) => setEmployee({ ...employee, etfNumber: e.target.value })} /></Field>
+              </div>
+            </FieldGroup>
+          </section>
+
+          {isEditing && (
+            <div className="flex justify-end gap-2">
+              <Button variant="outline" onClick={handleCancelEdit} disabled={saving}>
+                <X className="size-4" />
+                Cancel
+              </Button>
+              <Button onClick={handleSave} disabled={saving}>{saving ? "Saving…" : "Save changes"}</Button>
+            </div>
+          )}
+        </div>
      )}

      {tab === "Bank Details" && (
        <div className="flex flex-col gap-4">
-          <Table className="text-base">
-            <TableHeader>
-              <TableRow>
-                <TableHead className="h-12 px-3 text-sm">Bank</TableHead>
-                <TableHead className="h-12 px-3 text-sm">Branch</TableHead>
-                <TableHead className="h-12 px-3 text-sm">Account</TableHead>
-                <TableHead className="h-12 px-3 text-sm">Primary</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {bankDetails.map((b, i) => (
-                <TableRow key={b.employeeBankDetailId ?? i}>
-                  <TableCell className="px-3 py-3.5">{b.bankName}</TableCell>
-                  <TableCell className="px-3 py-3.5">{b.branchName}</TableCell>
-                  <TableCell className="px-3 py-3.5">{b.accountNumber}</TableCell>
-                  <TableCell className="px-3 py-3.5">{b.isPrimary ? "Yes" : "—"}</TableCell>
-                </TableRow>
-              ))}
-              {bankDetails.length === 0 && (
-                <TableRow><TableCell colSpan={4} className="px-3 py-8 text-center text-muted-foreground">No bank details on file.</TableCell></TableRow>
-              )}
-            </TableBody>
-          </Table>
+          <section className="rounded-2xl bg-card p-5 shadow-sm ring-1 ring-foreground/10 sm:p-6">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <Field><FieldLabel>Bank name</FieldLabel><Input disabled={!isEditing} value={bankDraft[0]?.bankName ?? ""} onChange={(e) => updateBankRow(0, { bankName: e.target.value })} /></Field>
+              <Field><FieldLabel>Branch name</FieldLabel><Input disabled={!isEditing} value={bankDraft[0]?.branchName ?? ""} onChange={(e) => updateBankRow(0, { branchName: e.target.value })} /></Field>
+              <Field><FieldLabel>Account number</FieldLabel><Input disabled={!isEditing} value={bankDraft[0]?.accountNumber ?? ""} onChange={(e) => updateBankRow(0, { accountNumber: e.target.value })} /></Field>
+              <Field><FieldLabel>Account holder name</FieldLabel><Input disabled={!isEditing} value={bankDraft[0]?.accountHolderName ?? ""} onChange={(e) => updateBankRow(0, { accountHolderName: e.target.value })} /></Field>
+              <Field><FieldLabel>SWIFT code (optional)</FieldLabel><Input disabled={!isEditing} value={bankDraft[0]?.swiftCode ?? ""} onChange={(e) => updateBankRow(0, { swiftCode: e.target.value || null })} /></Field>
+            </div>
+          </section>
+
+          {isEditing && (
+            <div className="flex justify-end gap-2">
+              <Button variant="outline" onClick={handleCancelEdit} disabled={savingBank}>
+                <X className="size-4" />
+                Cancel
+              </Button>
+              <Button onClick={handleSaveBank} disabled={savingBank}>{savingBank ? "Saving…" : "Save changes"}</Button>
+            </div>
+          )}
        </div>
      )}

      {tab === "Documents" && (
        <div className="flex flex-col gap-4">
-          <div className="flex items-center gap-3">
-            <Select value={uploadTypeId} onValueChange={(v) => setUploadTypeId(v ?? "")}>
-              <SelectTrigger className="w-56"><SelectValue placeholder="Document type" /></SelectTrigger>
-              <SelectContent>{documentTypes.map((t) => <SelectItem key={t.hrDocumentTypeId} value={String(t.hrDocumentTypeId)}>{t.name}</SelectItem>)}</SelectContent>
-            </Select>
-            <label className={cn("inline-flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium hover:bg-muted")}>
-              <Upload className="size-4" />
-              Upload
-              <input type="file" className="hidden" accept=".pdf,.jpg,.jpeg,.png,.docx" onChange={(e) => { const f = e.target.files?.[0]; if (f) handleUpload(f); e.target.value = "" }} />
-            </label>
-          </div>
-          <Table className="text-base">
-            <TableHeader>
-              <TableRow>
-                <TableHead className="h-12 px-3 text-sm">File</TableHead>
-                <TableHead className="h-12 px-3 text-sm">Type</TableHead>
-                <TableHead className="h-12 px-3 text-sm">Uploaded</TableHead>
-                <TableHead className="h-12 px-3 text-sm">Status</TableHead>
-                <TableHead className="h-12 px-3 text-sm">Download</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {documents.map((d) => (
-                <TableRow key={d.employeeDocumentId}>
-                  <TableCell className="px-3 py-3.5">{d.originalFileName}</TableCell>
-                  <TableCell className="px-3 py-3.5">{d.hrDocumentTypeName ?? "—"}</TableCell>
-                  <TableCell className="px-3 py-3.5">{new Date(d.uploadedAt).toLocaleDateString()}</TableCell>
-                  <TableCell className="px-3 py-3.5">{d.status}</TableCell>
-                  <TableCell className="px-3 py-3.5">
-                    <a href={employeesApi.documentDownloadUrl(employeeId, d.employeeDocumentId)} className="text-primary underline underline-offset-2" target="_blank" rel="noreferrer">Download</a>
-                  </TableCell>
+          <section className="rounded-2xl bg-card p-5 shadow-sm ring-1 ring-foreground/10 sm:p-6">
+            <div className="flex items-center gap-2.5 border-b border-border pb-4">
+              <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+                <Upload className="size-4.5 text-primary" />
+              </div>
+              <div>
+                <h2 className="text-base font-semibold text-foreground">Upload a document</h2>
+                <p className="text-sm text-muted-foreground">NIC, contracts, certificates — PDF, image, or Word file.</p>
+              </div>
+            </div>
+            <div className="mt-5 flex flex-col gap-4 sm:flex-row sm:items-end">
+              <Field className="w-full sm:max-w-64">
+                <FieldLabel htmlFor="doc-upload-type">Document type</FieldLabel>
+                <Select value={uploadTypeId} onValueChange={(v) => setUploadTypeId(v ?? "")}>
+                  <SelectTrigger id="doc-upload-type"><SelectValue placeholder="Select a type" /></SelectTrigger>
+                  <SelectContent>{documentTypes.map((t) => <SelectItem key={t.hrDocumentTypeId} value={String(t.hrDocumentTypeId)}>{t.name}</SelectItem>)}</SelectContent>
+                </Select>
+              </Field>
+              <label
+                className={cn(
+                  "inline-flex h-9 w-fit items-center gap-2 rounded-lg border border-black px-4 text-sm font-medium",
+                  uploadTypeId ? "cursor-pointer hover:bg-muted" : "cursor-not-allowed border-input text-muted-foreground opacity-60"
+                )}
+                title={uploadTypeId ? undefined : "Select a document type first"}
+              >
+                <Upload className="size-4" />
+                Choose file to upload
+                <input
+                  type="file"
+                  className="hidden"
+                  disabled={!uploadTypeId}
+                  accept=".pdf,.jpg,.jpeg,.png,.docx"
+                  onChange={(e) => { const f = e.target.files?.[0]; if (f) handleUpload(f); e.target.value = "" }}
+                />
+              </label>
+            </div>
+          </section>
+          <div className="overflow-hidden rounded-2xl bg-card shadow-sm ring-1 ring-foreground/10">
+            <div className="overflow-x-auto">
+            <Table className="text-base">
+              <TableHeader>
+                <TableRow className="hover:bg-transparent">
+                  <TableHead className="h-11 px-4 text-sm">File</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Type</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Uploaded</TableHead>
+                  <TableHead className="h-11 w-28 px-4 text-sm">Status</TableHead>
+                  <TableHead className="h-11 w-24 px-4 text-center text-sm">Actions</TableHead>
                </TableRow>
-              ))}
-              {documents.length === 0 && (
-                <TableRow><TableCell colSpan={5} className="px-3 py-8 text-center text-muted-foreground">No documents uploaded yet.</TableCell></TableRow>
-              )}
-            </TableBody>
-          </Table>
+              </TableHeader>
+              <TableBody>
+                {documents.map((d) => (
+                  <TableRow key={d.employeeDocumentId} className="hover:bg-muted/20">
+                    <TableCell className="px-4 py-3.5 font-medium text-foreground">{d.originalFileName}</TableCell>
+                    <TableCell className="px-4 py-3.5 text-muted-foreground">{d.hrDocumentTypeName ?? "—"}</TableCell>
+                    <TableCell className="px-4 py-3.5 text-muted-foreground">{new Date(d.uploadedAt).toLocaleDateString()}</TableCell>
+                    <TableCell className="px-4 py-3.5">
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          "h-5 w-fit justify-center bg-white px-2 text-xs",
+                          d.status === "Active" ? "border-success/40 text-success" : "border-input text-muted-foreground"
+                        )}
+                      >
+                        {d.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="px-4 py-3.5">
+                      <div className="flex justify-center">
+                        <a
+                          href={employeesApi.documentDownloadUrl(employeeId, d.employeeDocumentId)}
+                          className={cn(buttonVariants({ variant: "ghost", size: "icon-sm" }))}
+                          target="_blank"
+                          rel="noreferrer"
+                          aria-label={`Download ${d.originalFileName}`}
+                          title={`Download ${d.originalFileName}`}
+                        >
+                          <Download className="size-4" />
+                        </a>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+                {documents.length === 0 && (
+                  <TableRow><TableCell colSpan={5} className="px-4 py-10 text-center text-muted-foreground">No documents uploaded yet.</TableCell></TableRow>
+                )}
+              </TableBody>
+            </Table>
+            </div>
+          </div>
        </div>
      )}

      {tab === "Salary & Loans" && (
-        <div className="flex flex-col gap-8">
-          <section className="flex flex-col gap-4">
+        <div className="flex flex-col gap-6">
+          <section className="flex flex-col gap-4 rounded-2xl bg-card p-5 shadow-sm ring-1 ring-foreground/10">
            <div className="flex items-center justify-between">
              <h2 className="text-lg font-semibold text-foreground">Salary Structure</h2>
              <Dialog open={structureOpen} onOpenChange={(v) => { setStructureOpen(v); if (v && structureLines.length === 0) addStructureLine() }}>
@@ -405,32 +597,83 @@ export default function EmployeeDetailPage() {
                </DialogContent>
              </Dialog>
            </div>
-            <Table className="text-base">
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="h-12 px-3 text-sm">Effective from</TableHead>
-                  <TableHead className="h-12 px-3 text-sm">Effective to</TableHead>
-                  <TableHead className="h-12 px-3 text-sm">Basic</TableHead>
-                  <TableHead className="h-12 px-3 text-sm">Status</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {salaryStructures.map((s) => (
-                  <TableRow key={s.employeeSalaryStructureId}>
-                    <TableCell className="px-3 py-3.5">{new Date(s.effectiveFrom).toLocaleDateString()}</TableCell>
-                    <TableCell className="px-3 py-3.5">{s.effectiveTo ? new Date(s.effectiveTo).toLocaleDateString() : "Current"}</TableCell>
-                    <TableCell className="px-3 py-3.5">{money(s.basicSalary)}</TableCell>
-                    <TableCell className="px-3 py-3.5">{s.status}</TableCell>
-                  </TableRow>
-                ))}
-                {salaryStructures.length === 0 && (
-                  <TableRow><TableCell colSpan={4} className="px-3 py-8 text-center text-muted-foreground">No salary structure set yet.</TableCell></TableRow>
+            {currentStructure && (
+              <div className="rounded-xl border p-4 sm:p-5">
+                <div className="flex flex-wrap items-baseline justify-between gap-2">
+                  <h3 className="text-sm font-semibold text-foreground">Current breakdown</h3>
+                  <span className="text-xs text-muted-foreground">Effective {new Date(currentStructure.effectiveFrom).toLocaleDateString()}</span>
+                </div>
+
+                <div className="mt-3 flex flex-col gap-1.5 text-sm">
+                  <div className="grid grid-cols-2 gap-2">
+                    <span className="text-muted-foreground">Basic salary</span>
+                    <span className="text-right font-medium text-foreground">{money(currentStructure.basicSalary)}</span>
+                  </div>
+                  {earningLines.map((l) => (
+                    <div key={l.salaryComponentId} className="grid grid-cols-2 gap-2">
+                      <span className="text-muted-foreground">{l.salaryComponentName ?? "Allowance"}</span>
+                      <span className="text-right font-medium text-foreground">+{money(l.amount)}</span>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="mt-3 grid grid-cols-2 gap-2 border-t border-border pt-3 text-sm">
+                  <span className="font-semibold text-foreground">Gross pay</span>
+                  <span className="text-right font-semibold text-foreground">{money(grossPay)}</span>
+                </div>
+
+                {deductionLines.length > 0 && (
+                  <>
+                    <div className="mt-3 flex flex-col gap-1.5 text-sm">
+                      {deductionLines.map((l) => (
+                        <div key={l.salaryComponentId} className="grid grid-cols-2 gap-2">
+                          <span className="text-muted-foreground">{l.salaryComponentName ?? "Deduction"}</span>
+                          <span className="text-right font-medium text-destructive">−{money(l.amount)}</span>
+                        </div>
+                      ))}
+                    </div>
+                    <div className="mt-3 grid grid-cols-2 gap-2 border-t border-border pt-3 text-sm">
+                      <span className="font-semibold text-foreground">Net pay</span>
+                      <span className="text-right font-semibold text-foreground">{money(netPay)}</span>
+                    </div>
+                  </>
                )}
-              </TableBody>
-            </Table>
+                <p className="mt-3 text-xs text-muted-foreground">
+                  OT, Late/No-Pay, loan installments, EPF/ETF, and tax are computed at payroll time and aren&apos;t part of this structure.
+                </p>
+              </div>
+            )}
+
+            <div className="overflow-hidden rounded-xl border">
+              <div className="overflow-x-auto">
+              <Table className="text-base">
+                <TableHeader>
+                  <TableRow className="hover:bg-transparent">
+                    <TableHead className="h-11 px-4 text-sm">Effective from</TableHead>
+                    <TableHead className="h-11 px-4 text-sm">Effective to</TableHead>
+                    <TableHead className="h-11 px-4 text-sm">Basic</TableHead>
+                    <TableHead className="h-11 px-4 text-sm">Status</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {salaryStructures.map((s) => (
+                    <TableRow key={s.employeeSalaryStructureId} className="hover:bg-muted/20">
+                      <TableCell className="px-4 py-3.5">{new Date(s.effectiveFrom).toLocaleDateString()}</TableCell>
+                      <TableCell className="px-4 py-3.5">{s.effectiveTo ? new Date(s.effectiveTo).toLocaleDateString() : "Current"}</TableCell>
+                      <TableCell className="px-4 py-3.5">{money(s.basicSalary)}</TableCell>
+                      <TableCell className="px-4 py-3.5">{s.status}</TableCell>
+                    </TableRow>
+                  ))}
+                  {salaryStructures.length === 0 && (
+                    <TableRow><TableCell colSpan={4} className="px-4 py-10 text-center text-muted-foreground">No salary structure set yet.</TableCell></TableRow>
+                  )}
+                </TableBody>
+              </Table>
+              </div>
+            </div>
          </section>

-          <section className="flex flex-col gap-4">
+          <section className="flex flex-col gap-4 rounded-2xl bg-card p-5 shadow-sm ring-1 ring-foreground/10">
            <div className="flex items-center justify-between">
              <h2 className="text-lg font-semibold text-foreground">Loans &amp; Advances</h2>
              <Dialog open={loanOpen} onOpenChange={setLoanOpen}>
@@ -467,31 +710,35 @@ export default function EmployeeDetailPage() {
                </DialogContent>
              </Dialog>
            </div>
-            <Table className="text-base">
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="h-12 px-3 text-sm">Doc No</TableHead>
-                  <TableHead className="h-12 px-3 text-sm">Type</TableHead>
-                  <TableHead className="h-12 px-3 text-sm">Principal</TableHead>
-                  <TableHead className="h-12 px-3 text-sm">Outstanding</TableHead>
-                  <TableHead className="h-12 px-3 text-sm">Status</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {loans.map((l) => (
-                  <TableRow key={l.employeeLoanId}>
-                    <TableCell className="px-3 py-3.5 font-medium">{l.docNo}</TableCell>
-                    <TableCell className="px-3 py-3.5">{l.loanKind}</TableCell>
-                    <TableCell className="px-3 py-3.5">{money(l.principalAmount)}</TableCell>
-                    <TableCell className="px-3 py-3.5">{money(l.outstandingBalance)}</TableCell>
-                    <TableCell className="px-3 py-3.5">{l.status}</TableCell>
+            <div className="overflow-hidden rounded-xl border">
+              <div className="overflow-x-auto">
+              <Table className="text-base">
+                <TableHeader>
+                  <TableRow className="hover:bg-transparent">
+                    <TableHead className="h-11 px-4 text-sm">Doc No</TableHead>
+                    <TableHead className="h-11 px-4 text-sm">Type</TableHead>
+                    <TableHead className="h-11 px-4 text-sm">Principal</TableHead>
+                    <TableHead className="h-11 px-4 text-sm">Outstanding</TableHead>
+                    <TableHead className="h-11 px-4 text-sm">Status</TableHead>
                  </TableRow>
-                ))}
-                {loans.length === 0 && (
-                  <TableRow><TableCell colSpan={5} className="px-3 py-8 text-center text-muted-foreground">No loans or advances on file.</TableCell></TableRow>
-                )}
-              </TableBody>
-            </Table>
+                </TableHeader>
+                <TableBody>
+                  {loans.map((l) => (
+                    <TableRow key={l.employeeLoanId} className="hover:bg-muted/20">
+                      <TableCell className="px-4 py-3.5 font-medium">{l.docNo}</TableCell>
+                      <TableCell className="px-4 py-3.5">{l.loanKind}</TableCell>
+                      <TableCell className="px-4 py-3.5">{money(l.principalAmount)}</TableCell>
+                      <TableCell className="px-4 py-3.5">{money(l.outstandingBalance)}</TableCell>
+                      <TableCell className="px-4 py-3.5">{l.status}</TableCell>
+                    </TableRow>
+                  ))}
+                  {loans.length === 0 && (
+                    <TableRow><TableCell colSpan={5} className="px-4 py-10 text-center text-muted-foreground">No loans or advances on file.</TableCell></TableRow>
+                  )}
+                </TableBody>
+              </Table>
+              </div>
+            </div>
          </section>
        </div>
      )}
@@ -0,0 +1,353 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { Briefcase, KeyRound, Link2, Save, User } from "lucide-react"
+
+import { employeesApi } from "@/lib/api/employees"
+import { branchesHrmApi, departmentsApi, designationsApi, employmentTypesApi, workShiftsApi } from "@/lib/api/hrm-masters"
+import { rolesApi } from "@/lib/api/roles"
+import { usersApi } from "@/lib/api/users"
+import { errorMessage } from "@/lib/error-map"
+import { cn } from "@/lib/utils"
+import { Branch, CreateEmployeeRequest, Department, Designation, EmploymentType, UserMatch, WorkShift } from "@/types/hrm"
+import { Role } from "@/types/rbac"
+import { UserTypeOption } from "@/types/users"
+
+import { useAuth } from "@/components/auth/AuthProvider"
+import { Button, buttonVariants } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
+import { Input } from "@/components/ui/input"
+import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { toast } from "@/components/ui/toast"
+
+const emptyForm: CreateEmployeeRequest = {
+  employeeCode: "",
+  fullName: "",
+  email: "",
+  hireDate: new Date().toISOString().slice(0, 10),
+  departmentId: 0,
+  designationId: 0,
+  employmentTypeId: 0,
+  branchId: 0,
+  workShiftId: 0,
+}
+
+export default function NewEmployeePage() {
+  const router = useRouter()
+  const { isAdmin, branchId: myBranchId, branchName: myBranchName, activeBranchId, activeBranchName, branchingEnabled } = useAuth()
+  const lockedBranchId = isAdmin ? activeBranchId : myBranchId
+  const lockedBranchName = isAdmin ? activeBranchName : myBranchName
+  const showBranchPicker = branchingEnabled && isAdmin && !lockedBranchId
+
+  const [departments, setDepartments] = useState<Department[]>([])
+  const [designations, setDesignations] = useState<Designation[]>([])
+  const [employmentTypes, setEmploymentTypes] = useState<EmploymentType[]>([])
+  const [workShifts, setWorkShifts] = useState<WorkShift[]>([])
+  const [branches, setBranches] = useState<Branch[]>([])
+
+  const [form, setForm] = useState<CreateEmployeeRequest>(emptyForm)
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [submitting, setSubmitting] = useState(false)
+
+  // Advisory cross-link suggestion: does a System User already exist with this email?
+  const [userMatch, setUserMatch] = useState<UserMatch | null>(null)
+  const [checkingEmail, setCheckingEmail] = useState(false)
+
+  // Optional: create a login account for this employee in the same step.
+  const [grantLogin, setGrantLogin] = useState(false)
+  const [loginUsername, setLoginUsername] = useState("")
+  const [loginRoleId, setLoginRoleId] = useState("")
+  const [loginUserTypeId, setLoginUserTypeId] = useState("")
+  const [roles, setRoles] = useState<Role[]>([])
+  const [userTypes, setUserTypes] = useState<UserTypeOption[]>([])
+
+  // Admins have access to every branch regardless of which one their staff record names —
+  // don't make the creator pick one, just quietly default it (the Employee row still needs
+  // a home branch on file; it just never gates what an Admin login can see or do).
+  const selectedLoginRole = roles.find((r) => String(r.roleId) === loginRoleId)
+  const loginIsAdmin = grantLogin && !userMatch && selectedLoginRole?.code?.toUpperCase() === "ADMIN"
+
+  useEffect(() => {
+    if (lockedBranchId) setForm((f) => ({ ...f, branchId: lockedBranchId }))
+  }, [lockedBranchId])
+
+  useEffect(() => {
+    if (loginIsAdmin && !form.branchId) {
+      const fallbackBranchId = lockedBranchId ?? branches[0]?.branchId
+      if (fallbackBranchId) setForm((f) => ({ ...f, branchId: fallbackBranchId }))
+    }
+  }, [loginIsAdmin, lockedBranchId, branches, form.branchId])
+
+  useEffect(() => {
+    departmentsApi.list({ pageSize: 200, status: "Active" }).then((r) => setDepartments(r.items)).catch(() => setDepartments([]))
+    designationsApi.list({ pageSize: 200, status: "Active" }).then((r) => setDesignations(r.items)).catch(() => setDesignations([]))
+    employmentTypesApi.list({ pageSize: 200, status: "Active" }).then((r) => setEmploymentTypes(r.items)).catch(() => setEmploymentTypes([]))
+    workShiftsApi.list({ pageSize: 200, status: "Active" }).then((r) => setWorkShifts(r.items)).catch(() => setWorkShifts([]))
+    if (branchingEnabled) branchesHrmApi.list({ pageSize: 200, status: "Active" }).then((r) => setBranches(r.items)).catch(() => setBranches([]))
+    rolesApi.list({ pageSize: 200, status: "Active" }).then((r) => setRoles(r.items)).catch(() => setRoles([]))
+    usersApi.userTypes().then(setUserTypes).catch(() => setUserTypes([]))
+  }, [branchingEnabled])
+
+  async function checkEmail(email: string) {
+    if (!email.trim()) { setUserMatch(null); return }
+    setCheckingEmail(true)
+    try {
+      const { match } = await employeesApi.emailLookup(email.trim())
+      setUserMatch(match)
+    } catch {
+      setUserMatch(null)
+    } finally {
+      setCheckingEmail(false)
+    }
+  }
+
+  async function handleCreate() {
+    const nextErrors: Record<string, string> = {}
+    if (!form.employeeCode.trim()) nextErrors.employeeCode = "Employee code is required"
+    if (!form.fullName.trim()) nextErrors.fullName = "Full name is required"
+    if (!form.hireDate) nextErrors.hireDate = "Hire date is required"
+    if (!form.departmentId) nextErrors.departmentId = "Department is required"
+    if (!form.designationId) nextErrors.designationId = "Designation is required"
+    if (!form.employmentTypeId) nextErrors.employmentTypeId = "Employment type is required"
+    if (!form.workShiftId) nextErrors.workShiftId = "Work shift is required"
+    if (branchingEnabled && !loginIsAdmin && !form.branchId) nextErrors.branchId = "Branch is required"
+    if (grantLogin && !userMatch) {
+      if (!form.email?.trim()) nextErrors.email = "Email is required to grant login access"
+      if (!loginUsername.trim()) nextErrors.loginUsername = "Username is required"
+      if (!loginRoleId) nextErrors.loginRoleId = "Role is required"
+      if (!loginUserTypeId) nextErrors.loginUserTypeId = "User type is required"
+    }
+    setErrors(nextErrors)
+    if (Object.keys(nextErrors).length > 0) return
+
+    setSubmitting(true)
+    try {
+      const created = await employeesApi.create({
+        ...form,
+        email: form.email || null,
+        linkUserId: userMatch ? userMatch.userId : null,
+      })
+
+      // Grant login access in the same step — no separate "Add User" flow needed.
+      if (grantLogin && !userMatch) {
+        try {
+          await usersApi.create({
+            username: loginUsername.trim(),
+            fullName: form.fullName.trim(),
+            email: form.email!.trim(),
+            roleId: Number(loginRoleId),
+            userTypeId: loginUserTypeId,
+            mobileNumber: form.personalMobile || undefined,
+            nic: form.nic || undefined,
+            linkEmployeeId: created.data.employeeId,
+          })
+          toast.success("Employee created", "Login credentials have been emailed to the employee.")
+        } catch (err) {
+          toast.error("Employee created, but login account failed", errorMessage(err))
+        }
+      } else {
+        toast.success("Employee created")
+      }
+
+      router.push(`/dashboard/hrm/employees/${created.data.employeeId}`)
+    } catch (err) {
+      toast.error("Could not create employee", errorMessage(err))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-6 pb-24">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">New employee</h1>
+        <p className="text-base text-muted-foreground">Add a staff record — grant login access at the end if this employee needs one.</p>
+      </div>
+
+      <section className="flex flex-col gap-5 rounded-2xl border bg-card p-6 shadow-sm">
+        <div className="flex items-center gap-3">
+          <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <User className="size-4.5" />
+          </div>
+          <div>
+            <h2 className="text-base font-semibold text-foreground">Personal details</h2>
+            <p className="text-sm text-muted-foreground">Basic identity and contact information.</p>
+          </div>
+        </div>
+        <FieldGroup>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <Field data-invalid={!!errors.employeeCode}>
+              <FieldLabel htmlFor="e-code">Employee code</FieldLabel>
+              <Input id="e-code" value={form.employeeCode} onChange={(e) => setForm((f) => ({ ...f, employeeCode: e.target.value }))} aria-invalid={!!errors.employeeCode} />
+              <FieldError errors={[errors.employeeCode ? { message: errors.employeeCode } : undefined]} />
+            </Field>
+            <Field data-invalid={!!errors.hireDate}>
+              <FieldLabel htmlFor="e-hire">Hire date</FieldLabel>
+              <Input id="e-hire" type="date" value={form.hireDate} onChange={(e) => setForm((f) => ({ ...f, hireDate: e.target.value }))} aria-invalid={!!errors.hireDate} />
+              <FieldError errors={[errors.hireDate ? { message: errors.hireDate } : undefined]} />
+            </Field>
+          </div>
+          <Field data-invalid={!!errors.fullName}>
+            <FieldLabel htmlFor="e-name">Full name</FieldLabel>
+            <Input id="e-name" value={form.fullName} onChange={(e) => setForm((f) => ({ ...f, fullName: e.target.value }))} aria-invalid={!!errors.fullName} />
+            <FieldError errors={[errors.fullName ? { message: errors.fullName } : undefined]} />
+          </Field>
+          <Field data-invalid={!!errors.email}>
+            <FieldLabel htmlFor="e-email">Email {grantLogin ? "" : "(optional)"}</FieldLabel>
+            <Input
+              id="e-email"
+              type="email"
+              value={form.email ?? ""}
+              onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
+              onBlur={(e) => checkEmail(e.target.value)}
+              aria-invalid={!!errors.email}
+            />
+            {checkingEmail && <p className="text-sm text-muted-foreground">Checking for an existing system user…</p>}
+            {userMatch && (
+              <div className="flex items-center gap-2 rounded-lg border border-primary/30 bg-primary/5 px-3 py-2 text-sm">
+                <Link2 className="size-4 shrink-0 text-primary" />
+                <span>
+                  System user <strong>{userMatch.username}</strong> ({userMatch.displayName}) matches this email — it will be linked to this employee.
+                </span>
+              </div>
+            )}
+            <FieldError errors={[errors.email ? { message: errors.email } : undefined]} />
+          </Field>
+        </FieldGroup>
+      </section>
+
+      <section className="flex flex-col gap-5 rounded-2xl border bg-card p-6 shadow-sm">
+        <div className="flex items-center gap-3">
+          <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <Briefcase className="size-4.5" />
+          </div>
+          <div>
+            <h2 className="text-base font-semibold text-foreground">Employment</h2>
+            <p className="text-sm text-muted-foreground">Where this employee sits in the org.</p>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <Field data-invalid={!!errors.departmentId}>
+            <FieldLabel htmlFor="e-dept">Department</FieldLabel>
+            <Select value={form.departmentId ? String(form.departmentId) : undefined} onValueChange={(v) => setForm((f) => ({ ...f, departmentId: v ? Number(v) : 0 }))}>
+              <SelectTrigger id="e-dept" className="h-10 w-full"><SelectValue placeholder="Select" /></SelectTrigger>
+              <SelectContent>{departments.map((d) => <SelectItem key={d.departmentId} value={String(d.departmentId)}>{d.name}</SelectItem>)}</SelectContent>
+            </Select>
+            <FieldError errors={[errors.departmentId ? { message: errors.departmentId } : undefined]} />
+          </Field>
+          <Field data-invalid={!!errors.designationId}>
+            <FieldLabel htmlFor="e-desig">Designation</FieldLabel>
+            <Select value={form.designationId ? String(form.designationId) : undefined} onValueChange={(v) => setForm((f) => ({ ...f, designationId: v ? Number(v) : 0 }))}>
+              <SelectTrigger id="e-desig" className="h-10 w-full"><SelectValue placeholder="Select" /></SelectTrigger>
+              <SelectContent>{designations.map((d) => <SelectItem key={d.designationId} value={String(d.designationId)}>{d.name}</SelectItem>)}</SelectContent>
+            </Select>
+            <FieldError errors={[errors.designationId ? { message: errors.designationId } : undefined]} />
+          </Field>
+          <Field data-invalid={!!errors.employmentTypeId}>
+            <FieldLabel htmlFor="e-etype">Employment type</FieldLabel>
+            <Select value={form.employmentTypeId ? String(form.employmentTypeId) : undefined} onValueChange={(v) => setForm((f) => ({ ...f, employmentTypeId: v ? Number(v) : 0 }))}>
+              <SelectTrigger id="e-etype" className="h-10 w-full"><SelectValue placeholder="Select" /></SelectTrigger>
+              <SelectContent>{employmentTypes.map((t) => <SelectItem key={t.employmentTypeId} value={String(t.employmentTypeId)}>{t.name}</SelectItem>)}</SelectContent>
+            </Select>
+            <FieldError errors={[errors.employmentTypeId ? { message: errors.employmentTypeId } : undefined]} />
+          </Field>
+          <Field data-invalid={!!errors.workShiftId}>
+            <FieldLabel htmlFor="e-shift">Work shift</FieldLabel>
+            <Select value={form.workShiftId ? String(form.workShiftId) : undefined} onValueChange={(v) => setForm((f) => ({ ...f, workShiftId: v ? Number(v) : 0 }))}>
+              <SelectTrigger id="e-shift" className="h-10 w-full"><SelectValue placeholder="Select" /></SelectTrigger>
+              <SelectContent>{workShifts.map((w) => <SelectItem key={w.workShiftId} value={String(w.workShiftId)}>{w.name}</SelectItem>)}</SelectContent>
+            </Select>
+            <FieldError errors={[errors.workShiftId ? { message: errors.workShiftId } : undefined]} />
+          </Field>
+          {branchingEnabled && loginIsAdmin && (
+            <Field className="sm:col-span-2">
+              <FieldLabel>Branch</FieldLabel>
+              <div className="flex h-9 items-center rounded-lg border border-primary/30 bg-primary/5 px-3 text-sm text-muted-foreground">
+                Not needed — the Admin role grants access to every branch.
+              </div>
+            </Field>
+          )}
+          {branchingEnabled && !loginIsAdmin && (
+            <Field data-invalid={!!errors.branchId}>
+              <FieldLabel htmlFor="e-branch">Branch</FieldLabel>
+              {showBranchPicker ? (
+                <Select value={form.branchId ? String(form.branchId) : undefined} onValueChange={(v) => setForm((f) => ({ ...f, branchId: v ? Number(v) : 0 }))}>
+                  <SelectTrigger id="e-branch" className="h-10 w-full" aria-invalid={!!errors.branchId}><SelectValue placeholder="Select" /></SelectTrigger>
+                  <SelectContent>{branches.map((b) => <SelectItem key={b.branchId} value={String(b.branchId)}>{b.name}</SelectItem>)}</SelectContent>
+                </Select>
+              ) : (
+                <div id="e-branch" className="flex h-9 items-center rounded-lg border border-input bg-muted px-3 text-sm text-muted-foreground">
+                  {lockedBranchName ?? "No branch assigned — contact an admin"}
+                </div>
+              )}
+              <FieldError errors={[errors.branchId ? { message: errors.branchId } : undefined]} />
+            </Field>
+          )}
+        </div>
+      </section>
+
+      {!userMatch && (
+        <section className="flex flex-col gap-5 rounded-2xl border bg-card p-6 shadow-sm">
+          <label className="flex cursor-pointer items-center justify-between gap-4">
+            <div className="flex items-center gap-3">
+              <div className={cn("flex size-9 shrink-0 items-center justify-center rounded-lg transition-colors", grantLogin ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground")}>
+                <KeyRound className="size-4.5" />
+              </div>
+              <div>
+                <h2 className="text-base font-semibold text-foreground">Grant login access</h2>
+                <p className="text-sm text-muted-foreground">Optional — creates a system user account for this employee automatically.</p>
+              </div>
+            </div>
+            <Switch checked={grantLogin} onCheckedChange={(v) => setGrantLogin(v === true)} aria-label="Grant login access" />
+          </label>
+          {grantLogin && (
+            <FieldGroup className="border-t pt-5">
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                <Field data-invalid={!!errors.loginUsername}>
+                  <FieldLabel htmlFor="e-login-username">Username</FieldLabel>
+                  <Input
+                    id="e-login-username"
+                    value={loginUsername}
+                    onChange={(e) => setLoginUsername(e.target.value)}
+                    aria-invalid={!!errors.loginUsername}
+                  />
+                  <FieldError errors={[errors.loginUsername ? { message: errors.loginUsername } : undefined]} />
+                </Field>
+                <Field data-invalid={!!errors.loginRoleId}>
+                  <FieldLabel htmlFor="e-login-role">Role</FieldLabel>
+                  <Select value={loginRoleId || undefined} onValueChange={(v) => setLoginRoleId(v ?? "")}>
+                    <SelectTrigger id="e-login-role" className="h-10 w-full" aria-invalid={!!errors.loginRoleId}><SelectValue placeholder="Select" /></SelectTrigger>
+                    <SelectContent>{roles.map((r) => <SelectItem key={r.roleId} value={String(r.roleId)}>{r.name}</SelectItem>)}</SelectContent>
+                  </Select>
+                  <FieldError errors={[errors.loginRoleId ? { message: errors.loginRoleId } : undefined]} />
+                </Field>
+                <Field data-invalid={!!errors.loginUserTypeId} className="sm:col-span-2">
+                  <FieldLabel htmlFor="e-login-usertype">User type</FieldLabel>
+                  <Select value={loginUserTypeId || undefined} onValueChange={(v) => setLoginUserTypeId(v ?? "")}>
+                    <SelectTrigger id="e-login-usertype" className="h-10 w-full" aria-invalid={!!errors.loginUserTypeId}><SelectValue placeholder="Select" /></SelectTrigger>
+                    <SelectContent>{userTypes.map((t) => <SelectItem key={t.userTypeId} value={t.userTypeId}>{t.code ?? t.description ?? t.userTypeId}</SelectItem>)}</SelectContent>
+                  </Select>
+                  <FieldError errors={[errors.loginUserTypeId ? { message: errors.loginUserTypeId } : undefined]} />
+                </Field>
+              </div>
+              <p className="text-xs text-muted-foreground">A password will be auto-generated and emailed to the employee.</p>
+            </FieldGroup>
+          )}
+        </section>
+      )}
+
+      <div className="sticky bottom-0 -mx-4 flex justify-end gap-3 border-t bg-background/95 px-4 py-4 backdrop-blur supports-backdrop-filter:bg-background/80 sm:-mx-6 sm:px-6">
+        <Link href="/dashboard/hrm/employees" className={cn(buttonVariants({ variant: "outline" }))}>
+          Cancel
+        </Link>
+        <Button onClick={handleCreate} disabled={submitting} className="min-w-40">
+          <Save className="size-4" />
+          {submitting ? "Creating…" : "Create employee"}
+        </Button>
+      </div>
+    </div>
+  )
+}
@@ -2,136 +2,85 @@

 import { useEffect, useState } from "react"
 import Link from "next/link"
-import { Link2, Pencil, Plus, Users as UsersIcon } from "lucide-react"
+import { ChevronLeft, ChevronRight, Eye, Link2, Pencil, Plus, Search, Trash2, UserCheck, UserMinus, UserX, Users as UsersIcon, X } from "lucide-react"

 import { employeesApi } from "@/lib/api/employees"
-import { branchesHrmApi, departmentsApi, designationsApi, employmentTypesApi, workShiftsApi } from "@/lib/api/hrm-masters"
 import { errorMessage } from "@/lib/error-map"
 import { cn } from "@/lib/utils"
 import { PaginationMeta } from "@/types/common"
-import { Branch, CreateEmployeeRequest, Department, Designation, EmployeeListItem, EmploymentType, UserMatch, WorkShift } from "@/types/hrm"
+import { EmployeeListItem } from "@/types/hrm"

 import { useAuth } from "@/components/auth/AuthProvider"
+import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/ui/alert-dialog"
 import { Button, buttonVariants } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
-import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Skeleton } from "@/components/ui/skeleton"
+import { StatCard } from "@/components/ui/stat-card"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { toast } from "@/components/ui/toast"

-const PAGE_SIZE = 10
-
-const emptyForm: CreateEmployeeRequest = {
-  employeeCode: "",
-  fullName: "",
-  email: "",
-  hireDate: new Date().toISOString().slice(0, 10),
-  departmentId: 0,
-  designationId: 0,
-  employmentTypeId: 0,
-  branchId: 0,
-  workShiftId: 0,
-}
+const PAGE_SIZE_OPTIONS = [5, 10, 25, 50]

 export default function EmployeesPage() {
-  const { isAdmin, branchId: myBranchId, branchName: myBranchName, activeBranchId, activeBranchName, branchingEnabled } = useAuth()
-  // The branch to pin the new hire to without asking: an Admin's currently-selected
-  // header branch, or a non-admin's own branch. Only when an Admin is on "All Branches"
-  // (no single branch implied) do they need the dropdown to pick one explicitly.
-  const lockedBranchId = isAdmin ? activeBranchId : myBranchId
-  const lockedBranchName = isAdmin ? activeBranchName : myBranchName
-  const showBranchPicker = branchingEnabled && isAdmin && !lockedBranchId
+  const { activeBranchId, branchingEnabled } = useAuth()

  const [employees, setEmployees] = useState<EmployeeListItem[] | null>(null)
  const [pagination, setPagination] = useState<PaginationMeta | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [page, setPage] = useState(1)
-  const [q, setQ] = useState("")
+  const [pageSize, setPageSize] = useState(5)
+  const [search, setSearch] = useState("")
+  const [debouncedSearch, setDebouncedSearch] = useState("")
+  const [actionPendingId, setActionPendingId] = useState<number | null>(null)

-  const [departments, setDepartments] = useState<Department[]>([])
-  const [designations, setDesignations] = useState<Designation[]>([])
-  const [employmentTypes, setEmploymentTypes] = useState<EmploymentType[]>([])
-  const [workShifts, setWorkShifts] = useState<WorkShift[]>([])
-  const [branches, setBranches] = useState<Branch[]>([])
-
-  const [open, setOpen] = useState(false)
-  const [form, setForm] = useState<CreateEmployeeRequest>(emptyForm)
-  const [errors, setErrors] = useState<Record<string, string>>({})
-  const [submitting, setSubmitting] = useState(false)
-
-  // Advisory cross-link suggestion: does a System User already exist with this email?
-  const [userMatch, setUserMatch] = useState<UserMatch | null>(null)
-  const [checkingEmail, setCheckingEmail] = useState(false)
+  const [stats, setStats] = useState<{ total: number; active: number; terminated: number } | null>(null)

  function load() {
    employeesApi
-      .list({ page, pageSize: PAGE_SIZE, q: q || undefined, branchId: branchingEnabled ? (activeBranchId ?? undefined) : undefined })
+      .list({ page, pageSize, q: debouncedSearch || undefined, branchId: branchingEnabled ? (activeBranchId ?? undefined) : undefined })
      .then((res) => { setEmployees(res.items); setPagination(res.pagination) })
      .catch((err) => setError(errorMessage(err)))
  }
-  useEffect(load, [page, q, activeBranchId, branchingEnabled])
+  useEffect(load, [page, pageSize, debouncedSearch, activeBranchId, branchingEnabled])
  // Switching branch changes what "page 1" even means — stay on a page past the
  // new filtered result set otherwise.
  useEffect(() => setPage(1), [activeBranchId])

  useEffect(() => {
-    departmentsApi.list({ pageSize: 200, status: "Active" }).then((r) => setDepartments(r.items)).catch(() => setDepartments([]))
-    designationsApi.list({ pageSize: 200, status: "Active" }).then((r) => setDesignations(r.items)).catch(() => setDesignations([]))
-    employmentTypesApi.list({ pageSize: 200, status: "Active" }).then((r) => setEmploymentTypes(r.items)).catch(() => setEmploymentTypes([]))
-    workShiftsApi.list({ pageSize: 200, status: "Active" }).then((r) => setWorkShifts(r.items)).catch(() => setWorkShifts([]))
-    if (branchingEnabled) branchesHrmApi.list({ pageSize: 200, status: "Active" }).then((r) => setBranches(r.items)).catch(() => setBranches([]))
-  }, [branchingEnabled])
+    const t = setTimeout(() => {
+      setPage(1)
+      setDebouncedSearch(search.trim())
+    }, 300)
+    return () => clearTimeout(t)
+  }, [search])

-  async function checkEmail(email: string) {
-    if (!email.trim()) { setUserMatch(null); return }
-    setCheckingEmail(true)
-    try {
-      const { match } = await employeesApi.emailLookup(email.trim())
-      setUserMatch(match)
-    } catch {
-      setUserMatch(null)
-    } finally {
-      setCheckingEmail(false)
-    }
+  function loadStats() {
+    const branchId = branchingEnabled ? (activeBranchId ?? undefined) : undefined
+    Promise.all([
+      employeesApi.list({ page: 1, pageSize: 1, branchId }),
+      employeesApi.list({ page: 1, pageSize: 1, status: "Active", branchId }),
+      employeesApi.list({ page: 1, pageSize: 1, status: "Terminated", branchId }),
+    ])
+      .then(([totalRes, activeRes, terminatedRes]) =>
+        setStats({ total: totalRes.pagination.totalItems, active: activeRes.pagination.totalItems, terminated: terminatedRes.pagination.totalItems })
+      )
+      .catch(() => setStats(null))
  }
+  useEffect(loadStats, [activeBranchId, branchingEnabled])

-  function resetForm() {
-    setForm(emptyForm)
-    setUserMatch(null)
-    setErrors({})
-  }
-
-  async function handleCreate() {
-    const nextErrors: Record<string, string> = {}
-    if (!form.employeeCode.trim()) nextErrors.employeeCode = "Employee code is required"
-    if (!form.fullName.trim()) nextErrors.fullName = "Full name is required"
-    if (!form.hireDate) nextErrors.hireDate = "Hire date is required"
-    if (!form.departmentId) nextErrors.departmentId = "Department is required"
-    if (!form.designationId) nextErrors.designationId = "Designation is required"
-    if (!form.employmentTypeId) nextErrors.employmentTypeId = "Employment type is required"
-    if (!form.workShiftId) nextErrors.workShiftId = "Work shift is required"
-    if (branchingEnabled && !form.branchId) nextErrors.branchId = "Branch is required"
-    setErrors(nextErrors)
-    if (Object.keys(nextErrors).length > 0) return
-
-    setSubmitting(true)
+  // Permanent delete — blocked by the backend (409) if the employee has payroll history.
+  async function handleDelete(e: EmployeeListItem) {
+    setActionPendingId(e.employeeId)
    try {
-      await employeesApi.create({
-        ...form,
-        email: form.email || null,
-        linkUserId: userMatch ? userMatch.userId : null,
-      })
-      toast.success("Employee created")
-      setOpen(false)
-      resetForm()
+      await employeesApi.remove(e.employeeId)
+      toast.success("Employee deleted", `${e.fullName} has been permanently removed.`)
      load()
+      loadStats()
    } catch (err) {
-      toast.error("Could not create employee", errorMessage(err))
+      toast.error("Could not delete employee", errorMessage(err))
    } finally {
-      setSubmitting(false)
+      setActionPendingId(null)
    }
  }

@@ -139,182 +88,261 @@ export default function EmployeesPage() {
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
-          <h1 className="text-2xl font-bold text-foreground">Employees</h1>
+          <div className="flex items-center gap-2.5">
+            <h1 className="text-2xl font-bold text-foreground">Employees</h1>
+            {pagination && (
+              <span className="rounded-full border bg-white px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                {pagination.totalItems}
+              </span>
+            )}
+          </div>
          <p className="text-base text-muted-foreground">Staff records — separate from system login accounts (see the link chip below).</p>
        </div>
-        <Dialog
-          open={open}
-          onOpenChange={(v) => {
-            setOpen(v)
-            if (!v) resetForm()
-            else if (lockedBranchId) setForm((f) => ({ ...f, branchId: lockedBranchId }))
-          }}
-        >
-          <DialogTrigger render={<Button size="lg"><Plus className="size-5" />New Employee</Button>} />
-          <DialogContent className="sm:max-w-lg">
-            <DialogHeader className="items-center text-center">
-              <DialogTitle>New Employee</DialogTitle>
-              <DialogDescription>Not every employee needs a login — a system user account is optional and separate.</DialogDescription>
-            </DialogHeader>
-            <FieldGroup>
-              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-                <Field data-invalid={!!errors.employeeCode}>
-                  <FieldLabel htmlFor="e-code">Employee code</FieldLabel>
-                  <Input id="e-code" value={form.employeeCode} onChange={(e) => setForm((f) => ({ ...f, employeeCode: e.target.value }))} aria-invalid={!!errors.employeeCode} />
-                  <FieldError errors={[errors.employeeCode ? { message: errors.employeeCode } : undefined]} />
-                </Field>
-                <Field data-invalid={!!errors.hireDate}>
-                  <FieldLabel htmlFor="e-hire">Hire date</FieldLabel>
-                  <Input id="e-hire" type="date" value={form.hireDate} onChange={(e) => setForm((f) => ({ ...f, hireDate: e.target.value }))} aria-invalid={!!errors.hireDate} />
-                  <FieldError errors={[errors.hireDate ? { message: errors.hireDate } : undefined]} />
-                </Field>
-              </div>
-              <Field data-invalid={!!errors.fullName}>
-                <FieldLabel htmlFor="e-name">Full name</FieldLabel>
-                <Input id="e-name" value={form.fullName} onChange={(e) => setForm((f) => ({ ...f, fullName: e.target.value }))} aria-invalid={!!errors.fullName} />
-                <FieldError errors={[errors.fullName ? { message: errors.fullName } : undefined]} />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="e-email">Email (optional)</FieldLabel>
-                <Input
-                  id="e-email"
-                  type="email"
-                  value={form.email ?? ""}
-                  onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
-                  onBlur={(e) => checkEmail(e.target.value)}
-                />
-                {checkingEmail && <p className="text-sm text-muted-foreground">Checking for an existing system user…</p>}
-                {userMatch && (
-                  <div className="flex items-center gap-2 rounded-lg border border-primary/30 bg-primary/5 px-3 py-2 text-sm">
-                    <Link2 className="size-4 shrink-0 text-primary" />
-                    <span>
-                      System user <strong>{userMatch.username}</strong> ({userMatch.displayName}) matches this email — it will be linked to this employee.
-                    </span>
-                  </div>
-                )}
-              </Field>
-              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-                <Field data-invalid={!!errors.departmentId}>
-                  <FieldLabel htmlFor="e-dept">Department</FieldLabel>
-                  <Select value={String(form.departmentId)} onValueChange={(v) => setForm((f) => ({ ...f, departmentId: Number(v) }))}>
-                    <SelectTrigger id="e-dept"><SelectValue placeholder="Select" /></SelectTrigger>
-                    <SelectContent>{departments.map((d) => <SelectItem key={d.departmentId} value={String(d.departmentId)}>{d.name}</SelectItem>)}</SelectContent>
-                  </Select>
-                  <FieldError errors={[errors.departmentId ? { message: errors.departmentId } : undefined]} />
-                </Field>
-                <Field data-invalid={!!errors.designationId}>
-                  <FieldLabel htmlFor="e-desig">Designation</FieldLabel>
-                  <Select value={String(form.designationId)} onValueChange={(v) => setForm((f) => ({ ...f, designationId: Number(v) }))}>
-                    <SelectTrigger id="e-desig"><SelectValue placeholder="Select" /></SelectTrigger>
-                    <SelectContent>{designations.map((d) => <SelectItem key={d.designationId} value={String(d.designationId)}>{d.name}</SelectItem>)}</SelectContent>
-                  </Select>
-                  <FieldError errors={[errors.designationId ? { message: errors.designationId } : undefined]} />
-                </Field>
-                <Field data-invalid={!!errors.employmentTypeId}>
-                  <FieldLabel htmlFor="e-etype">Employment type</FieldLabel>
-                  <Select value={String(form.employmentTypeId)} onValueChange={(v) => setForm((f) => ({ ...f, employmentTypeId: Number(v) }))}>
-                    <SelectTrigger id="e-etype"><SelectValue placeholder="Select" /></SelectTrigger>
-                    <SelectContent>{employmentTypes.map((t) => <SelectItem key={t.employmentTypeId} value={String(t.employmentTypeId)}>{t.name}</SelectItem>)}</SelectContent>
-                  </Select>
-                  <FieldError errors={[errors.employmentTypeId ? { message: errors.employmentTypeId } : undefined]} />
-                </Field>
-                <Field data-invalid={!!errors.workShiftId}>
-                  <FieldLabel htmlFor="e-shift">Work shift</FieldLabel>
-                  <Select value={String(form.workShiftId)} onValueChange={(v) => setForm((f) => ({ ...f, workShiftId: Number(v) }))}>
-                    <SelectTrigger id="e-shift"><SelectValue placeholder="Select" /></SelectTrigger>
-                    <SelectContent>{workShifts.map((w) => <SelectItem key={w.workShiftId} value={String(w.workShiftId)}>{w.name}</SelectItem>)}</SelectContent>
-                  </Select>
-                  <FieldError errors={[errors.workShiftId ? { message: errors.workShiftId } : undefined]} />
-                </Field>
-                {branchingEnabled && (
-                  <Field data-invalid={!!errors.branchId}>
-                    <FieldLabel htmlFor="e-branch">Branch</FieldLabel>
-                    {showBranchPicker ? (
-                      <Select value={String(form.branchId)} onValueChange={(v) => setForm((f) => ({ ...f, branchId: v ? Number(v) : 0 }))}>
-                        <SelectTrigger id="e-branch" aria-invalid={!!errors.branchId}><SelectValue placeholder="Select" /></SelectTrigger>
-                        <SelectContent>{branches.map((b) => <SelectItem key={b.branchId} value={String(b.branchId)}>{b.name}</SelectItem>)}</SelectContent>
-                      </Select>
-                    ) : (
-                      <div id="e-branch" className="flex h-9 items-center rounded-lg border border-input bg-muted px-3 text-sm text-muted-foreground">
-                        {lockedBranchName ?? "No branch assigned — contact an admin"}
-                      </div>
-                    )}
-                    <FieldError errors={[errors.branchId ? { message: errors.branchId } : undefined]} />
-                  </Field>
-                )}
-              </div>
-            </FieldGroup>
-            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
-              <Button className="w-full sm:w-auto sm:min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
-            </div>
-          </DialogContent>
-        </Dialog>
+
+        <Link href="/dashboard/hrm/employees/new" className={cn(buttonVariants({ size: "lg" }))}>
+          <Plus className="size-5" />
+          New Employee
+        </Link>
      </div>

-      <Input placeholder="Search by name or employee code…" value={q} onChange={(e) => { setPage(1); setQ(e.target.value) }} className="max-w-sm" />
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+        {stats ? (
+          <>
+            <StatCard label="Total employees" value={stats.total} icon={UsersIcon} />
+            <StatCard label="Active" value={stats.active} icon={UserCheck} />
+            <StatCard label="Inactive" value={stats.total - stats.active} icon={UserX} />
+            <StatCard label="Terminated" value={stats.terminated} icon={UserMinus} />
+          </>
+        ) : (
+          Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-20 w-full rounded-xl" />)
+        )}
+      </div>

-      {error && <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>}
+      <div className="relative w-full sm:max-w-xs">
+        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search by name or employee code…"
+          className="h-10 pl-9 pr-9"
+          aria-label="Search employees"
+        />
+        {search && (
+          <button
+            type="button"
+            onClick={() => setSearch("")}
+            aria-label="Clear search"
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>

-      {!error && employees === null && (
-        <div className="flex flex-col gap-3">{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-14 w-full" />)}</div>
+      {error && (
+        <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>
      )}

-      {!error && employees !== null && employees.length === 0 && (
+      {!error && employees === null && (
+        <div className="overflow-hidden rounded-xl border">
+          <div className="flex h-11 items-center gap-4 border-b bg-muted/20 px-4">
+            <Skeleton className="h-3.5 w-16" />
+            <Skeleton className="ml-auto h-3.5 w-16" />
+          </div>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-3 border-b px-4 py-4 last:border-b-0">
+              <Skeleton className="size-9 shrink-0 rounded-lg" />
+              <div className="flex flex-1 flex-col gap-2">
+                <Skeleton className="h-4 w-40" />
+                <Skeleton className="h-3 w-24" />
+              </div>
+              <Skeleton className="h-5 w-16 rounded-full" />
+              <Skeleton className="ml-4 h-7 w-16" />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!error && employees !== null && employees.length === 0 && debouncedSearch && (
+        <div className="flex flex-col items-center gap-3 rounded-xl border border-dashed py-16 text-center">
+          <Search className="size-10 text-muted-foreground" />
+          <div>
+            <p className="text-base font-medium text-foreground">No employees match &quot;{debouncedSearch}&quot;</p>
+            <p className="text-sm text-muted-foreground">Try a different name or code.</p>
+          </div>
+          <Button variant="outline" size="sm" onClick={() => setSearch("")}>
+            Clear search
+          </Button>
+        </div>
+      )}
+
+      {!error && employees !== null && employees.length === 0 && !debouncedSearch && (
        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center">
          <UsersIcon className="size-12 text-muted-foreground" />
-          <p className="text-base text-muted-foreground">No employees yet.</p>
+          <div>
+            <p className="text-base font-medium text-foreground">No employees yet</p>
+            <p className="text-sm text-muted-foreground">Add your first employee record to get started.</p>
+          </div>
+          <Link href="/dashboard/hrm/employees/new" className={cn(buttonVariants())}>
+            <Plus className="size-4" />
+            New Employee
+          </Link>
        </div>
      )}

      {!error && employees !== null && employees.length > 0 && (
-        <Table className="text-base">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="h-12 px-3 text-sm">Code</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Name</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Department</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Designation</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Login</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Status</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {employees.map((e) => (
-              <TableRow key={e.employeeId}>
-                <TableCell className="px-3 py-3.5 font-medium">{e.employeeCode}</TableCell>
-                <TableCell className="px-3 py-3.5">{e.fullName}</TableCell>
-                <TableCell className="px-3 py-3.5">{e.departmentName ?? "—"}</TableCell>
-                <TableCell className="px-3 py-3.5">{e.designationName ?? "—"}</TableCell>
-                <TableCell className="px-3 py-3.5">
-                  {e.hasUserLink ? (
-                    <Badge variant="outline" className="h-6 w-fit justify-center gap-1 border-transparent bg-primary/10 px-2.5 text-sm text-primary"><Link2 className="size-3.5" />Linked</Badge>
-                  ) : (
-                    <span className="text-sm text-muted-foreground">No login</span>
-                  )}
-                </TableCell>
-                <TableCell className="px-3 py-3.5">
-                  <Badge variant="outline" className={cn("h-6 w-fit justify-center border-transparent px-2.5 text-sm", e.status === "Active" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground")}>{e.status}</Badge>
-                </TableCell>
-                <TableCell className="px-3 py-3.5">
-                  <Link href={`/dashboard/hrm/employees/${e.employeeId}`} className={cn(buttonVariants({ variant: "ghost", size: "icon-sm" }))} aria-label={`Edit ${e.fullName}`}>
-                    <Pencil className="size-4" />
-                  </Link>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <div className="overflow-hidden rounded-xl border">
+          <div className="overflow-x-auto">
+            <Table className="text-base">
+              <TableHeader>
+                <TableRow className="hover:bg-transparent">
+                  <TableHead className="h-11 w-48 px-3 text-sm">Employee</TableHead>
+                  <TableHead className="h-11 w-32 px-3 text-sm">Code</TableHead>
+                  <TableHead className="h-11 w-40 px-3 text-sm">Department</TableHead>
+                  <TableHead className="h-11 w-40 px-3 text-sm">Designation</TableHead>
+                  <TableHead className="h-11 w-32 px-3 text-sm">Hire Date</TableHead>
+                  <TableHead className="h-11 w-32 px-3 text-sm">Login</TableHead>
+                  <TableHead className="h-11 w-28 px-3 text-sm">Status</TableHead>
+                  <TableHead className="h-11 w-24 px-3 text-center text-sm">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {employees.map((e) => (
+                  <TableRow key={e.employeeId} className="group align-top hover:bg-muted/20">
+                    <TableCell className="px-3 py-4">
+                      <Link
+                        href={`/dashboard/hrm/employees/${e.employeeId}`}
+                        className="rounded-md -m-1 inline-block p-1 font-semibold leading-tight text-foreground outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring/50"
+                      >
+                        {e.fullName}
+                      </Link>
+                    </TableCell>
+
+                    <TableCell className="px-3 py-4">
+                      <span className="font-mono text-xs text-muted-foreground">{e.employeeCode}</span>
+                    </TableCell>
+
+                    <TableCell className="px-3 py-4 text-sm text-muted-foreground">{e.departmentName ?? "—"}</TableCell>
+
+                    <TableCell className="px-3 py-4 text-sm text-muted-foreground">{e.designationName ?? "—"}</TableCell>
+
+                    <TableCell className="px-3 py-4 text-sm text-muted-foreground">
+                      {new Date(e.hireDate).toLocaleDateString(undefined, {
+                        year: "numeric",
+                        month: "short",
+                        day: "numeric",
+                      })}
+                    </TableCell>
+
+                    <TableCell className="px-3 py-4">
+                      {e.hasUserLink ? (
+                        <Badge variant="outline" className="h-5 w-fit justify-center gap-1 border-transparent bg-primary/10 px-2 text-xs text-primary"><Link2 className="size-3.5" />Linked</Badge>
+                      ) : (
+                        <span className="text-xs text-muted-foreground">No login</span>
+                      )}
+                    </TableCell>
+
+                    <TableCell className="px-3 py-4">
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          "h-5 w-fit justify-center bg-white px-2 text-xs",
+                          e.status === "Active" ? "border-success/40 text-success" : "border-input text-muted-foreground"
+                        )}
+                      >
+                        {e.status}
+                      </Badge>
+                    </TableCell>
+
+                    <TableCell className="px-3 py-4">
+                      <div className="flex items-center justify-center gap-1">
+                        <Link href={`/dashboard/hrm/employees/${e.employeeId}`} className={cn(buttonVariants({ variant: "ghost", size: "icon-sm" }))} aria-label={`View ${e.fullName}`} title={`View ${e.fullName}`}>
+                          <Eye className="size-4" />
+                        </Link>
+                        <Link href={`/dashboard/hrm/employees/${e.employeeId}?edit=1`} className={cn(buttonVariants({ variant: "ghost", size: "icon-sm" }))} aria-label={`Edit ${e.fullName}`} title={`Edit ${e.fullName}`}>
+                          <Pencil className="size-4" />
+                        </Link>
+                        <AlertDialog>
+                          <AlertDialogTrigger
+                            render={
+                              <Button
+                                variant="ghost"
+                                size="icon-sm"
+                                className="text-destructive hover:bg-destructive/10 disabled:pointer-events-auto disabled:cursor-not-allowed"
+                                aria-label={`Delete ${e.fullName}`}
+                                title={`Delete ${e.fullName}`}
+                                disabled={actionPendingId === e.employeeId}
+                              />
+                            }
+                          >
+                            <Trash2 className="size-4" />
+                          </AlertDialogTrigger>
+                          <AlertDialogContent
+                            variant="destructive"
+                            title={`Delete ${e.fullName}?`}
+                            description="This permanently removes the employee and all their HR records (bank details, documents, salary history, loans). This cannot be undone. Blocked if the employee has payroll history."
+                            confirmLabel="Delete"
+                            onConfirm={() => handleDelete(e)}
+                          />
+                        </AlertDialog>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
      )}

-      {pagination && pagination.totalPages > 1 && (
-        <div className="flex items-center justify-between">
-          <p className="text-sm text-muted-foreground">Showing {(pagination.page - 1) * pagination.pageSize + 1}–{Math.min(pagination.page * pagination.pageSize, pagination.totalItems)} of {pagination.totalItems}</p>
+      {pagination && pagination.totalItems > 0 && (
+        <div className="flex flex-col-reverse items-center gap-3 sm:flex-row sm:justify-between">
+          <div className="flex items-center gap-3">
+            <p className="text-sm text-muted-foreground">
+              Showing <span className="font-medium text-foreground">{(pagination.page - 1) * pagination.pageSize + 1}</span>–
+              <span className="font-medium text-foreground">
+                {Math.min(pagination.page * pagination.pageSize, pagination.totalItems)}
+              </span>{" "}
+              of <span className="font-medium text-foreground">{pagination.totalItems}</span> employees
+            </p>
+            <label className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              Rows per page
+              <select
+                value={pageSize}
+                onChange={(e) => { setPage(1); setPageSize(Number(e.target.value)) }}
+                className="h-8 rounded-md border border-black bg-white px-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                aria-label="Rows per page"
+              >
+                {PAGE_SIZE_OPTIONS.map((size) => (
+                  <option key={size} value={size}>{size}</option>
+                ))}
+              </select>
+            </label>
+          </div>
          <div className="flex items-center gap-2">
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>Previous</Button>
-            <span className="text-sm text-muted-foreground">Page {pagination.page} of {pagination.totalPages}</span>
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page >= pagination.totalPages} onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}>Next</Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page <= 1}
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+            >
+              <ChevronLeft className="size-4" />
+              Previous
+            </Button>
+            <span className="min-w-20 text-center text-sm text-muted-foreground">
+              Page {pagination.page} of {pagination.totalPages}
+            </span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page >= pagination.totalPages}
+              onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}
+            >
+              Next
+              <ChevronRight className="size-4" />
+            </Button>
          </div>
        </div>
      )}
@@ -1,7 +1,7 @@
 "use client"

 import { useEffect, useState } from "react"
-import { Plus } from "lucide-react"
+import { CheckCircle2, ChevronLeft, ChevronRight, Plus, Search, X, XCircle } from "lucide-react"

 import { employeesApi } from "@/lib/api/employees"
 import { leaveTypesApi } from "@/lib/api/hrm-masters"
@@ -14,14 +14,17 @@ import { EmployeeListItem, LeaveRequest, LeaveRequestStatus, LeaveType } from "@
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
-import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
+import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Textarea } from "@/components/ui/textarea"
 import { toast } from "@/components/ui/toast"

-const PAGE_SIZE = 10
+const PAGE_SIZE_OPTIONS = [5, 10, 25, 50]
+const STATUSES: LeaveRequestStatus[] = ["Draft", "Submitted", "Approved", "Rejected", "Cancelled"]
+const ALL_STATUS = "__all__"

 const STATUS_STYLE: Record<LeaveRequestStatus, string> = {
  Draft: "bg-muted text-muted-foreground",
@@ -36,6 +39,13 @@ export default function LeaveRequestsPage() {
  const [pagination, setPagination] = useState<PaginationMeta | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(5)
+  const [statusFilter, setStatusFilter] = useState(ALL_STATUS)
+  const [search, setSearch] = useState("")
+  const [debouncedSearch, setDebouncedSearch] = useState("")
+  const [actionPendingId, setActionPendingId] = useState<number | null>(null)
+
+  const hasActiveFilters = statusFilter !== ALL_STATUS || !!debouncedSearch

  const [employees, setEmployees] = useState<EmployeeListItem[]>([])
  const [leaveTypes, setLeaveTypes] = useState<LeaveType[]>([])
@@ -48,13 +58,32 @@ export default function LeaveRequestsPage() {
  const [reason, setReason] = useState("")
  const [submitting, setSubmitting] = useState(false)

+  const [rejectTarget, setRejectTarget] = useState<LeaveRequest | null>(null)
+  const [rejectReason, setRejectReason] = useState("")
+  const [rejectError, setRejectError] = useState<string | null>(null)
+  const [rejecting, setRejecting] = useState(false)
+
  function load() {
    leaveRequestsApi
-      .list({ page, pageSize: PAGE_SIZE })
+      .list({
+        page,
+        pageSize,
+        q: debouncedSearch || undefined,
+        status: statusFilter === ALL_STATUS ? undefined : (statusFilter as LeaveRequestStatus),
+      })
      .then((res) => { setRequests(res.items); setPagination(res.pagination) })
      .catch((err) => setError(errorMessage(err)))
  }
-  useEffect(load, [page])
+
+  useEffect(load, [page, pageSize, statusFilter, debouncedSearch]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      setPage(1)
+      setDebouncedSearch(search.trim())
+    }, 300)
+    return () => clearTimeout(t)
+  }, [search])

  useEffect(() => {
    employeesApi.list({ pageSize: 200, status: "Active" }).then((r) => setEmployees(r.items)).catch(() => setEmployees([]))
@@ -79,24 +108,38 @@ export default function LeaveRequestsPage() {
  }

  async function approve(id: number) {
+    setActionPendingId(id)
    try {
      await leaveRequestsApi.approve(id)
      toast.success("Leave approved")
      load()
    } catch (err) {
      toast.error("Could not approve", errorMessage(err))
+    } finally {
+      setActionPendingId(null)
    }
  }

-  async function reject(id: number) {
-    const reasonText = window.prompt("Reason for rejection:")
-    if (!reasonText) return
+  function openReject(request: LeaveRequest) {
+    setRejectTarget(request)
+    setRejectReason("")
+    setRejectError(null)
+  }
+
+  async function handleReject() {
+    if (!rejectTarget) return
+    if (!rejectReason.trim()) { setRejectError("Reason is required"); return }
+
+    setRejecting(true)
    try {
-      await leaveRequestsApi.reject(id, reasonText)
+      await leaveRequestsApi.reject(rejectTarget.leaveRequestId, rejectReason.trim())
      toast.success("Leave rejected")
+      setRejectTarget(null)
      load()
    } catch (err) {
      toast.error("Could not reject", errorMessage(err))
+    } finally {
+      setRejecting(false)
    }
  }

@@ -104,7 +147,14 @@ export default function LeaveRequestsPage() {
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
-          <h1 className="text-2xl font-bold text-foreground">Leave</h1>
+          <div className="flex items-center gap-2.5">
+            <h1 className="text-2xl font-bold text-foreground">Leave</h1>
+            {pagination && (
+              <span className="rounded-full border bg-white px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                {pagination.totalItems}
+              </span>
+            )}
+          </div>
          <p className="text-base text-muted-foreground">Approved leave feeds Attendance&apos;s OnLeave status and Payroll&apos;s No-Pay calculation.</p>
        </div>
        <Dialog open={open} onOpenChange={setOpen}>
@@ -143,53 +193,228 @@ export default function LeaveRequestsPage() {
        </Dialog>
      </div>

+      <Dialog open={!!rejectTarget} onOpenChange={(v) => !v && setRejectTarget(null)}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader className="items-center text-center">
+            <DialogTitle>Reject leave request</DialogTitle>
+            <DialogDescription>
+              {rejectTarget && <>Rejecting {rejectTarget.docNo} for {rejectTarget.employeeName ?? "this employee"}. The employee will see this reason.</>}
+            </DialogDescription>
+          </DialogHeader>
+          <FieldGroup>
+            <Field data-invalid={!!rejectError}>
+              <FieldLabel htmlFor="lv-reject-reason">Reason for rejection</FieldLabel>
+              <Textarea
+                id="lv-reject-reason"
+                value={rejectReason}
+                onChange={(e) => { setRejectReason(e.target.value); setRejectError(null) }}
+                aria-invalid={!!rejectError}
+                rows={3}
+                autoFocus
+              />
+              <FieldError errors={[rejectError ? { message: rejectError } : undefined]} />
+            </Field>
+          </FieldGroup>
+          <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
+            <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setRejectTarget(null)} disabled={rejecting}>Cancel</Button>
+            <Button variant="destructive" className="w-full sm:w-auto sm:min-w-32" onClick={handleReject} disabled={rejecting}>
+              {rejecting ? "Rejecting…" : "Reject"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:gap-4">
+        <div className="relative w-full sm:max-w-xs">
+          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search by doc no or employee…"
+            className="h-10 pl-9 pr-9"
+            aria-label="Search leave requests"
+          />
+          {search && (
+            <button
+              type="button"
+              onClick={() => setSearch("")}
+              aria-label="Clear search"
+              className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <X className="size-4" />
+            </button>
+          )}
+        </div>
+        {hasActiveFilters && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="text-muted-foreground hover:text-foreground"
+            onClick={() => { setPage(1); setStatusFilter(ALL_STATUS); setSearch("") }}
+          >
+            <X className="size-4" />
+            Clear filters
+          </Button>
+        )}
+        <div className="flex w-full flex-col gap-1.5 sm:ml-auto sm:max-w-52">
+          <label htmlFor="lv-filter-status" className="text-xs font-medium text-muted-foreground">Status</label>
+          <Select value={statusFilter} onValueChange={(v) => { setPage(1); setStatusFilter(v ?? ALL_STATUS) }}>
+            <SelectTrigger id="lv-filter-status" aria-label="Filter by status"><SelectValue placeholder="All statuses" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value={ALL_STATUS}>All statuses</SelectItem>
+              {STATUSES.map((s) => <SelectItem key={s} value={s}>{s}</SelectItem>)}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
      {error && <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>}
-      {!error && requests === null && <div className="flex flex-col gap-3">{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-14 w-full" />)}</div>}
+
+      {!error && requests === null && (
+        <div className="overflow-hidden rounded-xl border">
+          <div className="flex h-11 items-center gap-4 border-b bg-muted/20 px-4">
+            <Skeleton className="h-3.5 w-16" />
+            <Skeleton className="ml-auto h-3.5 w-16" />
+          </div>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-4 border-b px-4 py-4 last:border-b-0">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-4 w-10" />
+              <Skeleton className="h-5 w-16 rounded-full" />
+              <Skeleton className="ml-auto h-7 w-20" />
+            </div>
+          ))}
+        </div>
+      )}
+
      {!error && requests !== null && requests.length === 0 && (
-        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center"><p className="text-base text-muted-foreground">No leave requests yet.</p></div>
+        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center">
+          <p className="text-base text-muted-foreground">No leave requests yet.</p>
+        </div>
      )}
+
      {!error && requests !== null && requests.length > 0 && (
-        <Table className="text-base">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="h-12 px-3 text-sm">Doc No</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Employee</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Type</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Dates</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Days</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Status</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {requests.map((r) => (
-              <TableRow key={r.leaveRequestId}>
-                <TableCell className="px-3 py-3.5 font-medium">{r.docNo}</TableCell>
-                <TableCell className="px-3 py-3.5">{r.employeeName ?? "—"}</TableCell>
-                <TableCell className="px-3 py-3.5">{r.leaveTypeName ?? "—"}</TableCell>
-                <TableCell className="px-3 py-3.5">{new Date(r.startDate).toLocaleDateString()} – {new Date(r.endDate).toLocaleDateString()}</TableCell>
-                <TableCell className="px-3 py-3.5">{r.daysCount}</TableCell>
-                <TableCell className="px-3 py-3.5"><Badge variant="outline" className={cn("h-6 w-fit justify-center border-transparent px-2.5 text-sm", STATUS_STYLE[r.status])}>{r.status}</Badge></TableCell>
-                <TableCell className="px-3 py-3.5">
-                  {r.status === "Submitted" && (
-                    <div className="flex gap-1">
-                      <Button variant="ghost" size="sm" onClick={() => approve(r.leaveRequestId)}>Approve</Button>
-                      <Button variant="ghost" size="sm" onClick={() => reject(r.leaveRequestId)}>Reject</Button>
-                    </div>
-                  )}
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <div className="overflow-hidden rounded-xl border">
+          <div className="overflow-x-auto">
+            <Table className="text-base">
+              <TableHeader>
+                <TableRow className="hover:bg-transparent">
+                  <TableHead className="h-11 px-4 text-sm">Doc No</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Employee</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Type</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Dates</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Days</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Status</TableHead>
+                  <TableHead className="h-11 px-4 text-center text-sm">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {requests.map((r) => (
+                  <TableRow key={r.leaveRequestId} className="hover:bg-muted/20">
+                    <TableCell className="px-4 py-4 font-mono text-sm text-foreground">{r.docNo}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-foreground">{r.employeeName ?? "—"}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">{r.leaveTypeName ?? "—"}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">
+                      {new Date(r.startDate).toLocaleDateString()} – {new Date(r.endDate).toLocaleDateString()}
+                    </TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">{r.daysCount}</TableCell>
+                    <TableCell className="px-4 py-4">
+                      <Badge variant="outline" className={cn("h-5 w-fit justify-center border-transparent px-2 text-xs", STATUS_STYLE[r.status])}>
+                        {r.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="px-4 py-4">
+                      {r.status === "Submitted" ? (
+                        <div className="flex items-center justify-center gap-1">
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon-sm"
+                            className="text-success hover:bg-success/10"
+                            aria-label={`Approve ${r.docNo}`}
+                            title={`Approve ${r.docNo}`}
+                            disabled={actionPendingId === r.leaveRequestId}
+                            onClick={() => approve(r.leaveRequestId)}
+                          >
+                            <CheckCircle2 className="size-4" />
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon-sm"
+                            className="text-destructive hover:bg-destructive/10"
+                            aria-label={`Reject ${r.docNo}`}
+                            title={`Reject ${r.docNo}`}
+                            disabled={actionPendingId === r.leaveRequestId}
+                            onClick={() => openReject(r)}
+                          >
+                            <XCircle className="size-4" />
+                          </Button>
+                        </div>
+                      ) : (
+                        <span className="flex justify-center text-xs text-muted-foreground">—</span>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
      )}
-      {pagination && pagination.totalPages > 1 && (
-        <div className="flex items-center justify-between">
-          <p className="text-sm text-muted-foreground">Showing {(pagination.page - 1) * pagination.pageSize + 1}–{Math.min(pagination.page * pagination.pageSize, pagination.totalItems)} of {pagination.totalItems}</p>
+
+      {pagination && pagination.totalItems > 0 && (
+        <div className="flex flex-col-reverse items-center gap-3 sm:flex-row sm:justify-between">
+          <div className="flex items-center gap-3">
+            <p className="text-sm text-muted-foreground">
+              Showing <span className="font-medium text-foreground">{(pagination.page - 1) * pagination.pageSize + 1}</span>–
+              <span className="font-medium text-foreground">
+                {Math.min(pagination.page * pagination.pageSize, pagination.totalItems)}
+              </span>{" "}
+              of <span className="font-medium text-foreground">{pagination.totalItems}</span> leave requests
+            </p>
+            <label className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              Rows per page
+              <select
+                value={pageSize}
+                onChange={(e) => { setPage(1); setPageSize(Number(e.target.value)) }}
+                className="h-8 rounded-md border border-black bg-white px-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                aria-label="Rows per page"
+              >
+                {PAGE_SIZE_OPTIONS.map((size) => (
+                  <option key={size} value={size}>{size}</option>
+                ))}
+              </select>
+            </label>
+          </div>
          <div className="flex items-center gap-2">
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>Previous</Button>
-            <span className="text-sm text-muted-foreground">Page {pagination.page} of {pagination.totalPages}</span>
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page >= pagination.totalPages} onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}>Next</Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page <= 1}
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+            >
+              <ChevronLeft className="size-4" />
+              Previous
+            </Button>
+            <span className="min-w-20 text-center text-sm text-muted-foreground">
+              Page {pagination.page} of {pagination.totalPages}
+            </span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page >= pagination.totalPages}
+              onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}
+            >
+              Next
+              <ChevronRight className="size-4" />
+            </Button>
          </div>
        </div>
      )}
@@ -1,12 +1,17 @@
 "use client"

 import { useEffect, useState } from "react"
+import Link from "next/link"
 import { useParams } from "next/navigation"
+import { ArrowLeft, Download, Printer } from "lucide-react"

 import { payrollRunsApi } from "@/lib/api/payroll"
 import { errorMessage } from "@/lib/error-map"
-import { PayrollLineDetail } from "@/types/hrm"
+import { buildSimplePdf, downloadPdf, PdfLine } from "@/lib/simple-pdf"
+import { cn } from "@/lib/utils"
+import { PayrollLineDetail, PayrollRun } from "@/types/hrm"

+import { Button, buttonVariants } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"

 function money(n: number): string {
@@ -18,43 +23,119 @@ export default function PayrollLineDetailPage() {
  const runId = Number(params.id)
  const lineId = Number(params.lineId)

+  const [run, setRun] = useState<PayrollRun | null>(null)
  const [detail, setDetail] = useState<PayrollLineDetail | null>(null)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
-    payrollRunsApi.getLine(runId, lineId).then(setDetail).catch((err) => setError(errorMessage(err)))
+    Promise.all([payrollRunsApi.get(runId), payrollRunsApi.getLine(runId, lineId)])
+      .then(([r, d]) => { setRun(r); setDetail(d) })
+      .catch((err) => setError(errorMessage(err)))
  }, [runId, lineId])

  if (error) return <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>
-  if (!detail) return <div className="flex flex-col gap-3">{Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}</div>
+  if (!detail || !run) return <div className="flex flex-col gap-3">{Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}</div>

  const { line, components } = detail
  const earnings = components.filter((c) => c.componentCategory === "Earning")
  const deductions = components.filter((c) => c.componentCategory === "Deduction")
  const employerContributions = components.filter((c) => c.componentCategory === "EmployerContribution")
+  const period = `${run.periodMonth.toString().padStart(2, "0")}/${run.periodYear}`
+
+  function handleDownload() {
+    if (!run) return
+    const left = 56
+    const right = 556
+    const muted: [number, number, number] = [0.45, 0.45, 0.45]
+    const destructive: [number, number, number] = [0.7, 0.15, 0.15]
+    const lines: PdfLine[] = []
+    let y = 740
+
+    lines.push({ text: "Salary Breakdown", x: left, y, size: 18, bold: true })
+    y -= 22
+    lines.push({ text: `${line.employeeName ?? ""} (${line.employeeCode ?? ""})`, x: left, y, size: 11, color: muted })
+    lines.push({ text: `Period ${period}`, x: right - 90, y, size: 11, color: muted })
+    y -= 14
+    lines.push({ text: run.docNo, x: right - 90, y, size: 9, color: muted })
+    y -= 28
+
+    const row = (label: string, amount: number, opts: { bold?: boolean; size?: number; color?: [number, number, number] } = {}) => {
+      lines.push({ text: label, x: left, y, size: opts.size ?? 11, bold: opts.bold, color: opts.color })
+      lines.push({ text: money(amount), x: right - money(amount).length * 6, y, size: opts.size ?? 11, bold: opts.bold, color: opts.color })
+      y -= 18
+    }
+
+    earnings.forEach((c) => row(c.label, c.amount))
+    row("Gross Salary", line.grossSalary, { bold: true })
+    y -= 10
+    lines.push({ text: "Deductions", x: left, y, size: 10, bold: true, color: muted })
+    y -= 18
+    deductions.forEach((c) => row(c.label, c.amount, { color: destructive }))
+    row("Net Salary", line.netSalary, { bold: true, size: 13 })
+
+    if (employerContributions.length > 0) {
+      y -= 10
+      lines.push({ text: "Employer Contributions (informational — not deducted)", x: left, y, size: 9, bold: true, color: muted })
+      y -= 16
+      employerContributions.forEach((c) => row(c.label, c.amount, { size: 10, color: muted }))
+    }
+
+    y -= 20
+    lines.push({
+      text: `Present ${line.presentDays}   Absent ${line.absentDays}   Leave ${line.leaveDays}   OT ${line.otMinutesTotal} min   Late ${line.lateMinutesTotal} min`,
+      x: left, y, size: 9, color: muted,
+    })
+
+    const blob = buildSimplePdf(lines)
+    downloadPdf(blob, `salary-breakdown-${line.employeeCode ?? line.employeeId}-${period.replace("/", "-")}.pdf`)
+  }

  return (
-    <div className="mx-auto flex max-w-lg flex-col gap-6">
-      <div>
-        <h1 className="text-2xl font-bold text-foreground">Salary Breakdown</h1>
-        <p className="text-base text-muted-foreground">{line.employeeName} ({line.employeeCode})</p>
+    <div className="mx-auto flex w-full max-w-3xl flex-col gap-6">
+      <div className="flex flex-col gap-3 print:hidden sm:flex-row sm:items-center sm:justify-between">
+        <Link href={`/dashboard/hrm/payroll/${runId}`} className={cn(buttonVariants({ variant: "outline", size: "sm" }), "w-fit")}>
+          <ArrowLeft className="size-4" />
+          Back to payroll run
+        </Link>
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={handleDownload}>
+            <Download className="size-4" />
+            Download
+          </Button>
+          <Button size="sm" onClick={() => window.print()}>
+            <Printer className="size-4" />
+            Print
+          </Button>
+        </div>
      </div>

-      <div className="rounded-2xl border bg-card p-6 shadow-sm">
-        <table className="w-full text-base">
+      <div className="rounded-2xl border bg-card p-6 shadow-sm sm:p-8 print:rounded-none print:border-0 print:p-0 print:shadow-none">
+        <div className="flex items-start justify-between gap-4 border-b border-border pb-5">
+          <div>
+            <h1 className="text-2xl font-bold text-foreground">Salary Breakdown</h1>
+            <p className="mt-1 text-base text-muted-foreground">{line.employeeName} <span className="font-mono">({line.employeeCode})</span></p>
+          </div>
+          <div className="text-right">
+            <p className="text-sm text-muted-foreground">Period</p>
+            <p className="font-semibold text-foreground">{period}</p>
+            <p className="mt-1 text-xs text-muted-foreground">{run.docNo}</p>
+          </div>
+        </div>
+
+        <table className="mt-5 w-full text-base">
          <tbody>
            {earnings.map((c, i) => (
-              <tr key={i}><td className="py-1.5">{c.label}</td><td className="py-1.5 text-right">{money(c.amount)}</td></tr>
+              <tr key={i}><td className="py-1.5 text-muted-foreground">{c.label}</td><td className="py-1.5 text-right font-medium text-foreground">{money(c.amount)}</td></tr>
            ))}
-            <tr className="border-t font-semibold"><td className="py-2">Gross Salary</td><td className="py-2 text-right">{money(line.grossSalary)}</td></tr>
-            <tr><td className="pt-4 text-sm font-semibold text-muted-foreground" colSpan={2}>Deductions</td></tr>
+            <tr className="border-t border-border font-semibold text-foreground"><td className="py-2.5">Gross Salary</td><td className="py-2.5 text-right">{money(line.grossSalary)}</td></tr>
+            <tr><td className="pt-5 pb-1 text-sm font-semibold text-muted-foreground" colSpan={2}>Deductions</td></tr>
            {deductions.map((c, i) => (
-              <tr key={i}><td className="py-1.5">{c.label}</td><td className="py-1.5 text-right">{money(c.amount)}</td></tr>
+              <tr key={i}><td className="py-1.5 text-muted-foreground">{c.label}</td><td className="py-1.5 text-right font-medium text-destructive">−{money(c.amount)}</td></tr>
            ))}
-            <tr className="border-t font-bold"><td className="py-2">Net Salary</td><td className="py-2 text-right">{money(line.netSalary)}</td></tr>
+            <tr className="border-t border-border text-lg font-bold text-foreground"><td className="py-3">Net Salary</td><td className="py-3 text-right">{money(line.netSalary)}</td></tr>
            {employerContributions.length > 0 && (
              <>
-                <tr><td className="pt-4 text-sm font-semibold text-muted-foreground" colSpan={2}>Employer Contributions (informational — not deducted)</td></tr>
+                <tr><td className="pt-5 pb-1 text-sm font-semibold text-muted-foreground" colSpan={2}>Employer Contributions (informational — not deducted)</td></tr>
                {employerContributions.map((c, i) => (
                  <tr key={i} className="text-muted-foreground"><td className="py-1.5">{c.label}</td><td className="py-1.5 text-right">{money(c.amount)}</td></tr>
                ))}
@@ -64,7 +145,7 @@ export default function PayrollLineDetailPage() {
        </table>
      </div>

-      <div className="grid grid-cols-2 gap-3 text-sm text-muted-foreground sm:grid-cols-3">
+      <div className="grid grid-cols-2 gap-3 rounded-xl border border-dashed p-4 text-sm text-muted-foreground sm:grid-cols-5 print:break-inside-avoid">
        <div>Present days: {line.presentDays}</div>
        <div>Absent days: {line.absentDays}</div>
        <div>Leave days: {line.leaveDays}</div>
@@ -3,13 +3,14 @@
 import { useEffect, useState } from "react"
 import Link from "next/link"
 import { useParams } from "next/navigation"
+import { ChevronLeft, ChevronRight, Eye, FileText, Search, X } from "lucide-react"

 import { payrollRunsApi, payslipViewUrl } from "@/lib/api/payroll"
 import { errorMessage } from "@/lib/error-map"
 import { cn } from "@/lib/utils"
 import { PayrollLine, PayrollRun, Payslip } from "@/types/hrm"

-import { Button } from "@/components/ui/button"
+import { Button, buttonVariants } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
@@ -18,6 +19,8 @@ import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { toast } from "@/components/ui/toast"

+const PAGE_SIZE_OPTIONS = [5, 10, 15, 20]
+
 function money(n: number): string {
  return n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
 }
@@ -33,6 +36,9 @@ export default function PayrollRunDetailPage() {
  const [busy, setBusy] = useState(false)
  const [unlockOpen, setUnlockOpen] = useState(false)
  const [unlockReason, setUnlockReason] = useState("")
+  const [search, setSearch] = useState("")
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(5)

  function load() {
    Promise.all([payrollRunsApi.get(runId), payrollRunsApi.listLines(runId)])
@@ -86,6 +92,15 @@ export default function PayrollRunDetailPage() {
  if (error) return <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>
  if (!run || !lines) return <div className="flex flex-col gap-3">{Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-14 w-full" />)}</div>

+  const filteredLines = lines.filter((l) => {
+    const term = search.trim().toLowerCase()
+    if (!term) return true
+    return (l.employeeName ?? "").toLowerCase().includes(term) || (l.employeeCode ?? "").toLowerCase().includes(term)
+  })
+  const totalPages = Math.max(1, Math.ceil(filteredLines.length / pageSize))
+  const currentPage = Math.min(page, totalPages)
+  const pagedLines = filteredLines.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
@@ -128,43 +143,150 @@ export default function PayrollRunDetailPage() {
        <div className="rounded-xl border bg-card p-4"><p className="text-sm text-muted-foreground">Deductions</p><p className="text-xl font-bold">{money(run.totalGross - run.totalNet)}</p></div>
      </div>

-      <Table className="text-base">
-        <TableHeader>
-          <TableRow>
-            <TableHead className="h-12 px-3 text-sm">Employee</TableHead>
-            <TableHead className="h-12 px-3 text-sm">Basic</TableHead>
-            <TableHead className="h-12 px-3 text-sm">OT</TableHead>
-            <TableHead className="h-12 px-3 text-sm">Allowances</TableHead>
-            <TableHead className="h-12 px-3 text-sm">Deductions</TableHead>
-            <TableHead className="h-12 px-3 text-sm">Net Salary</TableHead>
-            <TableHead className="h-12 px-3 text-sm">Details</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {lines.map((l) => {
-            const totalDeductions = l.grossSalary - l.netSalary
-            const payslip = payslips.find((p) => p.payrollLineId === l.payrollLineId)
-            return (
-              <TableRow key={l.payrollLineId}>
-                <TableCell className="px-3 py-3.5 font-medium">{l.employeeName} <span className="text-muted-foreground">({l.employeeCode})</span></TableCell>
-                <TableCell className="px-3 py-3.5">{money(l.basicSalary)}</TableCell>
-                <TableCell className="px-3 py-3.5">{money(l.overtimeAmount)}</TableCell>
-                <TableCell className="px-3 py-3.5">{money(l.totalAllowances)}</TableCell>
-                <TableCell className="px-3 py-3.5">{money(totalDeductions)}</TableCell>
-                <TableCell className="px-3 py-3.5 font-semibold">{money(l.netSalary)}</TableCell>
-                <TableCell className="px-3 py-3.5">
-                  <div className="flex items-center gap-3">
-                    <Link href={`/dashboard/hrm/payroll/${runId}/lines/${l.payrollLineId}`} className="text-primary underline underline-offset-2">Breakdown</Link>
-                    {payslip && (
-                      <a href={payslipViewUrl(payslip.payslipId)} target="_blank" rel="noreferrer" className={cn("text-primary underline underline-offset-2")}>Payslip</a>
-                    )}
-                  </div>
-                </TableCell>
-              </TableRow>
-            )
-          })}
-        </TableBody>
-      </Table>
+      <div className="flex items-center gap-2.5">
+        <h2 className="text-lg font-semibold text-foreground">Payroll lines</h2>
+        <span className="rounded-full border bg-white px-2 py-0.5 text-xs font-medium text-muted-foreground">{lines.length}</span>
+      </div>
+
+      <div className="relative w-full sm:max-w-xs">
+        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          value={search}
+          onChange={(e) => { setSearch(e.target.value); setPage(1) }}
+          placeholder="Search by name or employee code…"
+          className="h-10 pl-9 pr-9"
+          aria-label="Search payroll lines"
+        />
+        {search && (
+          <button
+            type="button"
+            onClick={() => { setSearch(""); setPage(1) }}
+            aria-label="Clear search"
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>
+
+      {filteredLines.length === 0 ? (
+        <div className="flex flex-col items-center gap-3 rounded-xl border border-dashed py-16 text-center">
+          <Search className="size-10 text-muted-foreground" />
+          <p className="text-base text-muted-foreground">
+            {search ? <>No lines match &quot;{search}&quot;.</> : "No payroll lines yet."}
+          </p>
+        </div>
+      ) : (
+        <div className="overflow-hidden rounded-xl border">
+          <div className="overflow-x-auto">
+            <Table className="text-base">
+              <TableHeader>
+                <TableRow className="hover:bg-transparent">
+                  <TableHead className="h-11 px-4 text-sm">Employee</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Basic</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">OT</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Allowances</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Deductions</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Net Salary</TableHead>
+                  <TableHead className="h-11 w-28 px-4 text-center text-sm">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {pagedLines.map((l) => {
+                  const totalDeductions = l.grossSalary - l.netSalary
+                  const payslip = payslips.find((p) => p.payrollLineId === l.payrollLineId)
+                  return (
+                    <TableRow key={l.payrollLineId} className="hover:bg-muted/20">
+                      <TableCell className="px-4 py-3.5 font-medium text-foreground">
+                        {l.employeeName} <span className="font-mono text-xs text-muted-foreground">({l.employeeCode})</span>
+                      </TableCell>
+                      <TableCell className="px-4 py-3.5 text-muted-foreground">{money(l.basicSalary)}</TableCell>
+                      <TableCell className="px-4 py-3.5 text-muted-foreground">{money(l.overtimeAmount)}</TableCell>
+                      <TableCell className="px-4 py-3.5 text-muted-foreground">{money(l.totalAllowances)}</TableCell>
+                      <TableCell className="px-4 py-3.5 text-muted-foreground">{money(totalDeductions)}</TableCell>
+                      <TableCell className="px-4 py-3.5 font-semibold text-foreground">{money(l.netSalary)}</TableCell>
+                      <TableCell className="px-4 py-3.5">
+                        <div className="flex items-center justify-center gap-1">
+                          <Link
+                            href={`/dashboard/hrm/payroll/${runId}/lines/${l.payrollLineId}`}
+                            className={cn(buttonVariants({ variant: "ghost", size: "icon-sm" }))}
+                            aria-label={`View breakdown for ${l.employeeName}`}
+                            title="View breakdown"
+                          >
+                            <Eye className="size-4" />
+                          </Link>
+                          {payslip && (
+                            <a
+                              href={payslipViewUrl(payslip.payslipId)}
+                              target="_blank"
+                              rel="noreferrer"
+                              className={cn(buttonVariants({ variant: "ghost", size: "icon-sm" }))}
+                              aria-label={`View payslip for ${l.employeeName}`}
+                              title="View payslip"
+                            >
+                              <FileText className="size-4" />
+                            </a>
+                          )}
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  )
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      )}
+
+      {filteredLines.length > 0 && (
+        <div className="flex flex-col-reverse items-center gap-3 sm:flex-row sm:justify-between">
+          <div className="flex items-center gap-3">
+            <p className="text-sm text-muted-foreground">
+              Showing <span className="font-medium text-foreground">{(currentPage - 1) * pageSize + 1}</span>–
+              <span className="font-medium text-foreground">{Math.min(currentPage * pageSize, filteredLines.length)}</span>{" "}
+              of <span className="font-medium text-foreground">{filteredLines.length}</span> lines
+            </p>
+            <label className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              Rows per page
+              <select
+                value={pageSize}
+                onChange={(e) => { setPage(1); setPageSize(Number(e.target.value)) }}
+                className="h-8 rounded-md border border-black bg-white px-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                aria-label="Rows per page"
+              >
+                {PAGE_SIZE_OPTIONS.map((size) => (
+                  <option key={size} value={size}>{size}</option>
+                ))}
+              </select>
+            </label>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={currentPage <= 1}
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+            >
+              <ChevronLeft className="size-4" />
+              Previous
+            </Button>
+            <span className="min-w-20 text-center text-sm text-muted-foreground">
+              Page {currentPage} of {totalPages}
+            </span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={currentPage >= totalPages}
+              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+            >
+              Next
+              <ChevronRight className="size-4" />
+            </Button>
+          </div>
+        </div>
+      )}
    </div>
  )
 }
@@ -2,7 +2,7 @@

 import { useEffect, useState } from "react"
 import Link from "next/link"
-import { Eye, Plus } from "lucide-react"
+import { ChevronLeft, ChevronRight, Eye, Plus } from "lucide-react"

 import { payrollRunsApi } from "@/lib/api/payroll"
 import { errorMessage } from "@/lib/error-map"
@@ -15,11 +15,14 @@ import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { toast } from "@/components/ui/toast"

-const PAGE_SIZE = 10
+const PAGE_SIZE_OPTIONS = [5, 10, 25, 50]
+const STATUSES: PayrollRunStatus[] = ["Draft", "Approved", "Locked"]
+const ALL_STATUS = "__all__"

 const STATUS_STYLE: Record<PayrollRunStatus, string> = {
  Draft: "bg-muted text-muted-foreground",
@@ -32,6 +35,8 @@ export default function PayrollRunsPage() {
  const [pagination, setPagination] = useState<PaginationMeta | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(5)
+  const [statusFilter, setStatusFilter] = useState(ALL_STATUS)

  const [open, setOpen] = useState(false)
  const now = new Date()
@@ -41,11 +46,12 @@ export default function PayrollRunsPage() {

  function load() {
    payrollRunsApi
-      .list({ page, pageSize: PAGE_SIZE })
+      .list({ page, pageSize, status: statusFilter === ALL_STATUS ? undefined : (statusFilter as PayrollRunStatus) })
      .then((res) => { setRuns(res.items); setPagination(res.pagination) })
      .catch((err) => setError(errorMessage(err)))
  }
-  useEffect(load, [page])
+
+  useEffect(load, [page, pageSize, statusFilter]) // eslint-disable-line react-hooks/exhaustive-deps

  async function handleGenerate() {
    setSubmitting(true)
@@ -65,7 +71,14 @@ export default function PayrollRunsPage() {
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
-          <h1 className="text-2xl font-bold text-foreground">Payroll</h1>
+          <div className="flex items-center gap-2.5">
+            <h1 className="text-2xl font-bold text-foreground">Payroll</h1>
+            {pagination && (
+              <span className="rounded-full border bg-white px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                {pagination.totalItems}
+              </span>
+            )}
+          </div>
          <p className="text-base text-muted-foreground">Generate → Review → Approve → Lock → Payslips.</p>
        </div>
        <Dialog open={open} onOpenChange={setOpen}>
@@ -89,48 +102,140 @@ export default function PayrollRunsPage() {
        </Dialog>
      </div>

+      <div className="w-full sm:max-w-xs">
+        <Select value={statusFilter} onValueChange={(v) => { setPage(1); setStatusFilter(v ?? ALL_STATUS) }}>
+          <SelectTrigger aria-label="Filter by status"><SelectValue placeholder="All statuses" /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value={ALL_STATUS}>All statuses</SelectItem>
+            {STATUSES.map((s) => <SelectItem key={s} value={s}>{s}</SelectItem>)}
+          </SelectContent>
+        </Select>
+      </div>
+
      {error && <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>}
-      {!error && runs === null && <div className="flex flex-col gap-3">{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-14 w-full" />)}</div>}
+
+      {!error && runs === null && (
+        <div className="overflow-hidden rounded-xl border">
+          <div className="flex h-11 items-center gap-4 border-b bg-muted/20 px-4">
+            <Skeleton className="h-3.5 w-16" />
+            <Skeleton className="ml-auto h-3.5 w-16" />
+          </div>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-4 border-b px-4 py-4 last:border-b-0">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-4 w-16" />
+              <Skeleton className="h-4 w-12" />
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-5 w-16 rounded-full" />
+              <Skeleton className="ml-auto h-7 w-7" />
+            </div>
+          ))}
+        </div>
+      )}
+
      {!error && runs !== null && runs.length === 0 && (
-        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center"><p className="text-base text-muted-foreground">No payroll runs yet.</p></div>
+        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center">
+          <p className="text-base text-muted-foreground">No payroll runs yet.</p>
+        </div>
      )}
+
      {!error && runs !== null && runs.length > 0 && (
-        <Table className="text-base">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="h-12 px-3 text-sm">Doc No</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Period</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Employees</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Gross</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Net</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Status</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {runs.map((r) => (
-              <TableRow key={r.payrollRunId}>
-                <TableCell className="px-3 py-3.5 font-medium">{r.docNo}</TableCell>
-                <TableCell className="px-3 py-3.5">{r.periodMonth.toString().padStart(2, "0")}/{r.periodYear}</TableCell>
-                <TableCell className="px-3 py-3.5">{r.employeeCount}</TableCell>
-                <TableCell className="px-3 py-3.5">{r.totalGross.toLocaleString(undefined, { minimumFractionDigits: 2 })}</TableCell>
-                <TableCell className="px-3 py-3.5">{r.totalNet.toLocaleString(undefined, { minimumFractionDigits: 2 })}</TableCell>
-                <TableCell className="px-3 py-3.5"><Badge variant="outline" className={cn("h-6 w-fit justify-center border-transparent px-2.5 text-sm", STATUS_STYLE[r.status])}>{r.status}</Badge></TableCell>
-                <TableCell className="px-3 py-3.5">
-                  <Link href={`/dashboard/hrm/payroll/${r.payrollRunId}`} className={cn(buttonVariants({ variant: "ghost", size: "icon-sm" }))} aria-label="View"><Eye className="size-4" /></Link>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <div className="overflow-hidden rounded-xl border">
+          <div className="overflow-x-auto">
+            <Table className="text-base">
+              <TableHeader>
+                <TableRow className="hover:bg-transparent">
+                  <TableHead className="h-11 px-4 text-sm">Doc No</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Period</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Employees</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Gross</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Net</TableHead>
+                  <TableHead className="h-11 px-4 text-sm">Status</TableHead>
+                  <TableHead className="h-11 px-4 text-center text-sm">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {runs.map((r) => (
+                  <TableRow key={r.payrollRunId} className="hover:bg-muted/20">
+                    <TableCell className="px-4 py-4 font-mono text-sm text-foreground">{r.docNo}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-foreground">{r.periodMonth.toString().padStart(2, "0")}/{r.periodYear}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">{r.employeeCount}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">{r.totalGross.toLocaleString(undefined, { minimumFractionDigits: 2 })}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">{r.totalNet.toLocaleString(undefined, { minimumFractionDigits: 2 })}</TableCell>
+                    <TableCell className="px-4 py-4">
+                      <Badge variant="outline" className={cn("h-5 w-fit justify-center border-transparent px-2 text-xs", STATUS_STYLE[r.status])}>
+                        {r.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="px-4 py-4">
+                      <div className="flex items-center justify-center">
+                        <Link
+                          href={`/dashboard/hrm/payroll/${r.payrollRunId}`}
+                          className={cn(buttonVariants({ variant: "ghost", size: "icon-sm" }))}
+                          aria-label={`View ${r.docNo}`}
+                          title={`View ${r.docNo}`}
+                        >
+                          <Eye className="size-4" />
+                        </Link>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
      )}
-      {pagination && pagination.totalPages > 1 && (
-        <div className="flex items-center justify-between">
-          <p className="text-sm text-muted-foreground">Showing {(pagination.page - 1) * pagination.pageSize + 1}–{Math.min(pagination.page * pagination.pageSize, pagination.totalItems)} of {pagination.totalItems}</p>
+
+      {pagination && pagination.totalItems > 0 && (
+        <div className="flex flex-col-reverse items-center gap-3 sm:flex-row sm:justify-between">
+          <div className="flex items-center gap-3">
+            <p className="text-sm text-muted-foreground">
+              Showing <span className="font-medium text-foreground">{(pagination.page - 1) * pagination.pageSize + 1}</span>–
+              <span className="font-medium text-foreground">
+                {Math.min(pagination.page * pagination.pageSize, pagination.totalItems)}
+              </span>{" "}
+              of <span className="font-medium text-foreground">{pagination.totalItems}</span> payroll runs
+            </p>
+            <label className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              Rows per page
+              <select
+                value={pageSize}
+                onChange={(e) => { setPage(1); setPageSize(Number(e.target.value)) }}
+                className="h-8 rounded-md border border-black bg-white px-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                aria-label="Rows per page"
+              >
+                {PAGE_SIZE_OPTIONS.map((size) => (
+                  <option key={size} value={size}>{size}</option>
+                ))}
+              </select>
+            </label>
+          </div>
          <div className="flex items-center gap-2">
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>Previous</Button>
-            <span className="text-sm text-muted-foreground">Page {pagination.page} of {pagination.totalPages}</span>
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page >= pagination.totalPages} onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}>Next</Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page <= 1}
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+            >
+              <ChevronLeft className="size-4" />
+              Previous
+            </Button>
+            <span className="min-w-20 text-center text-sm text-muted-foreground">
+              Page {pagination.page} of {pagination.totalPages}
+            </span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page >= pagination.totalPages}
+              onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}
+            >
+              Next
+              <ChevronRight className="size-4" />
+            </Button>
          </div>
        </div>
      )}
@@ -0,0 +1,7 @@
+"use client"
+
+import { BranchDetailPage } from "@/components/settings/BranchDetailPage"
+
+export default function BranchDetail() {
+  return <BranchDetailPage />
+}
@@ -1,7 +1,7 @@
 "use client"

 import { useEffect, useState } from "react"
-import { Plus } from "lucide-react"
+import { CheckCircle2, ChevronLeft, ChevronRight, Pencil, Plus, Search, Trash2, XCircle, X } from "lucide-react"

 import { departmentsApi, branchesHrmApi } from "@/lib/api/hrm-masters"
 import { errorMessage } from "@/lib/error-map"
@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils"
 import { PaginationMeta } from "@/types/common"
 import { Branch, Department } from "@/types/hrm"

+import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/ui/alert-dialog"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
@@ -19,7 +20,7 @@ import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { toast } from "@/components/ui/toast"

-const PAGE_SIZE = 10
+const PAGE_SIZE_OPTIONS = [5, 10, 25, 50]
 const NONE = "__none__"

 export default function DepartmentsPage() {
@@ -28,6 +29,10 @@ export default function DepartmentsPage() {
  const [branches, setBranches] = useState<Branch[]>([])
  const [error, setError] = useState<string | null>(null)
  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(5)
+  const [search, setSearch] = useState("")
+  const [debouncedSearch, setDebouncedSearch] = useState("")
+  const [actionPendingId, setActionPendingId] = useState<number | null>(null)

  const [open, setOpen] = useState(false)
  const [code, setCode] = useState("")
@@ -37,9 +42,18 @@ export default function DepartmentsPage() {
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [submitting, setSubmitting] = useState(false)

+  const [editItem, setEditItem] = useState<Department | null>(null)
+  const [editEtag, setEditEtag] = useState<string | null>(null)
+  const [editName, setEditName] = useState("")
+  const [editParentDepartmentId, setEditParentDepartmentId] = useState(NONE)
+  const [editBranchId, setEditBranchId] = useState(NONE)
+  const [editErrors, setEditErrors] = useState<Record<string, string>>({})
+  const [editSubmitting, setEditSubmitting] = useState(false)
+  const [editLoading, setEditLoading] = useState(false)
+
  function load() {
    departmentsApi
-      .list({ page, pageSize: PAGE_SIZE })
+      .list({ page, pageSize, q: debouncedSearch || undefined })
      .then((res) => {
        setItems(res.items)
        setPagination(res.pagination)
@@ -47,7 +61,16 @@ export default function DepartmentsPage() {
      .catch((err) => setError(errorMessage(err)))
  }

-  useEffect(load, [page])
+  useEffect(load, [page, pageSize, debouncedSearch]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      setPage(1)
+      setDebouncedSearch(search.trim())
+    }, 300)
+    return () => clearTimeout(t)
+  }, [search])
+
  useEffect(() => {
    branchesHrmApi.list({ pageSize: 200, status: "Active" }).then((res) => setBranches(res.items)).catch(() => setBranches([]))
  }, [])
@@ -81,12 +104,71 @@ export default function DepartmentsPage() {
    }
  }

+  async function openEdit(item: Department) {
+    setEditItem(item)
+    setEditName(item.name)
+    setEditParentDepartmentId(item.parentDepartmentId ? String(item.parentDepartmentId) : NONE)
+    setEditBranchId(item.branchId ? String(item.branchId) : NONE)
+    setEditErrors({})
+    setEditEtag(null)
+    setEditLoading(true)
+    try {
+      const res = await departmentsApi.get(item.departmentId)
+      setEditEtag(res.etag)
+    } catch (err) {
+      toast.error("Could not load department", errorMessage(err))
+      setEditItem(null)
+    } finally {
+      setEditLoading(false)
+    }
+  }
+
+  async function handleEditSave() {
+    if (!editItem || !editEtag) return
+    const nextErrors: Record<string, string> = {}
+    if (!editName.trim()) nextErrors.name = "Name is required"
+    setEditErrors(nextErrors)
+    if (Object.keys(nextErrors).length > 0) return
+
+    setEditSubmitting(true)
+    try {
+      await departmentsApi.update(editItem.departmentId, {
+        name: editName.trim(),
+        parentDepartmentId: editParentDepartmentId === NONE ? null : Number(editParentDepartmentId),
+        branchId: editBranchId === NONE ? null : Number(editBranchId),
+      }, editEtag)
+      toast.success("Department updated")
+      setEditItem(null)
+      load()
+    } catch (err) {
+      toast.error("Could not save", errorMessage(err))
+    } finally {
+      setEditSubmitting(false)
+    }
+  }
+
  async function toggleStatus(item: Department) {
+    setActionPendingId(item.departmentId)
    try {
      await departmentsApi.updateStatus(item.departmentId, item.status === "Active" ? "Inactive" : "Active")
      load()
    } catch (err) {
      toast.error("Could not update status", errorMessage(err))
+    } finally {
+      setActionPendingId(null)
+    }
+  }
+
+  async function handleDelete(item: Department) {
+    setActionPendingId(item.departmentId)
+    try {
+      await departmentsApi.remove(item.departmentId)
+      toast.success("Department deleted")
+      load()
+    } catch (err) {
+      toast.error("Could not delete department", errorMessage(err))
+    } finally {
+      setActionPendingId(null)
    }
  }

@@ -94,7 +176,14 @@ export default function DepartmentsPage() {
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
-          <h1 className="text-2xl font-bold text-foreground">Departments</h1>
+          <div className="flex items-center gap-2.5">
+            <h1 className="text-2xl font-bold text-foreground">Departments</h1>
+            {pagination && (
+              <span className="rounded-full border bg-white px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                {pagination.totalItems}
+              </span>
+            )}
+          </div>
          <p className="text-base text-muted-foreground">Org structure — unlimited nesting, optionally scoped to a branch.</p>
        </div>
        <Dialog open={open} onOpenChange={setOpen}>
@@ -148,48 +237,268 @@ export default function DepartmentsPage() {
        </Dialog>
      </div>

+      <Dialog open={!!editItem} onOpenChange={(v) => !v && setEditItem(null)}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader className="items-center text-center">
+            <DialogTitle>Edit Department</DialogTitle>
+            <DialogDescription>Code can&apos;t be changed after creation.</DialogDescription>
+          </DialogHeader>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="d-edit-code">Code</FieldLabel>
+              <Input id="d-edit-code" value={editItem?.code ?? ""} disabled />
+            </Field>
+            <Field data-invalid={!!editErrors.name}>
+              <FieldLabel htmlFor="d-edit-name">Name</FieldLabel>
+              <Input
+                id="d-edit-name"
+                value={editName}
+                onChange={(e) => setEditName(e.target.value)}
+                aria-invalid={!!editErrors.name}
+                disabled={editLoading}
+              />
+              <FieldError errors={[editErrors.name ? { message: editErrors.name } : undefined]} />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="d-edit-parent">Parent department (optional)</FieldLabel>
+              <Select value={editParentDepartmentId} onValueChange={(v) => setEditParentDepartmentId(v ?? NONE)} disabled={editLoading}>
+                <SelectTrigger id="d-edit-parent"><SelectValue placeholder="None" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={NONE}>None</SelectItem>
+                  {(items ?? []).filter((d) => d.departmentId !== editItem?.departmentId).map((d) => (
+                    <SelectItem key={d.departmentId} value={String(d.departmentId)}>{d.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="d-edit-branch">Branch (optional)</FieldLabel>
+              <Select value={editBranchId} onValueChange={(v) => setEditBranchId(v ?? NONE)} disabled={editLoading}>
+                <SelectTrigger id="d-edit-branch"><SelectValue placeholder="None" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={NONE}>None</SelectItem>
+                  {branches.map((b) => (
+                    <SelectItem key={b.branchId} value={String(b.branchId)}>{b.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Field>
+          </FieldGroup>
+          <div className="flex justify-center gap-3 pt-2">
+            <Button variant="outline" className="min-w-32" onClick={() => setEditItem(null)} disabled={editSubmitting}>Cancel</Button>
+            <Button className="min-w-32" onClick={handleEditSave} disabled={editSubmitting || editLoading}>
+              {editSubmitting ? "Saving…" : "Save"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <div className="relative w-full sm:max-w-xs">
+        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search by code or name…"
+          className="h-10 pl-9 pr-9"
+          aria-label="Search departments"
+        />
+        {search && (
+          <button
+            type="button"
+            onClick={() => setSearch("")}
+            aria-label="Clear search"
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>
+
      {error && <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>}
-      {!error && items === null && <div className="flex flex-col gap-3">{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-14 w-full" />)}</div>}
-      {!error && items !== null && items.length === 0 && (
+
+      {!error && items === null && (
+        <div className="overflow-hidden rounded-xl border">
+          <div className="flex h-11 items-center gap-4 border-b bg-muted/20 px-4">
+            <Skeleton className="h-3.5 w-16" />
+            <Skeleton className="ml-auto h-3.5 w-16" />
+          </div>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-3 border-b px-4 py-4 last:border-b-0">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-5 w-16 rounded-full" />
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="ml-auto h-7 w-20" />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!error && items !== null && items.length === 0 && debouncedSearch && (
+        <div className="flex flex-col items-center gap-3 rounded-xl border border-dashed py-16 text-center">
+          <Search className="size-10 text-muted-foreground" />
+          <div>
+            <p className="text-base font-medium text-foreground">No departments match &quot;{debouncedSearch}&quot;</p>
+            <p className="text-sm text-muted-foreground">Try a different code or name.</p>
+          </div>
+          <Button variant="outline" size="sm" onClick={() => setSearch("")}>
+            Clear search
+          </Button>
+        </div>
+      )}
+
+      {!error && items !== null && items.length === 0 && !debouncedSearch && (
        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center">
          <p className="text-base text-muted-foreground">No departments yet.</p>
        </div>
      )}
+
      {!error && items !== null && items.length > 0 && (
-        <Table className="text-base">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="h-12 px-3 text-sm">Code</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Name</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Parent</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Status</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {items.map((d) => (
-              <TableRow key={d.departmentId}>
-                <TableCell className="px-3 py-3.5 font-medium">{d.code}</TableCell>
-                <TableCell className="px-3 py-3.5">{d.name}</TableCell>
-                <TableCell className="px-3 py-3.5">{items.find((p) => p.departmentId === d.parentDepartmentId)?.name ?? "—"}</TableCell>
-                <TableCell className="px-3 py-3.5">
-                  <Badge variant="outline" className={cn("h-6 w-fit justify-center border-transparent px-2.5 text-sm", d.status === "Active" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground")}>{d.status}</Badge>
-                </TableCell>
-                <TableCell className="px-3 py-3.5">
-                  <Button variant="ghost" size="sm" onClick={() => toggleStatus(d)}>{d.status === "Active" ? "Deactivate" : "Activate"}</Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <div className="overflow-hidden rounded-xl border">
+          <div className="overflow-x-auto">
+            <Table className="table-fixed text-base">
+              <TableHeader>
+                <TableRow className="hover:bg-transparent">
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Code</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Name</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Parent</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Status</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Created</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-center text-sm">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {items.map((d) => (
+                  <TableRow key={d.departmentId} className="group align-top hover:bg-muted/20">
+                    <TableCell className="px-4 py-4 font-mono text-sm text-foreground">{d.code}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-foreground">{d.name}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">
+                      {items.find((p) => p.departmentId === d.parentDepartmentId)?.name ?? "—"}
+                    </TableCell>
+                    <TableCell className="px-4 py-4">
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          "h-5 w-fit justify-center bg-white px-2 text-xs",
+                          d.status === "Active" ? "border-success/40 text-success" : "border-input text-muted-foreground"
+                        )}
+                      >
+                        {d.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">
+                      {new Date(d.createdAt).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })}
+                    </TableCell>
+                    <TableCell className="px-4 py-4">
+                      <div className="flex items-center justify-center gap-1">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          aria-label={`Edit ${d.name}`}
+                          title={`Edit ${d.name}`}
+                          onClick={() => openEdit(d)}
+                        >
+                          <Pencil className="size-4" />
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          className={cn(
+                            d.status === "Active"
+                              ? "text-destructive hover:bg-destructive/10"
+                              : "text-success hover:bg-success/10"
+                          )}
+                          aria-label={d.status === "Active" ? `Deactivate ${d.name}` : `Activate ${d.name}`}
+                          title={d.status === "Active" ? `Deactivate ${d.name}` : `Activate ${d.name}`}
+                          disabled={actionPendingId === d.departmentId}
+                          onClick={() => toggleStatus(d)}
+                        >
+                          {d.status === "Active" ? <XCircle className="size-4" /> : <CheckCircle2 className="size-4" />}
+                        </Button>
+                        <AlertDialog>
+                          <AlertDialogTrigger
+                            render={
+                              <Button
+                                variant="ghost"
+                                size="icon-sm"
+                                className="text-destructive hover:bg-destructive/10 disabled:pointer-events-auto disabled:cursor-not-allowed"
+                                aria-label={`Delete ${d.name}`}
+                                title={`Delete ${d.name}`}
+                                disabled={actionPendingId === d.departmentId}
+                              />
+                            }
+                          >
+                            <Trash2 className="size-4" />
+                          </AlertDialogTrigger>
+                          <AlertDialogContent
+                            variant="destructive"
+                            title={`Delete ${d.name}?`}
+                            description="This permanently removes this department. This cannot be undone. Blocked if it has sub-departments or employees assigned — deactivate it instead in that case."
+                            confirmLabel="Delete"
+                            onConfirm={() => handleDelete(d)}
+                          />
+                        </AlertDialog>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
      )}
-      {pagination && pagination.totalPages > 1 && (
-        <div className="flex items-center justify-between">
-          <p className="text-sm text-muted-foreground">Showing {(pagination.page - 1) * pagination.pageSize + 1}–{Math.min(pagination.page * pagination.pageSize, pagination.totalItems)} of {pagination.totalItems}</p>
+
+      {pagination && pagination.totalItems > 0 && (
+        <div className="flex flex-col-reverse items-center gap-3 sm:flex-row sm:justify-between">
+          <div className="flex items-center gap-3">
+            <p className="text-sm text-muted-foreground">
+              Showing <span className="font-medium text-foreground">{(pagination.page - 1) * pagination.pageSize + 1}</span>–
+              <span className="font-medium text-foreground">
+                {Math.min(pagination.page * pagination.pageSize, pagination.totalItems)}
+              </span>{" "}
+              of <span className="font-medium text-foreground">{pagination.totalItems}</span> departments
+            </p>
+            <label className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              Rows per page
+              <select
+                value={pageSize}
+                onChange={(e) => { setPage(1); setPageSize(Number(e.target.value)) }}
+                className="h-8 rounded-md border border-black bg-white px-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                aria-label="Rows per page"
+              >
+                {PAGE_SIZE_OPTIONS.map((size) => (
+                  <option key={size} value={size}>{size}</option>
+                ))}
+              </select>
+            </label>
+          </div>
          <div className="flex items-center gap-2">
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>Previous</Button>
-            <span className="text-sm text-muted-foreground">Page {pagination.page} of {pagination.totalPages}</span>
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page >= pagination.totalPages} onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}>Next</Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page <= 1}
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+            >
+              <ChevronLeft className="size-4" />
+              Previous
+            </Button>
+            <span className="min-w-20 text-center text-sm text-muted-foreground">
+              Page {pagination.page} of {pagination.totalPages}
+            </span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page >= pagination.totalPages}
+              onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}
+            >
+              Next
+              <ChevronRight className="size-4" />
+            </Button>
          </div>
        </div>
      )}
@@ -1,7 +1,7 @@
 "use client"

 import { useEffect, useState } from "react"
-import { Plus } from "lucide-react"
+import { CheckCircle2, ChevronLeft, ChevronRight, Pencil, Plus, Search, Trash2, XCircle, X } from "lucide-react"

 import { hrDocumentTypesApi } from "@/lib/api/hrm-masters"
 import { errorMessage } from "@/lib/error-map"
@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils"
 import { PaginationMeta } from "@/types/common"
 import { HrDocumentCategory, HrDocumentType } from "@/types/hrm"

+import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/ui/alert-dialog"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
@@ -20,7 +21,7 @@ import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { toast } from "@/components/ui/toast"

-const PAGE_SIZE = 10
+const PAGE_SIZE_OPTIONS = [5, 10, 25, 50]
 const CATEGORIES: HrDocumentCategory[] = ["Identity", "Educational", "Contract", "Certification", "Statutory", "Other"]

 export default function DocumentTypesPage() {
@@ -28,6 +29,10 @@ export default function DocumentTypesPage() {
  const [pagination, setPagination] = useState<PaginationMeta | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(5)
+  const [search, setSearch] = useState("")
+  const [debouncedSearch, setDebouncedSearch] = useState("")
+  const [actionPendingId, setActionPendingId] = useState<number | null>(null)

  const [open, setOpen] = useState(false)
  const [code, setCode] = useState("")
@@ -38,13 +43,32 @@ export default function DocumentTypesPage() {
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [submitting, setSubmitting] = useState(false)

+  const [editItem, setEditItem] = useState<HrDocumentType | null>(null)
+  const [editEtag, setEditEtag] = useState<string | null>(null)
+  const [editName, setEditName] = useState("")
+  const [editCategory, setEditCategory] = useState<HrDocumentCategory>("Identity")
+  const [editRequiredAtOnboarding, setEditRequiredAtOnboarding] = useState(false)
+  const [editExpiryTracked, setEditExpiryTracked] = useState(false)
+  const [editErrors, setEditErrors] = useState<Record<string, string>>({})
+  const [editSubmitting, setEditSubmitting] = useState(false)
+  const [editLoading, setEditLoading] = useState(false)
+
  function load() {
    hrDocumentTypesApi
-      .list({ page, pageSize: PAGE_SIZE })
+      .list({ page, pageSize, q: debouncedSearch || undefined })
      .then((res) => { setItems(res.items); setPagination(res.pagination) })
      .catch((err) => setError(errorMessage(err)))
  }
-  useEffect(load, [page])
+
+  useEffect(load, [page, pageSize, debouncedSearch]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      setPage(1)
+      setDebouncedSearch(search.trim())
+    }, 300)
+    return () => clearTimeout(t)
+  }, [search])

  async function handleCreate() {
    const nextErrors: Record<string, string> = {}
@@ -68,12 +92,73 @@ export default function DocumentTypesPage() {
    }
  }

+  async function openEdit(item: HrDocumentType) {
+    setEditItem(item)
+    setEditName(item.name)
+    setEditCategory(item.category)
+    setEditRequiredAtOnboarding(item.requiredAtOnboarding)
+    setEditExpiryTracked(item.expiryTracked)
+    setEditErrors({})
+    setEditEtag(null)
+    setEditLoading(true)
+    try {
+      const res = await hrDocumentTypesApi.get(item.hrDocumentTypeId)
+      setEditEtag(res.etag)
+    } catch (err) {
+      toast.error("Could not load document type", errorMessage(err))
+      setEditItem(null)
+    } finally {
+      setEditLoading(false)
+    }
+  }
+
+  async function handleEditSave() {
+    if (!editItem || !editEtag) return
+    const nextErrors: Record<string, string> = {}
+    if (!editName.trim()) nextErrors.name = "Name is required"
+    setEditErrors(nextErrors)
+    if (Object.keys(nextErrors).length > 0) return
+
+    setEditSubmitting(true)
+    try {
+      await hrDocumentTypesApi.update(editItem.hrDocumentTypeId, {
+        name: editName.trim(),
+        category: editCategory,
+        requiredAtOnboarding: editRequiredAtOnboarding,
+        expiryTracked: editExpiryTracked,
+      }, editEtag)
+      toast.success("Document type updated")
+      setEditItem(null)
+      load()
+    } catch (err) {
+      toast.error("Could not save", errorMessage(err))
+    } finally {
+      setEditSubmitting(false)
+    }
+  }
+
  async function toggleStatus(item: HrDocumentType) {
+    setActionPendingId(item.hrDocumentTypeId)
    try {
      await hrDocumentTypesApi.updateStatus(item.hrDocumentTypeId, item.status === "Active" ? "Inactive" : "Active")
      load()
    } catch (err) {
      toast.error("Could not update status", errorMessage(err))
+    } finally {
+      setActionPendingId(null)
+    }
+  }
+
+  async function handleDelete(item: HrDocumentType) {
+    setActionPendingId(item.hrDocumentTypeId)
+    try {
+      await hrDocumentTypesApi.remove(item.hrDocumentTypeId)
+      toast.success("Document type deleted")
+      load()
+    } catch (err) {
+      toast.error("Could not delete document type", errorMessage(err))
+    } finally {
+      setActionPendingId(null)
    }
  }

@@ -81,7 +166,14 @@ export default function DocumentTypesPage() {
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
-          <h1 className="text-2xl font-bold text-foreground">Document Types</h1>
+          <div className="flex items-center gap-2.5">
+            <h1 className="text-2xl font-bold text-foreground">Document Types</h1>
+            {pagination && (
+              <span className="rounded-full border bg-white px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                {pagination.totalItems}
+              </span>
+            )}
+          </div>
          <p className="text-base text-muted-foreground">The staff document catalog — NIC, contracts, certificates, etc.</p>
        </div>
        <Dialog open={open} onOpenChange={setOpen}>
@@ -128,46 +220,259 @@ export default function DocumentTypesPage() {
        </Dialog>
      </div>

+      <Dialog open={!!editItem} onOpenChange={(v) => !v && setEditItem(null)}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader className="items-center text-center">
+            <DialogTitle>Edit Document Type</DialogTitle>
+            <DialogDescription>Code can&apos;t be changed after creation.</DialogDescription>
+          </DialogHeader>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="dt-edit-code">Code</FieldLabel>
+              <Input id="dt-edit-code" value={editItem?.code ?? ""} disabled />
+            </Field>
+            <Field data-invalid={!!editErrors.name}>
+              <FieldLabel htmlFor="dt-edit-name">Name</FieldLabel>
+              <Input
+                id="dt-edit-name"
+                value={editName}
+                onChange={(e) => setEditName(e.target.value)}
+                aria-invalid={!!editErrors.name}
+                disabled={editLoading}
+              />
+              <FieldError errors={[editErrors.name ? { message: editErrors.name } : undefined]} />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="dt-edit-category">Category</FieldLabel>
+              <Select value={editCategory} onValueChange={(v) => setEditCategory((v as HrDocumentCategory) ?? "Other")} disabled={editLoading}>
+                <SelectTrigger id="dt-edit-category"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {CATEGORIES.map((c) => <SelectItem key={c} value={c}>{c}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </Field>
+            <Field orientation="horizontal">
+              <Checkbox id="dt-edit-required" checked={editRequiredAtOnboarding} onCheckedChange={(v) => setEditRequiredAtOnboarding(v === true)} disabled={editLoading} />
+              <FieldLabel htmlFor="dt-edit-required">Required at onboarding</FieldLabel>
+            </Field>
+            <Field orientation="horizontal">
+              <Checkbox id="dt-edit-expiry" checked={editExpiryTracked} onCheckedChange={(v) => setEditExpiryTracked(v === true)} disabled={editLoading} />
+              <FieldLabel htmlFor="dt-edit-expiry">Track expiry date (e.g. passport, visa)</FieldLabel>
+            </Field>
+          </FieldGroup>
+          <div className="flex justify-center gap-3 pt-2">
+            <Button variant="outline" className="min-w-32" onClick={() => setEditItem(null)} disabled={editSubmitting}>Cancel</Button>
+            <Button className="min-w-32" onClick={handleEditSave} disabled={editSubmitting || editLoading}>
+              {editSubmitting ? "Saving…" : "Save"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <div className="relative w-full sm:max-w-xs">
+        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search by code or name…"
+          className="h-10 pl-9 pr-9"
+          aria-label="Search document types"
+        />
+        {search && (
+          <button
+            type="button"
+            onClick={() => setSearch("")}
+            aria-label="Clear search"
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>
+
      {error && <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>}
-      {!error && items === null && <div className="flex flex-col gap-3">{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-14 w-full" />)}</div>}
-      {!error && items !== null && items.length === 0 && (
-        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center"><p className="text-base text-muted-foreground">No document types yet.</p></div>
+
+      {!error && items === null && (
+        <div className="overflow-hidden rounded-xl border">
+          <div className="flex h-11 items-center gap-4 border-b bg-muted/20 px-4">
+            <Skeleton className="h-3.5 w-16" />
+            <Skeleton className="ml-auto h-3.5 w-16" />
+          </div>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-3 border-b px-4 py-4 last:border-b-0">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-5 w-16 rounded-full" />
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="ml-auto h-7 w-20" />
+            </div>
+          ))}
+        </div>
      )}
+
+      {!error && items !== null && items.length === 0 && debouncedSearch && (
+        <div className="flex flex-col items-center gap-3 rounded-xl border border-dashed py-16 text-center">
+          <Search className="size-10 text-muted-foreground" />
+          <div>
+            <p className="text-base font-medium text-foreground">No document types match &quot;{debouncedSearch}&quot;</p>
+            <p className="text-sm text-muted-foreground">Try a different code or name.</p>
+          </div>
+          <Button variant="outline" size="sm" onClick={() => setSearch("")}>
+            Clear search
+          </Button>
+        </div>
+      )}
+
+      {!error && items !== null && items.length === 0 && !debouncedSearch && (
+        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center">
+          <p className="text-base text-muted-foreground">No document types yet.</p>
+        </div>
+      )}
+
      {!error && items !== null && items.length > 0 && (
-        <Table className="text-base">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="h-12 px-3 text-sm">Code</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Name</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Category</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Status</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {items.map((t) => (
-              <TableRow key={t.hrDocumentTypeId}>
-                <TableCell className="px-3 py-3.5 font-medium">{t.code}</TableCell>
-                <TableCell className="px-3 py-3.5">{t.name}</TableCell>
-                <TableCell className="px-3 py-3.5">{t.category}</TableCell>
-                <TableCell className="px-3 py-3.5">
-                  <Badge variant="outline" className={cn("h-6 w-fit justify-center border-transparent px-2.5 text-sm", t.status === "Active" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground")}>{t.status}</Badge>
-                </TableCell>
-                <TableCell className="px-3 py-3.5">
-                  <Button variant="ghost" size="sm" onClick={() => toggleStatus(t)}>{t.status === "Active" ? "Deactivate" : "Activate"}</Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <div className="overflow-hidden rounded-xl border">
+          <div className="overflow-x-auto">
+            <Table className="table-fixed text-base">
+              <TableHeader>
+                <TableRow className="hover:bg-transparent">
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Code</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Name</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Category</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Status</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Created</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-center text-sm">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {items.map((t) => (
+                  <TableRow key={t.hrDocumentTypeId} className="group align-top hover:bg-muted/20">
+                    <TableCell className="px-4 py-4 font-mono text-sm text-foreground">{t.code}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-foreground">{t.name}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">{t.category}</TableCell>
+                    <TableCell className="px-4 py-4">
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          "h-5 w-fit justify-center bg-white px-2 text-xs",
+                          t.status === "Active" ? "border-success/40 text-success" : "border-input text-muted-foreground"
+                        )}
+                      >
+                        {t.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">
+                      {new Date(t.createdAt).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })}
+                    </TableCell>
+                    <TableCell className="px-4 py-4">
+                      <div className="flex items-center justify-center gap-1">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          aria-label={`Edit ${t.name}`}
+                          title={`Edit ${t.name}`}
+                          onClick={() => openEdit(t)}
+                        >
+                          <Pencil className="size-4" />
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          className={cn(
+                            t.status === "Active"
+                              ? "text-destructive hover:bg-destructive/10"
+                              : "text-success hover:bg-success/10"
+                          )}
+                          aria-label={t.status === "Active" ? `Deactivate ${t.name}` : `Activate ${t.name}`}
+                          title={t.status === "Active" ? `Deactivate ${t.name}` : `Activate ${t.name}`}
+                          disabled={actionPendingId === t.hrDocumentTypeId}
+                          onClick={() => toggleStatus(t)}
+                        >
+                          {t.status === "Active" ? <XCircle className="size-4" /> : <CheckCircle2 className="size-4" />}
+                        </Button>
+                        <AlertDialog>
+                          <AlertDialogTrigger
+                            render={
+                              <Button
+                                variant="ghost"
+                                size="icon-sm"
+                                className="text-destructive hover:bg-destructive/10 disabled:pointer-events-auto disabled:cursor-not-allowed"
+                                aria-label={`Delete ${t.name}`}
+                                title={`Delete ${t.name}`}
+                                disabled={actionPendingId === t.hrDocumentTypeId}
+                              />
+                            }
+                          >
+                            <Trash2 className="size-4" />
+                          </AlertDialogTrigger>
+                          <AlertDialogContent
+                            variant="destructive"
+                            title={`Delete ${t.name}?`}
+                            description="This permanently removes this document type. This cannot be undone. Blocked if it's referenced by uploaded documents — deactivate it instead in that case."
+                            confirmLabel="Delete"
+                            onConfirm={() => handleDelete(t)}
+                          />
+                        </AlertDialog>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
      )}
-      {pagination && pagination.totalPages > 1 && (
-        <div className="flex items-center justify-between">
-          <p className="text-sm text-muted-foreground">Showing {(pagination.page - 1) * pagination.pageSize + 1}–{Math.min(pagination.page * pagination.pageSize, pagination.totalItems)} of {pagination.totalItems}</p>
+
+      {pagination && pagination.totalItems > 0 && (
+        <div className="flex flex-col-reverse items-center gap-3 sm:flex-row sm:justify-between">
+          <div className="flex items-center gap-3">
+            <p className="text-sm text-muted-foreground">
+              Showing <span className="font-medium text-foreground">{(pagination.page - 1) * pagination.pageSize + 1}</span>–
+              <span className="font-medium text-foreground">
+                {Math.min(pagination.page * pagination.pageSize, pagination.totalItems)}
+              </span>{" "}
+              of <span className="font-medium text-foreground">{pagination.totalItems}</span> document types
+            </p>
+            <label className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              Rows per page
+              <select
+                value={pageSize}
+                onChange={(e) => { setPage(1); setPageSize(Number(e.target.value)) }}
+                className="h-8 rounded-md border border-black bg-white px-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                aria-label="Rows per page"
+              >
+                {PAGE_SIZE_OPTIONS.map((size) => (
+                  <option key={size} value={size}>{size}</option>
+                ))}
+              </select>
+            </label>
+          </div>
          <div className="flex items-center gap-2">
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>Previous</Button>
-            <span className="text-sm text-muted-foreground">Page {pagination.page} of {pagination.totalPages}</span>
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page >= pagination.totalPages} onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}>Next</Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page <= 1}
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+            >
+              <ChevronLeft className="size-4" />
+              Previous
+            </Button>
+            <span className="min-w-20 text-center text-sm text-muted-foreground">
+              Page {pagination.page} of {pagination.totalPages}
+            </span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page >= pagination.totalPages}
+              onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}
+            >
+              Next
+              <ChevronRight className="size-4" />
+            </Button>
          </div>
        </div>
      )}
@@ -1,7 +1,7 @@
 "use client"

 import { useEffect, useState } from "react"
-import { Plus } from "lucide-react"
+import { CheckCircle2, ChevronLeft, ChevronRight, Pencil, Plus, Search, Trash2, XCircle, X } from "lucide-react"

 import { leaveTypesApi } from "@/lib/api/hrm-masters"
 import { errorMessage } from "@/lib/error-map"
@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils"
 import { PaginationMeta } from "@/types/common"
 import { LeaveType } from "@/types/hrm"

+import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/ui/alert-dialog"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
@@ -19,13 +20,17 @@ import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { toast } from "@/components/ui/toast"

-const PAGE_SIZE = 10
+const PAGE_SIZE_OPTIONS = [5, 10, 25, 50]

 export default function LeaveTypesPage() {
  const [items, setItems] = useState<LeaveType[] | null>(null)
  const [pagination, setPagination] = useState<PaginationMeta | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(5)
+  const [search, setSearch] = useState("")
+  const [debouncedSearch, setDebouncedSearch] = useState("")
+  const [actionPendingId, setActionPendingId] = useState<number | null>(null)

  const [open, setOpen] = useState(false)
  const [code, setCode] = useState("")
@@ -37,13 +42,34 @@ export default function LeaveTypesPage() {
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [submitting, setSubmitting] = useState(false)

+  const [editItem, setEditItem] = useState<LeaveType | null>(null)
+  const [editEtag, setEditEtag] = useState<string | null>(null)
+  const [editName, setEditName] = useState("")
+  const [editIsPaid, setEditIsPaid] = useState(true)
+  const [editCountsAsNoPay, setEditCountsAsNoPay] = useState(false)
+  const [editAccrualPerYear, setEditAccrualPerYear] = useState(14)
+  const [editCarryForwardAllowed, setEditCarryForwardAllowed] = useState(false)
+  const [editRequiresApproval, setEditRequiresApproval] = useState(true)
+  const [editErrors, setEditErrors] = useState<Record<string, string>>({})
+  const [editSubmitting, setEditSubmitting] = useState(false)
+  const [editLoading, setEditLoading] = useState(false)
+
  function load() {
    leaveTypesApi
-      .list({ page, pageSize: PAGE_SIZE })
+      .list({ page, pageSize, q: debouncedSearch || undefined })
      .then((res) => { setItems(res.items); setPagination(res.pagination) })
      .catch((err) => setError(errorMessage(err)))
  }
-  useEffect(load, [page])
+
+  useEffect(load, [page, pageSize, debouncedSearch]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      setPage(1)
+      setDebouncedSearch(search.trim())
+    }, 300)
+    return () => clearTimeout(t)
+  }, [search])

  async function handleCreate() {
    const nextErrors: Record<string, string> = {}
@@ -70,12 +96,78 @@ export default function LeaveTypesPage() {
    }
  }

+  async function openEdit(item: LeaveType) {
+    setEditItem(item)
+    setEditName(item.name)
+    setEditIsPaid(item.isPaid)
+    setEditCountsAsNoPay(item.countsAsNoPay)
+    setEditAccrualPerYear(item.accrualPerYear)
+    setEditCarryForwardAllowed(item.carryForwardAllowed)
+    setEditRequiresApproval(item.requiresApproval)
+    setEditErrors({})
+    setEditEtag(null)
+    setEditLoading(true)
+    try {
+      const res = await leaveTypesApi.get(item.leaveTypeId)
+      setEditEtag(res.etag)
+    } catch (err) {
+      toast.error("Could not load leave type", errorMessage(err))
+      setEditItem(null)
+    } finally {
+      setEditLoading(false)
+    }
+  }
+
+  async function handleEditSave() {
+    if (!editItem || !editEtag) return
+    const nextErrors: Record<string, string> = {}
+    if (!editName.trim()) nextErrors.name = "Name is required"
+    setEditErrors(nextErrors)
+    if (Object.keys(nextErrors).length > 0) return
+
+    setEditSubmitting(true)
+    try {
+      await leaveTypesApi.update(editItem.leaveTypeId, {
+        name: editName.trim(),
+        isPaid: editIsPaid,
+        countsAsNoPay: editCountsAsNoPay,
+        accrualPerYear: editAccrualPerYear,
+        carryForwardAllowed: editCarryForwardAllowed,
+        maxCarryForwardDays: editItem.maxCarryForwardDays,
+        requiresApproval: editRequiresApproval,
+      }, editEtag)
+      toast.success("Leave type updated")
+      setEditItem(null)
+      load()
+    } catch (err) {
+      toast.error("Could not save", errorMessage(err))
+    } finally {
+      setEditSubmitting(false)
+    }
+  }
+
  async function toggleStatus(item: LeaveType) {
+    setActionPendingId(item.leaveTypeId)
    try {
      await leaveTypesApi.updateStatus(item.leaveTypeId, item.status === "Active" ? "Inactive" : "Active")
      load()
    } catch (err) {
      toast.error("Could not update status", errorMessage(err))
+    } finally {
+      setActionPendingId(null)
+    }
+  }
+
+  async function handleDelete(item: LeaveType) {
+    setActionPendingId(item.leaveTypeId)
+    try {
+      await leaveTypesApi.remove(item.leaveTypeId)
+      toast.success("Leave type deleted")
+      load()
+    } catch (err) {
+      toast.error("Could not delete leave type", errorMessage(err))
+    } finally {
+      setActionPendingId(null)
    }
  }

@@ -83,7 +175,14 @@ export default function LeaveTypesPage() {
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
-          <h1 className="text-2xl font-bold text-foreground">Leave Types</h1>
+          <div className="flex items-center gap-2.5">
+            <h1 className="text-2xl font-bold text-foreground">Leave Types</h1>
+            {pagination && (
+              <span className="rounded-full border bg-white px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                {pagination.totalItems}
+              </span>
+            )}
+          </div>
          <p className="text-base text-muted-foreground">Annual, Casual, Medical, Unpaid, etc. — drives Attendance&apos;s OnLeave classification and Payroll&apos;s No-Pay calc.</p>
        </div>
        <Dialog open={open} onOpenChange={setOpen}>
@@ -129,48 +228,272 @@ export default function LeaveTypesPage() {
        </Dialog>
      </div>

+      <Dialog open={!!editItem} onOpenChange={(v) => !v && setEditItem(null)}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader className="items-center text-center">
+            <DialogTitle>Edit Leave Type</DialogTitle>
+            <DialogDescription>Code can&apos;t be changed after creation.</DialogDescription>
+          </DialogHeader>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="lt-edit-code">Code</FieldLabel>
+              <Input id="lt-edit-code" value={editItem?.code ?? ""} disabled />
+            </Field>
+            <Field data-invalid={!!editErrors.name}>
+              <FieldLabel htmlFor="lt-edit-name">Name</FieldLabel>
+              <Input
+                id="lt-edit-name"
+                value={editName}
+                onChange={(e) => setEditName(e.target.value)}
+                aria-invalid={!!editErrors.name}
+                disabled={editLoading}
+              />
+              <FieldError errors={[editErrors.name ? { message: editErrors.name } : undefined]} />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="lt-edit-accrual">Days per year</FieldLabel>
+              <Input
+                id="lt-edit-accrual"
+                type="number"
+                min={0}
+                value={editAccrualPerYear}
+                onChange={(e) => setEditAccrualPerYear(Number(e.target.value))}
+                disabled={editLoading}
+              />
+            </Field>
+            <Field orientation="horizontal">
+              <Checkbox id="lt-edit-paid" checked={editIsPaid} onCheckedChange={(v) => setEditIsPaid(v === true)} disabled={editLoading} />
+              <FieldLabel htmlFor="lt-edit-paid">Paid leave</FieldLabel>
+            </Field>
+            <Field orientation="horizontal">
+              <Checkbox id="lt-edit-nopay" checked={editCountsAsNoPay} onCheckedChange={(v) => setEditCountsAsNoPay(v === true)} disabled={editLoading} />
+              <FieldLabel htmlFor="lt-edit-nopay">Counts as No-Pay in payroll</FieldLabel>
+            </Field>
+            <Field orientation="horizontal">
+              <Checkbox id="lt-edit-carry" checked={editCarryForwardAllowed} onCheckedChange={(v) => setEditCarryForwardAllowed(v === true)} disabled={editLoading} />
+              <FieldLabel htmlFor="lt-edit-carry">Carry-forward allowed</FieldLabel>
+            </Field>
+            <Field orientation="horizontal">
+              <Checkbox id="lt-edit-approval" checked={editRequiresApproval} onCheckedChange={(v) => setEditRequiresApproval(v === true)} disabled={editLoading} />
+              <FieldLabel htmlFor="lt-edit-approval">Requires approval</FieldLabel>
+            </Field>
+          </FieldGroup>
+          <div className="flex justify-center gap-3 pt-2">
+            <Button variant="outline" className="min-w-32" onClick={() => setEditItem(null)} disabled={editSubmitting}>Cancel</Button>
+            <Button className="min-w-32" onClick={handleEditSave} disabled={editSubmitting || editLoading}>
+              {editSubmitting ? "Saving…" : "Save"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <div className="relative w-full sm:max-w-xs">
+        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search by code or name…"
+          className="h-10 pl-9 pr-9"
+          aria-label="Search leave types"
+        />
+        {search && (
+          <button
+            type="button"
+            onClick={() => setSearch("")}
+            aria-label="Clear search"
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>
+
      {error && <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>}
-      {!error && items === null && <div className="flex flex-col gap-3">{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-14 w-full" />)}</div>}
-      {!error && items !== null && items.length === 0 && (
-        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center"><p className="text-base text-muted-foreground">No leave types yet.</p></div>
+
+      {!error && items === null && (
+        <div className="overflow-hidden rounded-xl border">
+          <div className="flex h-11 items-center gap-4 border-b bg-muted/20 px-4">
+            <Skeleton className="h-3.5 w-16" />
+            <Skeleton className="ml-auto h-3.5 w-16" />
+          </div>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-3 border-b px-4 py-4 last:border-b-0">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-4 w-16" />
+              <Skeleton className="h-4 w-12" />
+              <Skeleton className="h-5 w-16 rounded-full" />
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="ml-auto h-7 w-20" />
+            </div>
+          ))}
+        </div>
      )}
+
+      {!error && items !== null && items.length === 0 && debouncedSearch && (
+        <div className="flex flex-col items-center gap-3 rounded-xl border border-dashed py-16 text-center">
+          <Search className="size-10 text-muted-foreground" />
+          <div>
+            <p className="text-base font-medium text-foreground">No leave types match &quot;{debouncedSearch}&quot;</p>
+            <p className="text-sm text-muted-foreground">Try a different code or name.</p>
+          </div>
+          <Button variant="outline" size="sm" onClick={() => setSearch("")}>
+            Clear search
+          </Button>
+        </div>
+      )}
+
+      {!error && items !== null && items.length === 0 && !debouncedSearch && (
+        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center">
+          <p className="text-base text-muted-foreground">No leave types yet.</p>
+        </div>
+      )}
+
      {!error && items !== null && items.length > 0 && (
-        <Table className="text-base">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="h-12 px-3 text-sm">Code</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Name</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Days/yr</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Paid</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Status</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {items.map((t) => (
-              <TableRow key={t.leaveTypeId}>
-                <TableCell className="px-3 py-3.5 font-medium">{t.code}</TableCell>
-                <TableCell className="px-3 py-3.5">{t.name}</TableCell>
-                <TableCell className="px-3 py-3.5">{t.accrualPerYear}</TableCell>
-                <TableCell className="px-3 py-3.5">{t.isPaid ? "Yes" : "No"}</TableCell>
-                <TableCell className="px-3 py-3.5">
-                  <Badge variant="outline" className={cn("h-6 w-fit justify-center border-transparent px-2.5 text-sm", t.status === "Active" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground")}>{t.status}</Badge>
-                </TableCell>
-                <TableCell className="px-3 py-3.5">
-                  <Button variant="ghost" size="sm" onClick={() => toggleStatus(t)}>{t.status === "Active" ? "Deactivate" : "Activate"}</Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <div className="overflow-hidden rounded-xl border">
+          <div className="overflow-x-auto">
+            <Table className="table-fixed text-base">
+              <TableHeader>
+                <TableRow className="hover:bg-transparent">
+                  <TableHead className="h-11 w-[14%] px-4 text-sm">Code</TableHead>
+                  <TableHead className="h-11 w-[18%] px-4 text-sm">Name</TableHead>
+                  <TableHead className="h-11 w-[12%] px-4 text-sm">Days/yr</TableHead>
+                  <TableHead className="h-11 w-[10%] px-4 text-sm">Paid</TableHead>
+                  <TableHead className="h-11 w-[14%] px-4 text-sm">Status</TableHead>
+                  <TableHead className="h-11 w-[14%] px-4 text-sm">Created</TableHead>
+                  <TableHead className="h-11 w-[18%] px-4 text-center text-sm">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {items.map((t) => (
+                  <TableRow key={t.leaveTypeId} className="group align-top hover:bg-muted/20">
+                    <TableCell className="px-4 py-4 font-mono text-sm text-foreground">{t.code}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-foreground">{t.name}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">{t.accrualPerYear}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">{t.isPaid ? "Yes" : "No"}</TableCell>
+                    <TableCell className="px-4 py-4">
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          "h-5 w-fit justify-center bg-white px-2 text-xs",
+                          t.status === "Active" ? "border-success/40 text-success" : "border-input text-muted-foreground"
+                        )}
+                      >
+                        {t.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">
+                      {new Date(t.createdAt).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })}
+                    </TableCell>
+                    <TableCell className="px-4 py-4">
+                      <div className="flex items-center justify-center gap-1">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          aria-label={`Edit ${t.name}`}
+                          title={`Edit ${t.name}`}
+                          onClick={() => openEdit(t)}
+                        >
+                          <Pencil className="size-4" />
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          className={cn(
+                            t.status === "Active"
+                              ? "text-destructive hover:bg-destructive/10"
+                              : "text-success hover:bg-success/10"
+                          )}
+                          aria-label={t.status === "Active" ? `Deactivate ${t.name}` : `Activate ${t.name}`}
+                          title={t.status === "Active" ? `Deactivate ${t.name}` : `Activate ${t.name}`}
+                          disabled={actionPendingId === t.leaveTypeId}
+                          onClick={() => toggleStatus(t)}
+                        >
+                          {t.status === "Active" ? <XCircle className="size-4" /> : <CheckCircle2 className="size-4" />}
+                        </Button>
+                        <AlertDialog>
+                          <AlertDialogTrigger
+                            render={
+                              <Button
+                                variant="ghost"
+                                size="icon-sm"
+                                className="text-destructive hover:bg-destructive/10 disabled:pointer-events-auto disabled:cursor-not-allowed"
+                                aria-label={`Delete ${t.name}`}
+                                title={`Delete ${t.name}`}
+                                disabled={actionPendingId === t.leaveTypeId}
+                              />
+                            }
+                          >
+                            <Trash2 className="size-4" />
+                          </AlertDialogTrigger>
+                          <AlertDialogContent
+                            variant="destructive"
+                            title={`Delete ${t.name}?`}
+                            description="This permanently removes this leave type. This cannot be undone. Blocked if it's referenced by leave requests or balances — deactivate it instead in that case."
+                            confirmLabel="Delete"
+                            onConfirm={() => handleDelete(t)}
+                          />
+                        </AlertDialog>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
      )}
-      {pagination && pagination.totalPages > 1 && (
-        <div className="flex items-center justify-between">
-          <p className="text-sm text-muted-foreground">Showing {(pagination.page - 1) * pagination.pageSize + 1}–{Math.min(pagination.page * pagination.pageSize, pagination.totalItems)} of {pagination.totalItems}</p>
+
+      {pagination && pagination.totalItems > 0 && (
+        <div className="flex flex-col-reverse items-center gap-3 sm:flex-row sm:justify-between">
+          <div className="flex items-center gap-3">
+            <p className="text-sm text-muted-foreground">
+              Showing <span className="font-medium text-foreground">{(pagination.page - 1) * pagination.pageSize + 1}</span>–
+              <span className="font-medium text-foreground">
+                {Math.min(pagination.page * pagination.pageSize, pagination.totalItems)}
+              </span>{" "}
+              of <span className="font-medium text-foreground">{pagination.totalItems}</span> leave types
+            </p>
+            <label className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              Rows per page
+              <select
+                value={pageSize}
+                onChange={(e) => { setPage(1); setPageSize(Number(e.target.value)) }}
+                className="h-8 rounded-md border border-black bg-white px-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                aria-label="Rows per page"
+              >
+                {PAGE_SIZE_OPTIONS.map((size) => (
+                  <option key={size} value={size}>{size}</option>
+                ))}
+              </select>
+            </label>
+          </div>
          <div className="flex items-center gap-2">
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>Previous</Button>
-            <span className="text-sm text-muted-foreground">Page {pagination.page} of {pagination.totalPages}</span>
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page >= pagination.totalPages} onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}>Next</Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page <= 1}
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+            >
+              <ChevronLeft className="size-4" />
+              Previous
+            </Button>
+            <span className="min-w-20 text-center text-sm text-muted-foreground">
+              Page {pagination.page} of {pagination.totalPages}
+            </span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page >= pagination.totalPages}
+              onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}
+            >
+              Next
+              <ChevronRight className="size-4" />
+            </Button>
          </div>
        </div>
      )}
@@ -1,7 +1,7 @@
 "use client"

 import { useEffect, useState } from "react"
-import { Plus } from "lucide-react"
+import { CheckCircle2, ChevronLeft, ChevronRight, Pencil, Plus, Search, Trash2, XCircle, X } from "lucide-react"

 import { salaryComponentsApi } from "@/lib/api/hrm-masters"
 import { errorMessage } from "@/lib/error-map"
@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils"
 import { PaginationMeta } from "@/types/common"
 import { SalaryComponent, SalaryComponentType } from "@/types/hrm"

+import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/ui/alert-dialog"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
@@ -20,13 +21,17 @@ import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { toast } from "@/components/ui/toast"

-const PAGE_SIZE = 10
+const PAGE_SIZE_OPTIONS = [5, 10, 25, 50]

 export default function SalaryComponentsPage() {
  const [items, setItems] = useState<SalaryComponent[] | null>(null)
  const [pagination, setPagination] = useState<PaginationMeta | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(5)
+  const [search, setSearch] = useState("")
+  const [debouncedSearch, setDebouncedSearch] = useState("")
+  const [actionPendingId, setActionPendingId] = useState<number | null>(null)

  const [open, setOpen] = useState(false)
  const [code, setCode] = useState("")
@@ -37,13 +42,31 @@ export default function SalaryComponentsPage() {
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [submitting, setSubmitting] = useState(false)

+  const [editItem, setEditItem] = useState<SalaryComponent | null>(null)
+  const [editEtag, setEditEtag] = useState<string | null>(null)
+  const [editName, setEditName] = useState("")
+  const [editIsTaxable, setEditIsTaxable] = useState(true)
+  const [editIsEpfEtfApplicable, setEditIsEpfEtfApplicable] = useState(true)
+  const [editErrors, setEditErrors] = useState<Record<string, string>>({})
+  const [editSubmitting, setEditSubmitting] = useState(false)
+  const [editLoading, setEditLoading] = useState(false)
+
  function load() {
    salaryComponentsApi
-      .list({ page, pageSize: PAGE_SIZE })
+      .list({ page, pageSize, q: debouncedSearch || undefined })
      .then((res) => { setItems(res.items); setPagination(res.pagination) })
      .catch((err) => setError(errorMessage(err)))
  }
-  useEffect(load, [page])
+
+  useEffect(load, [page, pageSize, debouncedSearch]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      setPage(1)
+      setDebouncedSearch(search.trim())
+    }, 300)
+    return () => clearTimeout(t)
+  }, [search])

  async function handleCreate() {
    const nextErrors: Record<string, string> = {}
@@ -67,12 +90,72 @@ export default function SalaryComponentsPage() {
    }
  }

+  async function openEdit(item: SalaryComponent) {
+    setEditItem(item)
+    setEditName(item.name)
+    setEditIsTaxable(item.isTaxable)
+    setEditIsEpfEtfApplicable(item.isEpfEtfApplicable)
+    setEditErrors({})
+    setEditEtag(null)
+    setEditLoading(true)
+    try {
+      const res = await salaryComponentsApi.get(item.salaryComponentId)
+      setEditEtag(res.etag)
+    } catch (err) {
+      toast.error("Could not load salary component", errorMessage(err))
+      setEditItem(null)
+    } finally {
+      setEditLoading(false)
+    }
+  }
+
+  async function handleEditSave() {
+    if (!editItem || !editEtag) return
+    const nextErrors: Record<string, string> = {}
+    if (!editName.trim()) nextErrors.name = "Name is required"
+    setEditErrors(nextErrors)
+    if (Object.keys(nextErrors).length > 0) return
+
+    setEditSubmitting(true)
+    try {
+      await salaryComponentsApi.update(editItem.salaryComponentId, {
+        name: editName.trim(),
+        componentType: editItem.componentType,
+        isTaxable: editIsTaxable,
+        isEpfEtfApplicable: editIsEpfEtfApplicable,
+      }, editEtag)
+      toast.success("Salary component updated")
+      setEditItem(null)
+      load()
+    } catch (err) {
+      toast.error("Could not save", errorMessage(err))
+    } finally {
+      setEditSubmitting(false)
+    }
+  }
+
  async function toggleStatus(item: SalaryComponent) {
+    setActionPendingId(item.salaryComponentId)
    try {
      await salaryComponentsApi.updateStatus(item.salaryComponentId, item.status === "Active" ? "Inactive" : "Active")
      load()
    } catch (err) {
      toast.error("Could not update status", errorMessage(err))
+    } finally {
+      setActionPendingId(null)
+    }
+  }
+
+  async function handleDelete(item: SalaryComponent) {
+    setActionPendingId(item.salaryComponentId)
+    try {
+      await salaryComponentsApi.remove(item.salaryComponentId)
+      toast.success("Salary component deleted")
+      load()
+    } catch (err) {
+      toast.error("Could not delete salary component", errorMessage(err))
+    } finally {
+      setActionPendingId(null)
    }
  }

@@ -80,7 +163,14 @@ export default function SalaryComponentsPage() {
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
-          <h1 className="text-2xl font-bold text-foreground">Salary Components</h1>
+          <div className="flex items-center gap-2.5">
+            <h1 className="text-2xl font-bold text-foreground">Salary Components</h1>
+            {pagination && (
+              <span className="rounded-full border bg-white px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                {pagination.totalItems}
+              </span>
+            )}
+          </div>
          <p className="text-base text-muted-foreground">Allowances and ad hoc other deductions — OT/Late/No-Pay/Loan/EPF/ETF/Tax are computed automatically, not components.</p>
        </div>
        <Dialog open={open} onOpenChange={setOpen}>
@@ -128,46 +218,254 @@ export default function SalaryComponentsPage() {
        </Dialog>
      </div>

+      <Dialog open={!!editItem} onOpenChange={(v) => !v && setEditItem(null)}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader className="items-center text-center">
+            <DialogTitle>Edit Salary Component</DialogTitle>
+            <DialogDescription>Code and type can&apos;t be changed after creation.</DialogDescription>
+          </DialogHeader>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="sc-edit-code">Code</FieldLabel>
+              <Input id="sc-edit-code" value={editItem?.code ?? ""} disabled />
+            </Field>
+            <Field data-invalid={!!editErrors.name}>
+              <FieldLabel htmlFor="sc-edit-name">Name</FieldLabel>
+              <Input
+                id="sc-edit-name"
+                value={editName}
+                onChange={(e) => setEditName(e.target.value)}
+                aria-invalid={!!editErrors.name}
+                disabled={editLoading}
+              />
+              <FieldError errors={[editErrors.name ? { message: editErrors.name } : undefined]} />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="sc-edit-type">Type</FieldLabel>
+              <Input id="sc-edit-type" value={editItem?.componentType ?? ""} disabled />
+            </Field>
+            <Field orientation="horizontal">
+              <Checkbox id="sc-edit-taxable" checked={editIsTaxable} onCheckedChange={(v) => setEditIsTaxable(v === true)} disabled={editLoading} />
+              <FieldLabel htmlFor="sc-edit-taxable">Taxable</FieldLabel>
+            </Field>
+            <Field orientation="horizontal">
+              <Checkbox id="sc-edit-epfetf" checked={editIsEpfEtfApplicable} onCheckedChange={(v) => setEditIsEpfEtfApplicable(v === true)} disabled={editLoading} />
+              <FieldLabel htmlFor="sc-edit-epfetf">EPF/ETF applicable</FieldLabel>
+            </Field>
+          </FieldGroup>
+          <div className="flex justify-center gap-3 pt-2">
+            <Button variant="outline" className="min-w-32" onClick={() => setEditItem(null)} disabled={editSubmitting}>Cancel</Button>
+            <Button className="min-w-32" onClick={handleEditSave} disabled={editSubmitting || editLoading}>
+              {editSubmitting ? "Saving…" : "Save"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <div className="relative w-full sm:max-w-xs">
+        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search by code or name…"
+          className="h-10 pl-9 pr-9"
+          aria-label="Search salary components"
+        />
+        {search && (
+          <button
+            type="button"
+            onClick={() => setSearch("")}
+            aria-label="Clear search"
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>
+
      {error && <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>}
-      {!error && items === null && <div className="flex flex-col gap-3">{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-14 w-full" />)}</div>}
-      {!error && items !== null && items.length === 0 && (
-        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center"><p className="text-base text-muted-foreground">No salary components yet.</p></div>
+
+      {!error && items === null && (
+        <div className="overflow-hidden rounded-xl border">
+          <div className="flex h-11 items-center gap-4 border-b bg-muted/20 px-4">
+            <Skeleton className="h-3.5 w-16" />
+            <Skeleton className="ml-auto h-3.5 w-16" />
+          </div>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-3 border-b px-4 py-4 last:border-b-0">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-5 w-16 rounded-full" />
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="ml-auto h-7 w-20" />
+            </div>
+          ))}
+        </div>
      )}
+
+      {!error && items !== null && items.length === 0 && debouncedSearch && (
+        <div className="flex flex-col items-center gap-3 rounded-xl border border-dashed py-16 text-center">
+          <Search className="size-10 text-muted-foreground" />
+          <div>
+            <p className="text-base font-medium text-foreground">No salary components match &quot;{debouncedSearch}&quot;</p>
+            <p className="text-sm text-muted-foreground">Try a different code or name.</p>
+          </div>
+          <Button variant="outline" size="sm" onClick={() => setSearch("")}>
+            Clear search
+          </Button>
+        </div>
+      )}
+
+      {!error && items !== null && items.length === 0 && !debouncedSearch && (
+        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center">
+          <p className="text-base text-muted-foreground">No salary components yet.</p>
+        </div>
+      )}
+
      {!error && items !== null && items.length > 0 && (
-        <Table className="text-base">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="h-12 px-3 text-sm">Code</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Name</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Type</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Status</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {items.map((c) => (
-              <TableRow key={c.salaryComponentId}>
-                <TableCell className="px-3 py-3.5 font-medium">{c.code}</TableCell>
-                <TableCell className="px-3 py-3.5">{c.name}</TableCell>
-                <TableCell className="px-3 py-3.5">{c.componentType}</TableCell>
-                <TableCell className="px-3 py-3.5">
-                  <Badge variant="outline" className={cn("h-6 w-fit justify-center border-transparent px-2.5 text-sm", c.status === "Active" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground")}>{c.status}</Badge>
-                </TableCell>
-                <TableCell className="px-3 py-3.5">
-                  <Button variant="ghost" size="sm" onClick={() => toggleStatus(c)}>{c.status === "Active" ? "Deactivate" : "Activate"}</Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <div className="overflow-hidden rounded-xl border">
+          <div className="overflow-x-auto">
+            <Table className="table-fixed text-base">
+              <TableHeader>
+                <TableRow className="hover:bg-transparent">
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Code</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Name</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Type</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Status</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Created</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-center text-sm">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {items.map((c) => (
+                  <TableRow key={c.salaryComponentId} className="group align-top hover:bg-muted/20">
+                    <TableCell className="px-4 py-4 font-mono text-sm text-foreground">{c.code}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-foreground">{c.name}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">{c.componentType}</TableCell>
+                    <TableCell className="px-4 py-4">
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          "h-5 w-fit justify-center bg-white px-2 text-xs",
+                          c.status === "Active" ? "border-success/40 text-success" : "border-input text-muted-foreground"
+                        )}
+                      >
+                        {c.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">
+                      {new Date(c.createdAt).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })}
+                    </TableCell>
+                    <TableCell className="px-4 py-4">
+                      <div className="flex items-center justify-center gap-1">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          aria-label={`Edit ${c.name}`}
+                          title={`Edit ${c.name}`}
+                          onClick={() => openEdit(c)}
+                        >
+                          <Pencil className="size-4" />
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          className={cn(
+                            c.status === "Active"
+                              ? "text-destructive hover:bg-destructive/10"
+                              : "text-success hover:bg-success/10"
+                          )}
+                          aria-label={c.status === "Active" ? `Deactivate ${c.name}` : `Activate ${c.name}`}
+                          title={c.status === "Active" ? `Deactivate ${c.name}` : `Activate ${c.name}`}
+                          disabled={actionPendingId === c.salaryComponentId}
+                          onClick={() => toggleStatus(c)}
+                        >
+                          {c.status === "Active" ? <XCircle className="size-4" /> : <CheckCircle2 className="size-4" />}
+                        </Button>
+                        <AlertDialog>
+                          <AlertDialogTrigger
+                            render={
+                              <Button
+                                variant="ghost"
+                                size="icon-sm"
+                                className="text-destructive hover:bg-destructive/10 disabled:pointer-events-auto disabled:cursor-not-allowed"
+                                aria-label={`Delete ${c.name}`}
+                                title={`Delete ${c.name}`}
+                                disabled={actionPendingId === c.salaryComponentId}
+                              />
+                            }
+                          >
+                            <Trash2 className="size-4" />
+                          </AlertDialogTrigger>
+                          <AlertDialogContent
+                            variant="destructive"
+                            title={`Delete ${c.name}?`}
+                            description="This permanently removes this salary component. This cannot be undone. Blocked if it's referenced by salary structures — deactivate it instead in that case."
+                            confirmLabel="Delete"
+                            onConfirm={() => handleDelete(c)}
+                          />
+                        </AlertDialog>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
      )}
-      {pagination && pagination.totalPages > 1 && (
-        <div className="flex items-center justify-between">
-          <p className="text-sm text-muted-foreground">Showing {(pagination.page - 1) * pagination.pageSize + 1}–{Math.min(pagination.page * pagination.pageSize, pagination.totalItems)} of {pagination.totalItems}</p>
+
+      {pagination && pagination.totalItems > 0 && (
+        <div className="flex flex-col-reverse items-center gap-3 sm:flex-row sm:justify-between">
+          <div className="flex items-center gap-3">
+            <p className="text-sm text-muted-foreground">
+              Showing <span className="font-medium text-foreground">{(pagination.page - 1) * pagination.pageSize + 1}</span>–
+              <span className="font-medium text-foreground">
+                {Math.min(pagination.page * pagination.pageSize, pagination.totalItems)}
+              </span>{" "}
+              of <span className="font-medium text-foreground">{pagination.totalItems}</span> salary components
+            </p>
+            <label className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              Rows per page
+              <select
+                value={pageSize}
+                onChange={(e) => { setPage(1); setPageSize(Number(e.target.value)) }}
+                className="h-8 rounded-md border border-black bg-white px-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                aria-label="Rows per page"
+              >
+                {PAGE_SIZE_OPTIONS.map((size) => (
+                  <option key={size} value={size}>{size}</option>
+                ))}
+              </select>
+            </label>
+          </div>
          <div className="flex items-center gap-2">
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>Previous</Button>
-            <span className="text-sm text-muted-foreground">Page {pagination.page} of {pagination.totalPages}</span>
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page >= pagination.totalPages} onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}>Next</Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page <= 1}
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+            >
+              <ChevronLeft className="size-4" />
+              Previous
+            </Button>
+            <span className="min-w-20 text-center text-sm text-muted-foreground">
+              Page {pagination.page} of {pagination.totalPages}
+            </span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page >= pagination.totalPages}
+              onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}
+            >
+              Next
+              <ChevronRight className="size-4" />
+            </Button>
          </div>
        </div>
      )}
@@ -11,12 +11,13 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { toast } from "@/components/ui/toast"

 export default function StatutorySettingsPage() {
-  const [settings, setSettings] = useState<PayrollStatutorySetting[]>([])
-  const [slabs, setSlabs] = useState<TaxSlab[]>([])
+  const [settings, setSettings] = useState<PayrollStatutorySetting[] | null>(null)
+  const [slabs, setSlabs] = useState<TaxSlab[] | null>(null)
  const [error, setError] = useState<string | null>(null)

  const [settingOpen, setSettingOpen] = useState(false)
@@ -86,7 +87,14 @@ export default function StatutorySettingsPage() {

      <section className="flex flex-col gap-4">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <h2 className="text-lg font-semibold text-foreground">EPF / ETF Rates</h2>
+          <div className="flex items-center gap-2.5">
+            <h2 className="text-lg font-semibold text-foreground">EPF / ETF Rates</h2>
+            {settings && (
+              <span className="rounded-full border bg-white px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                {settings.length}
+              </span>
+            )}
+          </div>
          <Dialog open={settingOpen} onOpenChange={setSettingOpen}>
            <DialogTrigger render={<Button size="sm"><Plus className="size-4" />New Setting</Button>} />
            <DialogContent className="sm:max-w-sm">
@@ -108,33 +116,72 @@ export default function StatutorySettingsPage() {
            </DialogContent>
          </Dialog>
        </div>
-        <Table className="text-base">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="h-12 px-3 text-sm">Effective from</TableHead>
-              <TableHead className="h-12 px-3 text-sm">EPF (Employee)</TableHead>
-              <TableHead className="h-12 px-3 text-sm">EPF (Employer)</TableHead>
-              <TableHead className="h-12 px-3 text-sm">ETF (Employer)</TableHead>
-              <TableHead className="h-12 px-3 text-sm">OT multiplier</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {settings.map((s) => (
-              <TableRow key={s.payrollStatutorySettingId}>
-                <TableCell className="px-3 py-3.5">{new Date(s.effectiveFrom).toLocaleDateString()}{s.effectiveTo ? ` – ${new Date(s.effectiveTo).toLocaleDateString()}` : " (current)"}</TableCell>
-                <TableCell className="px-3 py-3.5">{(s.epfEmployeeRate * 100).toFixed(1)}%</TableCell>
-                <TableCell className="px-3 py-3.5">{(s.epfEmployerRate * 100).toFixed(1)}%</TableCell>
-                <TableCell className="px-3 py-3.5">{(s.etfEmployerRate * 100).toFixed(1)}%</TableCell>
-                <TableCell className="px-3 py-3.5">{s.otMultiplierDefault}x</TableCell>
-              </TableRow>
+
+        {settings === null && (
+          <div className="overflow-hidden rounded-xl border">
+            <div className="flex h-11 items-center gap-4 border-b bg-muted/20 px-4">
+              <Skeleton className="h-3.5 w-24" />
+            </div>
+            {Array.from({ length: 3 }).map((_, i) => (
+              <div key={i} className="flex items-center gap-4 border-b px-4 py-4 last:border-b-0">
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-4 w-16" />
+                <Skeleton className="h-4 w-16" />
+                <Skeleton className="h-4 w-16" />
+                <Skeleton className="h-4 w-16" />
+              </div>
            ))}
-          </TableBody>
-        </Table>
+          </div>
+        )}
+
+        {settings !== null && settings.length === 0 && (
+          <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-16 text-center">
+            <p className="text-base text-muted-foreground">No statutory settings recorded yet.</p>
+          </div>
+        )}
+
+        {settings !== null && settings.length > 0 && (
+          <div className="overflow-hidden rounded-xl border">
+            <div className="overflow-x-auto">
+              <Table className="text-base">
+                <TableHeader>
+                  <TableRow className="hover:bg-transparent">
+                    <TableHead className="h-11 px-4 text-sm">Effective from</TableHead>
+                    <TableHead className="h-11 px-4 text-sm">EPF (Employee)</TableHead>
+                    <TableHead className="h-11 px-4 text-sm">EPF (Employer)</TableHead>
+                    <TableHead className="h-11 px-4 text-sm">ETF (Employer)</TableHead>
+                    <TableHead className="h-11 px-4 text-sm">OT multiplier</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {settings.map((s) => (
+                    <TableRow key={s.payrollStatutorySettingId} className="hover:bg-muted/20">
+                      <TableCell className="px-4 py-4 text-sm text-foreground">
+                        {new Date(s.effectiveFrom).toLocaleDateString()}{s.effectiveTo ? ` – ${new Date(s.effectiveTo).toLocaleDateString()}` : " (current)"}
+                      </TableCell>
+                      <TableCell className="px-4 py-4 text-sm text-muted-foreground">{(s.epfEmployeeRate * 100).toFixed(1)}%</TableCell>
+                      <TableCell className="px-4 py-4 text-sm text-muted-foreground">{(s.epfEmployerRate * 100).toFixed(1)}%</TableCell>
+                      <TableCell className="px-4 py-4 text-sm text-muted-foreground">{(s.etfEmployerRate * 100).toFixed(1)}%</TableCell>
+                      <TableCell className="px-4 py-4 text-sm text-muted-foreground">{s.otMultiplierDefault}x</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        )}
      </section>

      <section className="flex flex-col gap-4">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <h2 className="text-lg font-semibold text-foreground">Tax Slabs</h2>
+          <div className="flex items-center gap-2.5">
+            <h2 className="text-lg font-semibold text-foreground">Tax Slabs</h2>
+            {slabs && (
+              <span className="rounded-full border bg-white px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                {slabs.length}
+              </span>
+            )}
+          </div>
          <Dialog open={slabOpen} onOpenChange={setSlabOpen}>
            <DialogTrigger render={<Button size="sm"><Plus className="size-4" />New Slab</Button>} />
            <DialogContent className="sm:max-w-sm">
@@ -155,24 +202,52 @@ export default function StatutorySettingsPage() {
            </DialogContent>
          </Dialog>
        </div>
-        <Table className="text-base">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="h-12 px-3 text-sm">Effective from</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Range</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Rate</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {slabs.map((s) => (
-              <TableRow key={s.taxSlabId}>
-                <TableCell className="px-3 py-3.5">{new Date(s.effectiveFrom).toLocaleDateString()}</TableCell>
-                <TableCell className="px-3 py-3.5">{s.lowerBound.toLocaleString()} – {s.upperBound ? s.upperBound.toLocaleString() : "and above"}</TableCell>
-                <TableCell className="px-3 py-3.5">{(s.rate * 100).toFixed(1)}%</TableCell>
-              </TableRow>
+
+        {slabs === null && (
+          <div className="overflow-hidden rounded-xl border">
+            <div className="flex h-11 items-center gap-4 border-b bg-muted/20 px-4">
+              <Skeleton className="h-3.5 w-24" />
+            </div>
+            {Array.from({ length: 3 }).map((_, i) => (
+              <div key={i} className="flex items-center gap-4 border-b px-4 py-4 last:border-b-0">
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-4 w-16" />
+              </div>
            ))}
-          </TableBody>
-        </Table>
+          </div>
+        )}
+
+        {slabs !== null && slabs.length === 0 && (
+          <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-16 text-center">
+            <p className="text-base text-muted-foreground">No tax slabs recorded yet.</p>
+          </div>
+        )}
+
+        {slabs !== null && slabs.length > 0 && (
+          <div className="overflow-hidden rounded-xl border">
+            <div className="overflow-x-auto">
+              <Table className="text-base">
+                <TableHeader>
+                  <TableRow className="hover:bg-transparent">
+                    <TableHead className="h-11 px-4 text-sm">Effective from</TableHead>
+                    <TableHead className="h-11 px-4 text-sm">Range</TableHead>
+                    <TableHead className="h-11 px-4 text-sm">Rate</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {slabs.map((s) => (
+                    <TableRow key={s.taxSlabId} className="hover:bg-muted/20">
+                      <TableCell className="px-4 py-4 text-sm text-foreground">{new Date(s.effectiveFrom).toLocaleDateString()}</TableCell>
+                      <TableCell className="px-4 py-4 text-sm text-muted-foreground">{s.lowerBound.toLocaleString()} – {s.upperBound ? s.upperBound.toLocaleString() : "and above"}</TableCell>
+                      <TableCell className="px-4 py-4 text-sm text-muted-foreground">{(s.rate * 100).toFixed(1)}%</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        )}
      </section>
    </div>
  )
@@ -1,7 +1,7 @@
 "use client"

 import { useEffect, useState } from "react"
-import { Plus } from "lucide-react"
+import { CheckCircle2, ChevronLeft, ChevronRight, Pencil, Plus, Search, Trash2, XCircle, X } from "lucide-react"

 import { workShiftsApi } from "@/lib/api/hrm-masters"
 import { errorMessage } from "@/lib/error-map"
@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils"
 import { PaginationMeta } from "@/types/common"
 import { WorkShift } from "@/types/hrm"

+import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/ui/alert-dialog"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
@@ -19,14 +20,22 @@ import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { toast } from "@/components/ui/toast"

-const PAGE_SIZE = 10
+const PAGE_SIZE_OPTIONS = [5, 10, 25, 50]
 const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

+function maskToDays(mask: number): boolean[] {
+  return DAYS.map((_, i) => (mask & (1 << i)) !== 0)
+}
+
 export default function WorkShiftsPage() {
  const [items, setItems] = useState<WorkShift[] | null>(null)
  const [pagination, setPagination] = useState<PaginationMeta | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(5)
+  const [search, setSearch] = useState("")
+  const [debouncedSearch, setDebouncedSearch] = useState("")
+  const [actionPendingId, setActionPendingId] = useState<number | null>(null)

  const [open, setOpen] = useState(false)
  const [code, setCode] = useState("")
@@ -42,9 +51,24 @@ export default function WorkShiftsPage() {
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [submitting, setSubmitting] = useState(false)

+  const [editItem, setEditItem] = useState<WorkShift | null>(null)
+  const [editEtag, setEditEtag] = useState<string | null>(null)
+  const [editName, setEditName] = useState("")
+  const [editStartTime, setEditStartTime] = useState("08:00")
+  const [editEndTime, setEditEndTime] = useState("17:00")
+  const [editIsOvernight, setEditIsOvernight] = useState(false)
+  const [editGraceMinutes, setEditGraceMinutes] = useState(15)
+  const [editBreakMinutes, setEditBreakMinutes] = useState(60)
+  const [editStandardWorkingMinutes, setEditStandardWorkingMinutes] = useState(480)
+  const [editOtMultiplier, setEditOtMultiplier] = useState(1.5)
+  const [editWorkingDays, setEditWorkingDays] = useState<boolean[]>([true, true, true, true, true, false, false])
+  const [editErrors, setEditErrors] = useState<Record<string, string>>({})
+  const [editSubmitting, setEditSubmitting] = useState(false)
+  const [editLoading, setEditLoading] = useState(false)
+
  function load() {
    workShiftsApi
-      .list({ page, pageSize: PAGE_SIZE })
+      .list({ page, pageSize, q: debouncedSearch || undefined })
      .then((res) => {
        setItems(res.items)
        setPagination(res.pagination)
@@ -52,7 +76,15 @@ export default function WorkShiftsPage() {
      .catch((err) => setError(errorMessage(err)))
  }

-  useEffect(load, [page])
+  useEffect(load, [page, pageSize, debouncedSearch]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      setPage(1)
+      setDebouncedSearch(search.trim())
+    }, 300)
+    return () => clearTimeout(t)
+  }, [search])

  async function handleCreate() {
    const nextErrors: Record<string, string> = {}
@@ -88,12 +120,84 @@ export default function WorkShiftsPage() {
    }
  }

+  async function openEdit(item: WorkShift) {
+    setEditItem(item)
+    setEditName(item.name)
+    setEditStartTime(item.startTime.slice(0, 5))
+    setEditEndTime(item.endTime.slice(0, 5))
+    setEditIsOvernight(item.isOvernight)
+    setEditGraceMinutes(item.graceMinutes)
+    setEditBreakMinutes(item.breakMinutes)
+    setEditStandardWorkingMinutes(item.standardWorkingMinutes)
+    setEditOtMultiplier(item.otMultiplier)
+    setEditWorkingDays(maskToDays(item.workingDaysMask))
+    setEditErrors({})
+    setEditEtag(null)
+    setEditLoading(true)
+    try {
+      const res = await workShiftsApi.get(item.workShiftId)
+      setEditEtag(res.etag)
+    } catch (err) {
+      toast.error("Could not load work shift", errorMessage(err))
+      setEditItem(null)
+    } finally {
+      setEditLoading(false)
+    }
+  }
+
+  async function handleEditSave() {
+    if (!editItem || !editEtag) return
+    const nextErrors: Record<string, string> = {}
+    if (!editName.trim()) nextErrors.name = "Name is required"
+    setEditErrors(nextErrors)
+    if (Object.keys(nextErrors).length > 0) return
+
+    const mask = editWorkingDays.reduce((m, on, i) => (on ? m | (1 << i) : m), 0)
+    setEditSubmitting(true)
+    try {
+      await workShiftsApi.update(editItem.workShiftId, {
+        name: editName.trim(),
+        startTime: `${editStartTime}:00`,
+        endTime: `${editEndTime}:00`,
+        isOvernight: editIsOvernight,
+        graceMinutes: editGraceMinutes,
+        breakMinutes: editBreakMinutes,
+        standardWorkingMinutes: editStandardWorkingMinutes,
+        otMultiplier: editOtMultiplier,
+        workingDaysMask: mask,
+      }, editEtag)
+      toast.success("Work shift updated")
+      setEditItem(null)
+      load()
+    } catch (err) {
+      toast.error("Could not save", errorMessage(err))
+    } finally {
+      setEditSubmitting(false)
+    }
+  }
+
  async function toggleStatus(item: WorkShift) {
+    setActionPendingId(item.workShiftId)
    try {
      await workShiftsApi.updateStatus(item.workShiftId, item.status === "Active" ? "Inactive" : "Active")
      load()
    } catch (err) {
      toast.error("Could not update status", errorMessage(err))
+    } finally {
+      setActionPendingId(null)
+    }
+  }
+
+  async function handleDelete(item: WorkShift) {
+    setActionPendingId(item.workShiftId)
+    try {
+      await workShiftsApi.remove(item.workShiftId)
+      toast.success("Work shift deleted")
+      load()
+    } catch (err) {
+      toast.error("Could not delete work shift", errorMessage(err))
+    } finally {
+      setActionPendingId(null)
    }
  }

@@ -101,7 +205,14 @@ export default function WorkShiftsPage() {
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
-          <h1 className="text-2xl font-bold text-foreground">Work Shifts</h1>
+          <div className="flex items-center gap-2.5">
+            <h1 className="text-2xl font-bold text-foreground">Work Shifts</h1>
+            {pagination && (
+              <span className="rounded-full border bg-white px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                {pagination.totalItems}
+              </span>
+            )}
+          </div>
          <p className="text-base text-muted-foreground">The baseline Attendance computes Late/Early/OT against.</p>
        </div>
        <Dialog open={open} onOpenChange={setOpen}>
@@ -174,46 +285,289 @@ export default function WorkShiftsPage() {
        </Dialog>
      </div>

+      <Dialog open={!!editItem} onOpenChange={(v) => !v && setEditItem(null)}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader className="items-center text-center">
+            <DialogTitle>Edit Work Shift</DialogTitle>
+            <DialogDescription>Code can&apos;t be changed after creation.</DialogDescription>
+          </DialogHeader>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="w-edit-code">Code</FieldLabel>
+              <Input id="w-edit-code" value={editItem?.code ?? ""} disabled />
+            </Field>
+            <Field data-invalid={!!editErrors.name}>
+              <FieldLabel htmlFor="w-edit-name">Name</FieldLabel>
+              <Input
+                id="w-edit-name"
+                value={editName}
+                onChange={(e) => setEditName(e.target.value)}
+                aria-invalid={!!editErrors.name}
+                disabled={editLoading}
+              />
+              <FieldError errors={[editErrors.name ? { message: editErrors.name } : undefined]} />
+            </Field>
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <Field>
+                <FieldLabel htmlFor="w-edit-start">Start time</FieldLabel>
+                <Input id="w-edit-start" type="time" value={editStartTime} onChange={(e) => setEditStartTime(e.target.value)} disabled={editLoading} />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="w-edit-end">End time</FieldLabel>
+                <Input id="w-edit-end" type="time" value={editEndTime} onChange={(e) => setEditEndTime(e.target.value)} disabled={editLoading} />
+              </Field>
+            </div>
+            <Field orientation="horizontal">
+              <Checkbox id="w-edit-overnight" checked={editIsOvernight} onCheckedChange={(v) => setEditIsOvernight(v === true)} disabled={editLoading} />
+              <FieldLabel htmlFor="w-edit-overnight">Overnight shift (end time rolls past midnight)</FieldLabel>
+            </Field>
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <Field>
+                <FieldLabel htmlFor="w-edit-grace">Grace (minutes)</FieldLabel>
+                <Input id="w-edit-grace" type="number" min={0} value={editGraceMinutes} onChange={(e) => setEditGraceMinutes(Number(e.target.value))} disabled={editLoading} />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="w-edit-break">Break (minutes)</FieldLabel>
+                <Input id="w-edit-break" type="number" min={0} value={editBreakMinutes} onChange={(e) => setEditBreakMinutes(Number(e.target.value))} disabled={editLoading} />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="w-edit-standard">Standard working minutes</FieldLabel>
+                <Input id="w-edit-standard" type="number" min={1} value={editStandardWorkingMinutes} onChange={(e) => setEditStandardWorkingMinutes(Number(e.target.value))} disabled={editLoading} />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="w-edit-ot">OT multiplier</FieldLabel>
+                <Input id="w-edit-ot" type="number" step="0.1" min={1} value={editOtMultiplier} onChange={(e) => setEditOtMultiplier(Number(e.target.value))} disabled={editLoading} />
+              </Field>
+            </div>
+            <Field>
+              <FieldLabel>Working days</FieldLabel>
+              <div className="flex flex-wrap gap-3 pt-1">
+                {DAYS.map((d, i) => (
+                  <label key={d} className="flex items-center gap-1.5 text-sm">
+                    <Checkbox
+                      checked={editWorkingDays[i]}
+                      onCheckedChange={(v) => setEditWorkingDays((prev) => prev.map((p, idx) => (idx === i ? v === true : p)))}
+                      disabled={editLoading}
+                    />
+                    {d}
+                  </label>
+                ))}
+              </div>
+            </Field>
+          </FieldGroup>
+          <div className="flex justify-center gap-3 pt-2">
+            <Button variant="outline" className="min-w-32" onClick={() => setEditItem(null)} disabled={editSubmitting}>Cancel</Button>
+            <Button className="min-w-32" onClick={handleEditSave} disabled={editSubmitting || editLoading}>
+              {editSubmitting ? "Saving…" : "Save"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <div className="relative w-full sm:max-w-xs">
+        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search by code or name…"
+          className="h-10 pl-9 pr-9"
+          aria-label="Search work shifts"
+        />
+        {search && (
+          <button
+            type="button"
+            onClick={() => setSearch("")}
+            aria-label="Clear search"
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>
+
      {error && <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>}
-      {!error && items === null && <div className="flex flex-col gap-3">{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-14 w-full" />)}</div>}
-      {!error && items !== null && items.length === 0 && (
-        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center"><p className="text-base text-muted-foreground">No work shifts yet.</p></div>
+
+      {!error && items === null && (
+        <div className="overflow-hidden rounded-xl border">
+          <div className="flex h-11 items-center gap-4 border-b bg-muted/20 px-4">
+            <Skeleton className="h-3.5 w-16" />
+            <Skeleton className="ml-auto h-3.5 w-16" />
+          </div>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-3 border-b px-4 py-4 last:border-b-0">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-5 w-16 rounded-full" />
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="ml-auto h-7 w-20" />
+            </div>
+          ))}
+        </div>
      )}
+
+      {!error && items !== null && items.length === 0 && debouncedSearch && (
+        <div className="flex flex-col items-center gap-3 rounded-xl border border-dashed py-16 text-center">
+          <Search className="size-10 text-muted-foreground" />
+          <div>
+            <p className="text-base font-medium text-foreground">No work shifts match &quot;{debouncedSearch}&quot;</p>
+            <p className="text-sm text-muted-foreground">Try a different code or name.</p>
+          </div>
+          <Button variant="outline" size="sm" onClick={() => setSearch("")}>
+            Clear search
+          </Button>
+        </div>
+      )}
+
+      {!error && items !== null && items.length === 0 && !debouncedSearch && (
+        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center">
+          <p className="text-base text-muted-foreground">No work shifts yet.</p>
+        </div>
+      )}
+
      {!error && items !== null && items.length > 0 && (
-        <Table className="text-base">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="h-12 px-3 text-sm">Code</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Name</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Hours</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Status</TableHead>
-              <TableHead className="h-12 px-3 text-sm">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {items.map((w) => (
-              <TableRow key={w.workShiftId}>
-                <TableCell className="px-3 py-3.5 font-medium">{w.code}</TableCell>
-                <TableCell className="px-3 py-3.5">{w.name}</TableCell>
-                <TableCell className="px-3 py-3.5">{w.startTime.slice(0, 5)}–{w.endTime.slice(0, 5)}</TableCell>
-                <TableCell className="px-3 py-3.5">
-                  <Badge variant="outline" className={cn("h-6 w-fit justify-center border-transparent px-2.5 text-sm", w.status === "Active" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground")}>{w.status}</Badge>
-                </TableCell>
-                <TableCell className="px-3 py-3.5">
-                  <Button variant="ghost" size="sm" onClick={() => toggleStatus(w)}>{w.status === "Active" ? "Deactivate" : "Activate"}</Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <div className="overflow-hidden rounded-xl border">
+          <div className="overflow-x-auto">
+            <Table className="table-fixed text-base">
+              <TableHeader>
+                <TableRow className="hover:bg-transparent">
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Code</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Name</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Hours</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Status</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-sm">Created</TableHead>
+                  <TableHead className="h-11 w-1/6 px-4 text-center text-sm">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {items.map((w) => (
+                  <TableRow key={w.workShiftId} className="group align-top hover:bg-muted/20">
+                    <TableCell className="px-4 py-4 font-mono text-sm text-foreground">{w.code}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-foreground">{w.name}</TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">{w.startTime.slice(0, 5)}–{w.endTime.slice(0, 5)}</TableCell>
+                    <TableCell className="px-4 py-4">
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          "h-5 w-fit justify-center bg-white px-2 text-xs",
+                          w.status === "Active" ? "border-success/40 text-success" : "border-input text-muted-foreground"
+                        )}
+                      >
+                        {w.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="px-4 py-4 text-sm text-muted-foreground">
+                      {new Date(w.createdAt).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })}
+                    </TableCell>
+                    <TableCell className="px-4 py-4">
+                      <div className="flex items-center justify-center gap-1">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          aria-label={`Edit ${w.name}`}
+                          title={`Edit ${w.name}`}
+                          onClick={() => openEdit(w)}
+                        >
+                          <Pencil className="size-4" />
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          className={cn(
+                            w.status === "Active"
+                              ? "text-destructive hover:bg-destructive/10"
+                              : "text-success hover:bg-success/10"
+                          )}
+                          aria-label={w.status === "Active" ? `Deactivate ${w.name}` : `Activate ${w.name}`}
+                          title={w.status === "Active" ? `Deactivate ${w.name}` : `Activate ${w.name}`}
+                          disabled={actionPendingId === w.workShiftId}
+                          onClick={() => toggleStatus(w)}
+                        >
+                          {w.status === "Active" ? <XCircle className="size-4" /> : <CheckCircle2 className="size-4" />}
+                        </Button>
+                        <AlertDialog>
+                          <AlertDialogTrigger
+                            render={
+                              <Button
+                                variant="ghost"
+                                size="icon-sm"
+                                className="text-destructive hover:bg-destructive/10 disabled:pointer-events-auto disabled:cursor-not-allowed"
+                                aria-label={`Delete ${w.name}`}
+                                title={`Delete ${w.name}`}
+                                disabled={actionPendingId === w.workShiftId}
+                              />
+                            }
+                          >
+                            <Trash2 className="size-4" />
+                          </AlertDialogTrigger>
+                          <AlertDialogContent
+                            variant="destructive"
+                            title={`Delete ${w.name}?`}
+                            description="This permanently removes this work shift. This cannot be undone. Blocked if it's assigned to any employees — deactivate it instead in that case."
+                            confirmLabel="Delete"
+                            onConfirm={() => handleDelete(w)}
+                          />
+                        </AlertDialog>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
      )}
-      {pagination && pagination.totalPages > 1 && (
-        <div className="flex items-center justify-between">
-          <p className="text-sm text-muted-foreground">Showing {(pagination.page - 1) * pagination.pageSize + 1}–{Math.min(pagination.page * pagination.pageSize, pagination.totalItems)} of {pagination.totalItems}</p>
+
+      {pagination && pagination.totalItems > 0 && (
+        <div className="flex flex-col-reverse items-center gap-3 sm:flex-row sm:justify-between">
+          <div className="flex items-center gap-3">
+            <p className="text-sm text-muted-foreground">
+              Showing <span className="font-medium text-foreground">{(pagination.page - 1) * pagination.pageSize + 1}</span>–
+              <span className="font-medium text-foreground">
+                {Math.min(pagination.page * pagination.pageSize, pagination.totalItems)}
+              </span>{" "}
+              of <span className="font-medium text-foreground">{pagination.totalItems}</span> work shifts
+            </p>
+            <label className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              Rows per page
+              <select
+                value={pageSize}
+                onChange={(e) => { setPage(1); setPageSize(Number(e.target.value)) }}
+                className="h-8 rounded-md border border-black bg-white px-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                aria-label="Rows per page"
+              >
+                {PAGE_SIZE_OPTIONS.map((size) => (
+                  <option key={size} value={size}>{size}</option>
+                ))}
+              </select>
+            </label>
+          </div>
          <div className="flex items-center gap-2">
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>Previous</Button>
-            <span className="text-sm text-muted-foreground">Page {pagination.page} of {pagination.totalPages}</span>
-            <Button type="button" variant="outline" size="sm" disabled={pagination.page >= pagination.totalPages} onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}>Next</Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page <= 1}
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+            >
+              <ChevronLeft className="size-4" />
+              Previous
+            </Button>
+            <span className="min-w-20 text-center text-sm text-muted-foreground">
+              Page {pagination.page} of {pagination.totalPages}
+            </span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pagination.page >= pagination.totalPages}
+              onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}
+            >
+              Next
+              <ChevronRight className="size-4" />
+            </Button>
          </div>
        </div>
      )}
@@ -11,15 +11,15 @@ export default function DashboardLayout({
 }) {
  return (
    <AuthProvider>
-      <div className="flex h-screen overflow-hidden bg-background">
+      <div className="flex h-screen overflow-hidden bg-background print:block print:h-auto print:overflow-visible">
        <AppSidebar />
        <main className="flex min-w-0 flex-1 flex-col">
          <Header />
-          <div className="min-w-0 flex-1 overflow-auto">
-            <div className="min-w-0 px-6 pt-3 pb-6 lg:px-8 lg:pt-4 lg:pb-8">
+          <div className="min-w-0 flex-1 overflow-auto print:overflow-visible">
+            <div className="min-w-0 px-6 pt-3 pb-6 lg:px-8 lg:pt-4 lg:pb-8 print:p-0">
              <Breadcrumbs />
-              <div className="rounded-xl bg-card border border-border shadow-sm">
-                <div className="p-6">
+              <div className="rounded-xl bg-card border border-border shadow-sm print:rounded-none print:border-0 print:shadow-none">
+                <div className="p-6 print:p-0">
                  {children}
                </div>
              </div>
@@ -112,6 +112,17 @@ function NewPurchaseInvoiceContent() {
    [vendors]
  )

+  // Deep-linked from a GRN detail page's "Create Purchase Invoice" prompt — that GRN is the
+  // whole reason this page was opened, so show only it rather than the vendor's full eligible
+  // list (which could pull in unrelated GRNs the user never meant to consolidate here).
+  // Declared before toggleAll, which reads it: referencing it ahead of its declaration stopped
+  // the React Compiler from preserving this memo (react-hooks/preserve-manual-memoization).
+  const deepLinkedGrnId = grnIdFromQuery ? Number(grnIdFromQuery) : null
+  const visibleGrns = useMemo(
+    () => (deepLinkedGrnId === null ? (eligibleGrns ?? []) : (eligibleGrns ?? []).filter((g) => g.grnId === deepLinkedGrnId)),
+    [eligibleGrns, deepLinkedGrnId]
+  )
+
  function toggleGrn(grnId: number, checked: boolean) {
    setSelectedGrnIds((prev) => {
      const next = new Set(prev)
@@ -125,15 +136,6 @@ function NewPurchaseInvoiceContent() {
    setSelectedGrnIds(checked ? new Set(visibleGrns.map((g) => g.grnId)) : new Set())
  }

-  // Deep-linked from a GRN detail page's "Create Purchase Invoice" prompt — that GRN is the
-  // whole reason this page was opened, so show only it rather than the vendor's full eligible
-  // list (which could pull in unrelated GRNs the user never meant to consolidate here).
-  const deepLinkedGrnId = grnIdFromQuery ? Number(grnIdFromQuery) : null
-  const visibleGrns = useMemo(
-    () => (deepLinkedGrnId === null ? (eligibleGrns ?? []) : (eligibleGrns ?? []).filter((g) => g.grnId === deepLinkedGrnId)),
-    [eligibleGrns, deepLinkedGrnId]
-  )
-
  const selectedGrns = useMemo(
    () => (eligibleGrns ?? []).filter((g) => selectedGrnIds.has(g.grnId)),
    [eligibleGrns, selectedGrnIds]
@@ -297,18 +297,18 @@ export default function GrnDetailPage() {
      </Table>
      </div>

-      <div className="flex flex-wrap justify-end gap-8 border-t border-border pt-4 text-base">
-        <div className="flex gap-3">
-          <span className="text-muted-foreground">Stock value (excl. VAT)</span>
-          <span className="tabular-nums">{grn.lines.reduce((s, l) => s + l.receivedValue, 0).toFixed(2)}</span>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div className="flex flex-col gap-1 rounded-xl border border-border bg-white p-5 shadow-sm">
+          <span className="text-sm text-muted-foreground">Stock value (excl. VAT)</span>
+          <span className="text-xl font-semibold tabular-nums">{grn.lines.reduce((s, l) => s + l.receivedValue, 0).toFixed(2)}</span>
        </div>
-        <div className="flex gap-3">
-          <span className="text-muted-foreground">VAT</span>
-          <span className="tabular-nums">{grn.lines.reduce((s, l) => s + l.vatAmount, 0).toFixed(2)}</span>
+        <div className="flex flex-col gap-1 rounded-xl border border-border bg-white p-5 shadow-sm">
+          <span className="text-sm text-muted-foreground">VAT</span>
+          <span className="text-xl font-semibold tabular-nums">{grn.lines.reduce((s, l) => s + l.vatAmount, 0).toFixed(2)}</span>
        </div>
-        <div className="flex gap-3">
-          <span className="text-muted-foreground">Document total</span>
-          <span className="font-semibold tabular-nums">{grn.lines.reduce((s, l) => s + l.lineTotal, 0).toFixed(2)}</span>
+        <div className="flex flex-col gap-1 rounded-xl border border-border bg-white p-5 shadow-sm">
+          <span className="text-sm text-muted-foreground">Document total</span>
+          <span className="text-xl font-semibold tabular-nums">{grn.lines.reduce((s, l) => s + l.lineTotal, 0).toFixed(2)}</span>
        </div>
      </div>

@@ -88,7 +88,7 @@ export default function SalesDayEndPage() {
        <div>
          <h1 className="text-2xl font-bold text-foreground">Day End</h1>
          <p className="text-base text-muted-foreground">
-            Close a cashier's business day — locks their posted sales slips and bundle sales, and posts one consolidated journal entry to the ledger.
+            Close a cashier&apos;s business day — locks their posted sales slips and bundle sales, and posts one consolidated journal entry to the ledger.
          </p>
        </div>
      </div>
@@ -0,0 +1,7 @@
+"use client"
+
+import { BranchDetailPage } from "@/components/settings/BranchDetailPage"
+
+export default function BranchDetail() {
+  return <BranchDetailPage />
+}
@@ -3,10 +3,10 @@ import { Building2, LayoutTemplate, MapPin, SlidersHorizontal } from "lucide-rea

 const cards = [
  {
-    title: "Product Configuration",
-    href: "/dashboard/products/settings",
-    icon: SlidersHorizontal,
-    description: "Configure product and master-data options",
+    title: "Company Profile",
+    href: "/dashboard/settings/company-profile",
+    icon: Building2,
+    description: "Invoice header, tax, and bank details",
  },
  {
    title: "Branch Configuration",
@@ -14,18 +14,18 @@ const cards = [
    icon: MapPin,
    description: "Turn multi-branch mode on or off for this deployment",
  },
+  {
+    title: "Product Configuration",
+    href: "/dashboard/products/settings",
+    icon: SlidersHorizontal,
+    description: "Configure product and master-data options",
+  },
  {
    title: "Invoice Template",
    href: "/dashboard/settings/invoice-template",
    icon: LayoutTemplate,
    description: "Logo, footer, terms, and template style for printed invoices",
  },
-  {
-    title: "Company Profile",
-    href: "/dashboard/settings/company-profile",
-    icon: Building2,
-    description: "Invoice header, tax, and bank details",
-  },
 ]

 export default function ConfigurationPage() {
@@ -38,7 +38,7 @@ export default function ConfigurationPage() {
        </p>
      </div>

-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        {cards.map((card) => (
          <Link
            key={card.href}
@@ -149,14 +149,14 @@ export default function InvoiceTemplatePage() {
                <Switch checked={showBankDetails} onCheckedChange={setShowBankDetails} className="mt-1 shrink-0" aria-label="Show bank details" />
                <div className="flex flex-col gap-1">
                  <span className="text-base font-medium text-foreground">Show bank details</span>
-                  <span className="text-sm text-muted-foreground">Prints the company's bank name, account and SWIFT code on invoices.</span>
+                  <span className="text-sm text-muted-foreground">Prints the company&apos;s bank name, account and SWIFT code on invoices.</span>
                </div>
              </div>
              <div className="flex items-start gap-4 py-4">
                <Switch checked={showTaxRegNo} onCheckedChange={setShowTaxRegNo} className="mt-1 shrink-0" aria-label="Show tax registration no." />
                <div className="flex flex-col gap-1">
                  <span className="text-base font-medium text-foreground">Show tax registration no.</span>
-                  <span className="text-sm text-muted-foreground">Prints the company's tax registration number in the invoice header.</span>
+                  <span className="text-sm text-muted-foreground">Prints the company&apos;s tax registration number in the invoice header.</span>
                </div>
              </div>
            </div>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
ImanThiyanga	3b87a6e421	Merge branch 'Dev' into feat/ci-cd-implementation CI/CD - ERP Core / detect (pull_request) Waiting to run Details CI/CD - ERP Core / backend (pull_request) Blocked by required conditions Details CI/CD - ERP Core / frontend (pull_request) Blocked by required conditions Details CI/CD - ERP Core / e2e-typecheck (pull_request) Blocked by required conditions Details CI/CD - ERP Core / scripts (pull_request) Blocked by required conditions Details CI/CD - ERP Core / ci-ok (pull_request) Blocked by required conditions Details CI/CD - ERP Core / Build & Deploy (pull_request) Waiting to run Details	2026-09-16 18:30:22 +00:00
ImanThiyanga	2a7a44cc27	change in to merge CI/CD - ERP Core / detect (pull_request) Failing after 13m11s Details CI/CD - ERP Core / ci-ok (pull_request) Has been cancelled Details CI/CD - ERP Core / Build & Deploy (pull_request) Failing after 12m17s Details CI/CD - ERP Core / backend (pull_request) Has been cancelled Details CI/CD - ERP Core / frontend (pull_request) Has been cancelled Details CI/CD - ERP Core / e2e-typecheck (pull_request) Has been cancelled Details CI/CD - ERP Core / scripts (pull_request) Has been cancelled Details	2026-09-16 23:48:07 +05:30
ImanThiyanga	c7cf63e7de	initiating connection fixes	2026-09-16 23:47:47 +05:30
ImanThiyanga	d1044e4728	final fix	2026-09-16 13:53:57 +05:30
ImanThiyanga	d6f973202d	Merge branch 'production' into Dev CI/CD - ERP Core / Build & Deploy (pull_request) Failing after 10m38s Details CI/CD - ERP Core / detect (pull_request) Failing after 11m30s Details CI/CD - ERP Core / scripts (pull_request) Failing after 11m31s Details CI/CD - ERP Core / e2e-typecheck (pull_request) Failing after 12m23s Details CI/CD - ERP Core / frontend (pull_request) Failing after 13m14s Details CI/CD - ERP Core / backend (pull_request) Failing after 14m6s Details CI/CD - ERP Core / ci-ok (pull_request) Failing after 14m59s Details	2026-09-16 06:36:19 +00:00
ImanThiyanga	1d5a5cf68e	Merge pull request 'Feat/ci cd implementation' (#57 ) from feat/ci-cd-implementation into Dev CI/CD - ERP Core / detect (pull_request) Has been cancelled Details CI/CD - ERP Core / backend (pull_request) Has been cancelled Details CI/CD - ERP Core / frontend (pull_request) Has been cancelled Details CI/CD - ERP Core / e2e-typecheck (pull_request) Has been cancelled Details CI/CD - ERP Core / scripts (pull_request) Has been cancelled Details CI/CD - ERP Core / ci-ok (pull_request) Has been cancelled Details CI/CD - ERP Core / Build & Deploy (pull_request) Has been cancelled Details Reviewed-on: #57	2026-09-16 06:24:55 +00:00
ImanThiyanga	8e472ac996	initialising for ci-cd pipeline CI/CD - ERP Core / scripts (pull_request) Failing after 12m21s Details CI/CD - ERP Core / e2e-typecheck (pull_request) Failing after 13m13s Details CI/CD - ERP Core / frontend (pull_request) Failing after 14m5s Details CI/CD - ERP Core / backend (pull_request) Failing after 14m57s Details CI/CD - ERP Core / detect (pull_request) Failing after 13m42s Details CI/CD - ERP Core / Build & Deploy (pull_request) Failing after 12m47s Details CI/CD - ERP Core / ci-ok (pull_request) Failing after 14m58s Details	2026-09-16 11:53:55 +05:30
ImanThiyanga	666979cf22	initiated ci-cd pipeline for the erp core with fronend changes to detect changes on both front and back	2026-09-16 11:53:17 +05:30
ashan_rusiru	eb36e0acfa	Merge pull request 'Users and employees arrangements' (#56 ) from users-and-employees-arrangements into Dev Reviewed-on: #56	2026-09-14 05:23:25 +00:00
ashan_rusiru	0ff39e9e58	Merge pull request 'Users and employees arrangements' (#53 ) from users-and-employees-arrangements into production Reviewed-on: #53	2026-09-13 07:52:34 +00:00
ashan_rusiru	cbb610fc8b	Merge branch 'production' into users-and-employees-arrangements	2026-09-13 07:52:24 +00:00
ashan_rusiru	afa9928dcc	Merge pull request 'bug fixing' (#55 ) from bug-fixing into Dev Reviewed-on: #55	2026-09-13 07:52:06 +00:00
Sasanka	99aa395fb1	updeted	2026-09-13 08:30:18 +05:30
Sasanka	cb41d503c4	emloyee and user fixings	2026-09-11 10:32:47 +05:30
ImanThiyanga	b4993b202d	Merge pull request 'Dev' (#45 ) from Dev into production Reviewed-on: #45	2026-08-13 06:52:56 +00:00