cbsnexora/src/app/deaf/deaf.component.html

<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<div class="deaf-root">
  <!-- HEADER -->
  <div class="deaf-head">
    <div class="deaf-head-left">
      <fa-icon icon="university" class="deaf-head-ic"></fa-icon>
      <div>
        <h2 class="deaf-head-t">Depositor Education and Awareness Fund (DEAF)</h2>
        <div class="deaf-head-s">RBI Master Direction on DEAF, 2014 &middot; Returns &amp; refund register</div>
      </div>
    </div>
    <div class="deaf-head-meta">
      <div>
        <span class="deaf-meta-l">Bank DEAF Code</span><span class="deaf-meta-v">{{ formII.bankDeafCode }}</span>
      </div>
      <div>
        <span class="deaf-meta-l">Sponsor Bank</span><span class="deaf-meta-v">{{ formII.sponsorBankName }}</span>
      </div>
    </div>
  </div>

  <!-- TABS -->
  <div class="deaf-tabs">
    <button class="deaf-tab" [class.active]="activeTab === 'dashboard'" (click)="showTab('dashboard')">
      <fa-icon icon="chart-pie"></fa-icon> Dashboard
    </button>
    <button class="deaf-tab" [class.active]="activeTab === 'form1'" (click)="showTab('form1')">
      <fa-icon icon="file-invoice"></fa-icon> Form I (Transfer Return)
    </button>
    <button class="deaf-tab" [class.active]="activeTab === 'form2'" (click)="showTab('form2')">
      <fa-icon icon="file-invoice"></fa-icon> Form II (Position with Fund)
    </button>
    <button class="deaf-tab" [class.active]="activeTab === 'refund'" (click)="showTab('refund')">
      <fa-icon icon="hand-holding-usd"></fa-icon> Annex 4 (Refund Claim)
    </button>
    <button class="deaf-tab" [class.active]="activeTab === 'eligible'" (click)="showTab('eligible')">
      <fa-icon icon="users"></fa-icon> Accounts Register
    </button>
  </div>

  <!-- DASHBOARD -->
  @if (activeTab === 'dashboard') {
    <div class="deaf-section">
      <div class="deaf-kpis">
        <div class="deaf-kpi deaf-kpi--blue">
          <div class="deaf-kpi-ic"><fa-icon icon="piggy-bank"></fa-icon></div>
          <div>
            <div class="deaf-kpi-n">&#8377;{{ totalWithFund | number: '1.2-2' }}</div>
            <div class="deaf-kpi-l">Total with Fund</div>
            <div class="deaf-kpi-sub">{{ totalAccountsWithFund | number }} accounts</div>
          </div>
        </div>
        <div class="deaf-kpi deaf-kpi--teal">
          <div class="deaf-kpi-ic"><fa-icon icon="upload"></fa-icon></div>
          <div>
            <div class="deaf-kpi-n">&#8377;{{ transferredThisMonth | number: '1.2-2' }}</div>
            <div class="deaf-kpi-l">Transferred this Month</div>
            <div class="deaf-kpi-sub">{{ accountsTransferredThisMonth | number }} accounts</div>
          </div>
        </div>
        <div class="deaf-kpi deaf-kpi--green">
          <div class="deaf-kpi-ic"><fa-icon icon="hand-holding-usd"></fa-icon></div>
          <div>
            <div class="deaf-kpi-n">&#8377;{{ refundedThisCycle | number: '1.2-2' }}</div>
            <div class="deaf-kpi-l">Claims Paid (refunded)</div>
            <div class="deaf-kpi-sub">{{ refundAccountsThisCycle | number }} accounts</div>
          </div>
        </div>
        <div class="deaf-kpi deaf-kpi--amber">
          <div class="deaf-kpi-ic"><fa-icon icon="exclamation-triangle"></fa-icon></div>
          <div>
            <div class="deaf-kpi-n">{{ accountsCrossing10Y | number }}</div>
            <div class="deaf-kpi-l">Crossing 10y this Cycle</div>
            <div class="deaf-kpi-sub">eligible to transfer</div>
          </div>
        </div>
        <div class="deaf-kpi deaf-kpi--red">
          <div class="deaf-kpi-ic"><fa-icon icon="clock"></fa-icon></div>
          <div>
            <div class="deaf-kpi-n">{{ pendingClaims | number }}</div>
            <div class="deaf-kpi-l">Refund Claims Pending</div>
            <div class="deaf-kpi-sub">awaiting RBI settlement</div>
          </div>
        </div>
      </div>

      <!-- Compliance summary -->
      <div class="deaf-compliance">
        <div class="dc-card">
          <div class="dc-card-h">
            <fa-icon icon="check-circle" class="dc-ok"></fa-icon><span>Form I — Online Submission</span>
          </div>
          <div class="dc-meta">Last filed: <strong>15 Jan 2026</strong> &middot; Cycle: {{ formI.monthYear }}</div>
          <div class="dc-meta">Next due: <strong>15 Feb 2026</strong></div>
          <button class="dc-btn" (click)="showTab('form1')"><fa-icon icon="external-link-alt"></fa-icon> Open</button>
        </div>
        <div class="dc-card">
          <div class="dc-card-h">
            <fa-icon icon="check-circle" class="dc-ok"></fa-icon><span>Form II — Physical Hardcopy</span>
          </div>
          <div class="dc-meta">Last filed: <strong>15 Jan 2026</strong> &middot; Cycle: {{ formII.monthYear }}</div>
          <div class="dc-meta">Next due: <strong>15 Feb 2026</strong></div>
          <button class="dc-btn" (click)="showTab('form2')"><fa-icon icon="external-link-alt"></fa-icon> Open</button>
        </div>
        <div class="dc-card">
          <div class="dc-card-h">
            <fa-icon icon="hand-holding-usd" class="dc-info"></fa-icon><span>Annex 4 — Refund Claim</span>
          </div>
          <div class="dc-meta">
            Cycle: <strong>{{ refund.month }} {{ refund.year }}</strong>
          </div>
          <div class="dc-meta">
            Pending claims: <strong>{{ pendingClaims }}</strong>
          </div>
          <button class="dc-btn" (click)="showTab('refund')"><fa-icon icon="external-link-alt"></fa-icon> Open</button>
        </div>
      </div>
    </div>
  }

  <!-- FORM I / FORM II — shared template -->
  @if (activeTab === 'form1' || activeTab === 'form2') {
    @let _form = activeTab === 'form1' ? formI : formII;
    <div class="deaf-section">
      <div class="deaf-form-meta">
        <div class="deaf-form-title">
          @if (activeTab === 'form1') {
            <h3>Form I — Monthly Return of Unclaimed Deposits Transferred to DEAF</h3>
            <p>Filed online with RBI by 15th of the succeeding month</p>
          } @else {
            <h3>Form II — Position with the Fund (snapshot)</h3>
            <p>Original hardcopy submitted to RBI by 15th of the succeeding month</p>
          }
        </div>
        <button class="deaf-btn deaf-btn-xls" (click)="activeTab === 'form1' ? exportFormI() : exportFormII()">
          <fa-icon icon="file-excel"></fa-icon> Download Excel
        </button>
      </div>

      <div class="deaf-meta-grid">
        <div>
          <label>Name of the Bank</label><span>{{ _form.bankName }}</span>
        </div>
        <div>
          <label>DEAF Code (RBI)</label><span>{{ _form.bankDeafCode }}</span>
        </div>
        <div>
          <label>Remitted via Sponsor</label><span>{{ _form.remittedThroughSponsor === 'Y' ? 'Yes' : 'No' }}</span>
        </div>
        <div>
          <label>Sponsor Bank</label><span>{{ _form.sponsorBankName }}</span>
        </div>
        <div>
          <label>Month / Year</label><span>{{ _form.monthYear }}</span>
        </div>
        <div>
          <label>Date of Transfer</label><span>{{ _form.dateOfTransfer }}</span>
        </div>
      </div>

      <div class="deaf-tbl-wrap">
        <table class="deaf-tbl">
          <thead>
            <tr class="hd-1">
              <th rowspan="2" class="ta-c">Sr.No</th>
              <th rowspan="2">Particulars</th>
              <th colspan="2" class="ta-c">Interest Bearing Deposits (a)</th>
              <th colspan="2" class="ta-c">Non-Interest Bearing Deposits (b)</th>
              <th colspan="2" class="ta-c">Other Credits (c)</th>
              <th colspan="2" class="ta-c">Total (d) = (a)+(b)+(c)</th>
            </tr>
            <tr class="hd-2">
              <th class="ta-r">No. of A/c</th>
              <th class="ta-r">Amount</th>
              <th class="ta-r">No. of A/c</th>
              <th class="ta-r">Amount</th>
              <th class="ta-r">No. of A/c</th>
              <th class="ta-r">Amount</th>
              <th class="ta-r">No. of A/c</th>
              <th class="ta-r">Amount</th>
            </tr>
          </thead>
          <tbody>
            @for (r of _form.rows; track r.sl) {
              <tr [class]="amountClass(r)">
                <td class="ta-c">{{ r.sl }}</td>
                <td>{{ r.particulars }}</td>
                <td class="ta-r">{{ r.ibdAccounts | number }}</td>
                <td class="ta-r mono">{{ r.ibdAmount | number: '1.2-2' }}</td>
                <td class="ta-r">{{ r.nibdAccounts | number }}</td>
                <td class="ta-r mono">{{ r.nibdAmount | number: '1.2-2' }}</td>
                <td class="ta-r">{{ r.ocAccounts | number }}</td>
                <td class="ta-r mono">{{ r.ocAmount | number: '1.2-2' }}</td>
                <td class="ta-r">{{ r.totalAccounts | number }}</td>
                <td class="ta-r mono">{{ r.totalAmount | number: '1.2-2' }}</td>
              </tr>
            }
          </tbody>
        </table>
      </div>

      <div class="deaf-sign">
        <div class="deaf-sign-block">
          <label>Authorised Officer</label>
          <div class="sign-name">{{ _form.officer }}</div>
          <div class="sign-desg">{{ _form.officerDesignation }}</div>
        </div>
        <div class="deaf-sign-block">
          <label>Concurrent Auditor</label>
          <div class="sign-name">{{ _form.auditor }}</div>
          <div class="sign-desg">{{ _form.auditorAddress }}</div>
        </div>
      </div>
    </div>
  }

  <!-- ANNEX 4 — REFUND CLAIM -->
  @if (activeTab === 'refund') {
    <div class="deaf-section">
      <div class="deaf-form-meta">
        <div class="deaf-form-title">
          <h3>Annex 4 — Monthly Return claiming refund from DEA Fund</h3>
          <p>Submitted by 15th of succeeding month for the cycle to which the claim pertains</p>
        </div>
        <button class="deaf-btn deaf-btn-xls" (click)="exportRefund()">
          <fa-icon icon="file-excel"></fa-icon> Download Excel
        </button>
      </div>

      <div class="deaf-meta-grid">
        <div>
          <label>Name of the Bank</label><span>{{ refund.bankName }}</span>
        </div>
        <div>
          <label>DEAF Code (RBI)</label><span>{{ refund.bankDeafCode }}</span>
        </div>
        <div>
          <label>Current A/c with RBI</label><span class="mono">{{ refund.currentAcWithRbi }}</span>
        </div>
        <div>
          <label>Maintained with</label><span>{{ refund.sponsorBank }}</span>
        </div>
        <div>
          <label>Month / Year</label><span>{{ refund.month }} {{ refund.year }}</span>
        </div>
      </div>

      <div class="deaf-tbl-wrap">
        <table class="deaf-tbl">
          <thead>
            <tr class="hd-1">
              <th rowspan="2" class="ta-c">Sr.No</th>
              <th colspan="3" class="ta-c">Interest Bearing Deposits</th>
              <th colspan="2" class="ta-c">Non-Interest Bearing Deposits</th>
              <th colspan="2" class="ta-c">Other Credits</th>
              <th colspan="2" class="ta-c">Grand Total</th>
            </tr>
            <tr class="hd-2">
              <th class="ta-r">Principal</th>
              <th class="ta-r">Interest</th>
              <th class="ta-r">Total</th>
              <th class="ta-r">No. of A/c</th>
              <th class="ta-r">Amount</th>
              <th class="ta-r">No. of A/c</th>
              <th class="ta-r">Amount</th>
              <th class="ta-r">No. of A/c</th>
              <th class="ta-r">Amount</th>
            </tr>
          </thead>
          <tbody>
            @for (r of refund.rows; track r.slNo) {
              <tr>
                <td class="ta-c">{{ r.slNo }}</td>
                <td class="ta-r mono">{{ r.ibdPrincipal | number: '1.2-2' }}</td>
                <td class="ta-r mono">{{ r.ibdInterest | number: '1.2-2' }}</td>
                <td class="ta-r mono">{{ r.ibdTotal | number: '1.2-2' }}</td>
                <td class="ta-r">{{ r.nibdAccounts | number }}</td>
                <td class="ta-r mono">{{ r.nibdAmount | number: '1.2-2' }}</td>
                <td class="ta-r">{{ r.ocAccounts | number }}</td>
                <td class="ta-r mono">{{ r.ocAmount | number: '1.2-2' }}</td>
                <td class="ta-r">{{ r.grandTotalAccounts | number }}</td>
                <td class="ta-r mono">{{ r.grandTotalAmount | number: '1.2-2' }}</td>
              </tr>
            }
          </tbody>
        </table>
      </div>

      <div class="deaf-note">
        <fa-icon icon="info-circle"></fa-icon>
        <span
          ><strong>Note:</strong> No individual customer/depositor wise details should be furnished. In case of refund
          of part amount by the depositor whose unclaimed amount/inoperative deposit had been transferred to the Fund,
          the bank shall claim the entire amount transferred to the Fund in respect of such depositor, along with
          interest payable, if any.</span
        >
      </div>

      <div class="deaf-sign">
        <div class="deaf-sign-block">
          <label>First Authorised Signatory</label>
          <div class="sign-name">{{ refund.firstSignatory }}</div>
          <div class="sign-desg">{{ refund.firstDesignation }}</div>
        </div>
        <div class="deaf-sign-block">
          <label>Second Authorised Signatory</label>
          <div class="sign-name">{{ refund.secondSignatory }}</div>
          <div class="sign-desg">{{ refund.secondDesignation }}</div>
        </div>
        <div class="deaf-sign-block">
          <label>Concurrent Auditor</label>
          <div class="sign-name">{{ refund.auditor }}</div>
        </div>
      </div>
    </div>
  }

  <!-- ELIGIBLE / TRANSFERRED ACCOUNTS REGISTER -->
  @if (activeTab === 'eligible') {
    <div class="deaf-section">
      <div class="deaf-form-meta">
        <div class="deaf-form-title">
          <h3>Accounts Register</h3>
          <p>Inoperative / unclaimed accounts crossing 10y, transferred, claimed and refunded</p>
        </div>
        <button class="deaf-btn deaf-btn-xls" (click)="exportEligible()">
          <fa-icon icon="file-excel"></fa-icon> Download Excel
        </button>
      </div>

      <div class="deaf-filters">
        <div class="deaf-filter">
          <label>Status</label>
          <select class="deaf-inp" [(ngModel)]="filterStatus">
            <option value="">All</option>
            <option value="eligible-this-month">Eligible (≥10y)</option>
            <option value="transferred">Transferred</option>
            <option value="claim-pending">Claim Pending</option>
            <option value="refunded">Refunded</option>
          </select>
        </div>
        <div class="deaf-filter">
          <label>Bucket</label>
          <select class="deaf-inp" [(ngModel)]="filterBucket">
            <option value="">All</option>
            <option value="IBD">Interest Bearing</option>
            <option value="NIBD">Non-Interest Bearing</option>
            <option value="OC">Other Credits</option>
          </select>
        </div>
        <div class="deaf-filter">
          <label>Branch</label>
          <input class="deaf-inp" type="text" [(ngModel)]="filterBranch" placeholder="Branch" />
        </div>
        <button class="deaf-btn deaf-btn-g" (click)="resetFilters()">Reset</button>
      </div>

      <div class="deaf-tbl-wrap">
        <table class="deaf-tbl">
          <thead>
            <tr>
              <th>A/c No</th>
              <th>Customer</th>
              <th class="ta-c">Type</th>
              <th>Branch</th>
              <th>Opened</th>
              <th>Last Txn</th>
              <th class="ta-c">Inactive</th>
              <th class="ta-c">Bucket</th>
              <th class="ta-r">Principal</th>
              <th class="ta-r">Interest</th>
              <th class="ta-r">Total</th>
              <th class="ta-c">Status</th>
            </tr>
          </thead>
          <tbody>
            @for (a of filteredAccounts; track a.acNo) {
              <tr>
                <td class="mono">{{ a.acNo }}</td>
                <td>{{ a.customerName }}</td>
                <td class="ta-c">{{ a.acType }}</td>
                <td>{{ a.branch }}</td>
                <td>{{ a.openedDate }}</td>
                <td>{{ a.lastTxnDate }}</td>
                <td class="ta-c">{{ a.inactiveYears }}y</td>
                <td class="ta-c">
                  <span class="bucket-pill" [class]="'bk-' + a.bucket.toLowerCase()">{{ a.bucket }}</span>
                </td>
                <td class="ta-r mono">{{ a.principal | number: '1.2-2' }}</td>
                <td class="ta-r mono">{{ a.interest | number: '1.2-2' }}</td>
                <td class="ta-r mono">{{ a.total | number: '1.2-2' }}</td>
                <td class="ta-c">
                  <span class="status-pill" [class]="'st-' + a.status">{{ statusLabel(a.status) }}</span>
                </td>
              </tr>
            } @empty {
              <tr>
                <td colspan="12" class="deaf-empty">No accounts match the filters.</td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    </div>
  }

  <!-- TOAST -->
  <div class="deaf-toast" [class.show]="toastVisible">{{ toastMsg }}</div>
</div>