cbsnexora/src/app/home/dashboard/crr-slr-dialog/crr-slr-dialog.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="crr-dialog">
  <!-- Header -->
  <div class="dialog-header">
    <div class="header-left">
      <div class="header-badge">
        <fa-icon icon="university"></fa-icon>
        RBI Liabilities Register
      </div>
      <h2 class="dialog-title">Demand &amp; Time Liabilities</h2>
      <p class="dialog-sub">NDTL &middot; CRR/SLR Computation Base &middot; As per RBI Master Circular</p>
    </div>
    <div class="header-right">
      <!-- The close being reported, and under it the close the ratios are charged on. Two dates,
           because they are not the same day and the requirement belongs to the earlier one. -->
      <div class="as-of-box">
        <strong>{{ reportingDateStr || '—' }}</strong>
        <span>
          Fortnight close
          @if (baseDateStr) {
            &middot; charged on {{ baseDateStr }}
          }
        </span>
      </div>
      <a
        class="rbi-circular-btn"
        href="https://www.rbi.org.in/scripts/bs_circularindexdisplay.aspx"
        target="_blank"
        rel="noopener noreferrer"
        matTooltip="View RBI Circulars"
      >
        <fa-icon icon="external-link-alt"></fa-icon>
        RBI Circulars
      </a>
      <button class="close-btn" (click)="close()" matTooltip="Close">
        <fa-icon icon="times"></fa-icon>
      </button>
    </div>
  </div>

  <!-- Summary Cards -->
  <div class="summary-row">
    <div class="summary-card sc-demand">
      <div class="sc-label">Total Demand Liabilities</div>
      <div class="sc-value">{{ crore(totalDemand) }}<span class="cr" *ngIf="totalDemand !== null">Cr</span></div>
      <div class="sc-sub">Payable on demand</div>
    </div>
    <div class="summary-card sc-time">
      <div class="sc-label">Total Time Liabilities</div>
      <div class="sc-value">{{ crore(totalTime) }}<span class="cr" *ngIf="totalTime !== null">Cr</span></div>
      <div class="sc-sub">Payable on maturity</div>
    </div>
    <div class="summary-card sc-asset">
      <div class="sc-label">Assets with Banking System</div>
      <div class="sc-value">
        {{ crore(totalBankingAssets) }}<span class="cr" *ngIf="totalBankingAssets !== null">Cr</span>
      </div>
      <div class="sc-change dn">&#8595; Deducted from NDTL</div>
    </div>
    <div class="summary-card sc-ndtl">
      <div class="sc-label">Net Demand &amp; Time Liabilities (NDTL)</div>
      <div class="sc-value">{{ crore(ndtl) }}<span class="cr" *ngIf="ndtl !== null">Cr</span></div>
      <div class="sc-sub">After deducting banking assets</div>
    </div>
    <div class="summary-card sc-crr">
      <!-- The rate is named from the configuration, not fixed here: a card headed "CRR Required
           (3%)" while Admin holds 4% states a rate the bank is not on. -->
      <div class="sc-label">CRR Required{{ crrRate === null ? '' : ' (' + crrRate + '%)' }}</div>
      <div class="sc-value">{{ crore(crrRequired) }}<span class="cr" *ngIf="crrRequired !== null">Cr</span></div>
      <div class="sc-sub">SLR Req: {{ crore(slrRequired) }}{{ slrRate === null ? '' : ' Cr (' + slrRate + '%)' }}</div>
    </div>
  </div>

  <!-- Why the figures are not there, in the return's own words. A dashboard that simply shows
       dashes sends an administrator looking for a fault in the dashboard. -->
  <div class="unavailable-note" *ngIf="unavailable">
    <fa-icon icon="exclamation-triangle"></fa-icon>
    {{ unavailable }}
  </div>

  <!-- Tab Navigation -->
  <div class="tab-nav">
    <button class="tab-btn" [class.active]="activeTab === 'demand'" (click)="activeTab = 'demand'">
      <span class="tab-pill pill-demand">01</span> Demand Liabilities
    </button>
    <button class="tab-btn" [class.active]="activeTab === 'time'" (click)="activeTab = 'time'">
      <span class="tab-pill pill-time">02</span> Time Liabilities
    </button>
    <button class="tab-btn" [class.active]="activeTab === 'assets'" (click)="activeTab = 'assets'">
      <span class="tab-pill pill-asset">03</span> Assets with Banking System
    </button>
    <button class="tab-btn" [class.active]="activeTab === 'slr'" (click)="activeTab = 'slr'">
      <span class="tab-pill pill-slr">04</span> SLR &mdash; Liquid Assets
    </button>
  </div>

  <!-- Demand Liabilities Table -->
  @if (activeTab === 'demand') {
    <div class="section-desc">Amounts payable on demand &mdash; RBI Schedule II</div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th class="sl">#</th>
            <th>Liability Item</th>
            <th>Account Code</th>
            <th class="right">Opening (&#8377; Cr)</th>
            <th class="right">Current (&#8377; Cr)</th>
            <th class="right">Change (&#8377; Cr)</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          @for (item of demandLiabilities; track item.sl) {
            <tr>
              <td class="sl">{{ item.sl }}</td>
              <td>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-sub">{{ item.sub }}</div>
              </td>
              <td class="mono">{{ item.code }}</td>
              <td class="right amt amt-demand">{{ item.opening }}</td>
              <td class="right amt amt-demand">{{ item.current }}</td>
              <td class="right" [class.up]="item.changeDir === 'up'" [class.dn]="item.changeDir === 'dn'">
                {{ item.change }}
              </td>
              <td>
                <span
                  class="status-chip"
                  [class.chip-active]="item.status === 'Active'"
                  [class.chip-overdue]="item.status === 'Overdue' || item.status === 'Unclaimed'"
                >
                  {{ item.status }}
                </span>
              </td>
            </tr>
          } @empty {
            <tr class="empty-row">
              <td colspan="7">
                No accounts are mapped to this head, so the return reports nothing under it. Map them in Admin &rarr;
                RBI Reserve Configuration.
              </td>
            </tr>
          }
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3">
              <strong>Total Demand Liabilities ({{ demandLiabilities.length }} accounts)</strong>
            </td>
            <td class="right foot-demand">{{ totalOf(demandLiabilities, 'openingValue') }}</td>
            <td class="right foot-demand">{{ totalOf(demandLiabilities, 'currentValue') }}</td>
            <td class="right">{{ totalChange(demandLiabilities) }}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>
  }

  <!-- Time Liabilities Table -->
  @if (activeTab === 'time') {
    <div class="section-desc">Amounts payable after a specified period &mdash; RBI Schedule III</div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th class="sl">#</th>
            <th>Liability Item</th>
            <th>Account Code</th>
            <th class="right">Opening (&#8377; Cr)</th>
            <th class="right">Current (&#8377; Cr)</th>
            <th class="right">Change (&#8377; Cr)</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          @for (item of timeLiabilities; track item.sl) {
            <tr>
              <td class="sl">{{ item.sl }}</td>
              <td>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-sub">{{ item.sub }}</div>
              </td>
              <td class="mono">{{ item.code }}</td>
              <td class="right amt amt-time">{{ item.opening }}</td>
              <td class="right amt amt-time">{{ item.current }}</td>
              <td class="right" [class.up]="item.changeDir === 'up'" [class.dn]="item.changeDir === 'dn'">
                {{ item.change }}
              </td>
              <td>
                <span
                  class="status-chip"
                  [class.chip-active]="item.status === 'Active'"
                  [class.chip-locked]="item.status === 'Locked'"
                >
                  {{ item.status }}
                </span>
              </td>
            </tr>
          } @empty {
            <tr class="empty-row">
              <td colspan="7">
                No accounts are mapped to this head, so the return reports nothing under it. Map them in Admin &rarr;
                RBI Reserve Configuration.
              </td>
            </tr>
          }
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3">
              <strong>Total Time Liabilities ({{ timeLiabilities.length }} accounts)</strong>
            </td>
            <td class="right foot-time">{{ totalOf(timeLiabilities, 'openingValue') }}</td>
            <td class="right foot-time">{{ totalOf(timeLiabilities, 'currentValue') }}</td>
            <td class="right">{{ totalChange(timeLiabilities) }}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>
  }

  <!-- Assets with Banking System Table -->
  @if (activeTab === 'assets') {
    <div class="section-desc">Deducted from gross liabilities to arrive at NDTL &mdash; RBI Master Circular</div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th class="sl">#</th>
            <th>Asset Item</th>
            <th>Account Code</th>
            <th class="right">Opening (&#8377; Cr)</th>
            <th class="right">Current (&#8377; Cr)</th>
            <th class="right">Change (&#8377; Cr)</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          @for (item of bankingAssets; track item.sl) {
            <tr>
              <td class="sl">{{ item.sl }}</td>
              <td>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-sub">{{ item.sub }}</div>
              </td>
              <td class="mono">{{ item.code }}</td>
              <td class="right amt amt-asset">{{ item.opening }}</td>
              <td class="right amt amt-asset">{{ item.current }}</td>
              <td class="right" [class.up]="item.changeDir === 'up'" [class.dn]="item.changeDir === 'dn'">
                {{ item.change }}
              </td>
              <td>
                <span class="status-chip chip-active">{{ item.status }}</span>
              </td>
            </tr>
          } @empty {
            <tr class="empty-row">
              <td colspan="7">
                No accounts are mapped to this head, so the return reports nothing under it. Map them in Admin &rarr;
                RBI Reserve Configuration.
              </td>
            </tr>
          }
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3">
              <strong>Total Assets with Banking System</strong> <span class="deduct-tag">( Deducted from NDTL )</span>
            </td>
            <td class="right foot-asset">{{ totalOf(bankingAssets, 'openingValue') }}</td>
            <td class="right foot-asset">{{ totalOf(bankingAssets, 'currentValue') }}</td>
            <td class="right">{{ totalChange(bankingAssets) }}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>
  }

  <!-- SLR - Liquid Assets Table -->
  @if (activeTab === 'slr') {
    <div class="section-desc">
      SLR = (Liquid Assets / NDTL) &times; 100 &mdash; RBI Sec 24(2A) of Banking Regulation Act, 1949
    </div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th class="sl">#</th>
            <th>Liquid Asset</th>
            <th>Account Code</th>
            <th>Category</th>
            <th class="right">Opening (&#8377; Cr)</th>
            <th class="right">Current (&#8377; Cr)</th>
            <th class="right">Change (&#8377; Cr)</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          @for (item of liquidAssets; track item.sl) {
            <tr>
              <td class="sl">{{ item.sl }}</td>
              <td>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-sub">{{ item.sub }}</div>
              </td>
              <td class="mono">{{ item.code }}</td>
              <td>
                <span class="status-chip chip-slr">{{ item.category }}</span>
              </td>
              <td class="right amt amt-slr">{{ item.opening }}</td>
              <td class="right amt amt-slr">{{ item.current }}</td>
              <td class="right" [class.up]="item.changeDir === 'up'" [class.dn]="item.changeDir === 'dn'">
                {{ item.change }}
              </td>
              <td>
                <span class="status-chip chip-active">{{ item.status }}</span>
              </td>
            </tr>
          } @empty {
            <tr class="empty-row">
              <td colspan="7">
                No accounts are mapped to this head, so the return reports nothing under it. Map them in Admin &rarr;
                RBI Reserve Configuration.
              </td>
            </tr>
          }
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4"><strong>Total Liquid Assets (SLR Eligible)</strong></td>
            <td class="right foot-slr">{{ totalOf(liquidAssets, 'openingValue') }}</td>
            <td class="right foot-slr">{{ totalOf(liquidAssets, 'currentValue') }}</td>
            <td class="right">{{ totalChange(liquidAssets) }}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>

    <!-- SLR Formula -->
    <div class="formula-block slr-formula">
      <div class="formula-title">SLR Computation &mdash; (Liquid Assets / NDTL) &times; 100</div>
      <div class="formula-row">
        <div class="formula-term ft-slr">
          <div class="formula-term-label">Liquid Assets</div>
          <div class="formula-term-val">&#8377;13,238.80</div>
          <div class="formula-term-sub">6 asset categories</div>
        </div>
        <div class="formula-op">&divide;</div>
        <div class="formula-term ft-ndtl">
          <div class="formula-term-label">NDTL</div>
          <div class="formula-term-val">&#8377;69,221.30</div>
          <div class="formula-term-sub">Net Demand &amp; Time</div>
        </div>
        <div class="formula-op">&times;</div>
        <div class="formula-term" style="border-color: #e2e8f0; background: #f8fafc">
          <div class="formula-term-label" style="color: #64748b">100</div>
          <div class="formula-term-val" style="color: #334155">100</div>
          <div class="formula-term-sub">&nbsp;</div>
        </div>
        <div class="formula-op equals">=</div>
        <div class="formula-term ft-slr-result">
          <div class="formula-term-label">Actual SLR</div>
          <div class="formula-term-val">{{ slrActualPercent }}%</div>
          <div class="formula-term-sub">Min required: {{ slrRate }}%</div>
        </div>
      </div>
    </div>

    <!-- SLR Status Bar -->
    <div class="slr-status-bar">
      <div class="slr-status-left">
        <div class="slr-status-title">SLR Compliance Status</div>
        <div class="slr-status-desc">
          Actual: {{ slrActualPercent }}% &middot; Required: {{ slrRate }}.00% &middot; NDTL: &#8377;{{
            ndtl | number: '1.2-2'
          }}
          Cr
        </div>
      </div>
      <div class="slr-status-calcs">
        <div class="slr-calc">
          <div class="slr-calc-label">SLR Required ({{ slrRate }}%)</div>
          <div class="slr-calc-val">&#8377;{{ slrRequired | number: '1.2-2' }} Cr</div>
        </div>
        <div class="slr-calc">
          <div class="slr-calc-label">Liquid Assets Held</div>
          <div class="slr-calc-val">&#8377;{{ totalLiquidAssets | number: '1.2-2' }} Cr</div>
        </div>
        <div class="slr-calc">
          <div class="slr-calc-label">Surplus</div>
          <div class="slr-calc-val surplus">&#8377;{{ slrSurplus | number: '1.2-2' }} Cr</div>
        </div>
      </div>
    </div>
  }

  <!-- NDTL Formula Block -->
  <div class="formula-block">
    <div class="formula-title">
      NDTL Computation &mdash; Formula Breakdown &middot; Data as of {{ reportingDateStr }}
    </div>
    <div class="formula-row">
      <div class="formula-term ft-demand">
        <div class="formula-term-label">Demand Liabilities</div>
        <div class="formula-term-val">&#8377;{{ totalDemand | number: '1.2-2' }}</div>
        <div class="formula-term-sub">16 line items</div>
      </div>
      <div class="formula-op">+</div>
      <div class="formula-term ft-time">
        <div class="formula-term-label">Time Liabilities</div>
        <div class="formula-term-val">&#8377;{{ totalTime | number: '1.2-2' }}</div>
        <div class="formula-term-sub">13 line items</div>
      </div>
      <div class="formula-op minus">&minus;</div>
      <div class="formula-term ft-asset">
        <div class="formula-term-label">Assets with Banking</div>
        <div class="formula-term-val">&#8377;{{ totalBankingAssets | number: '1.2-2' }}</div>
        <div class="formula-term-sub">3 line items</div>
      </div>
      <div class="formula-op equals">=</div>
      <div class="formula-term ft-ndtl">
        <div class="formula-term-label">NDTL</div>
        <div class="formula-term-val">&#8377;{{ ndtl | number: '1.2-2' }}</div>
        <div class="formula-term-sub">CRR &amp; SLR base</div>
      </div>
    </div>
  </div>

  <!-- CRR/SLR Bar -->
  <div class="crr-bar">
    <div class="crr-text">
      <div class="crr-title">CRR &amp; SLR Reserve Requirements &mdash; RBI Computation on NDTL</div>
      <div class="crr-desc">
        Based on NDTL of &#8377;{{ ndtl | number: '1.2-2' }} Cr &middot; Data as of {{ reportingDateStr }} (45-day lag)
      </div>
    </div>
    <div class="crr-calcs">
      <div class="crr-calc">
        <div class="crr-calc-label">CRR @ {{ crrRate }}.00%</div>
        <div class="crr-calc-val">&#8377;{{ crrRequired | number: '1.2-2' }} Cr</div>
      </div>
      <div class="crr-calc">
        <div class="crr-calc-label">SLR @ {{ slrRate }}.00%</div>
        <div class="crr-calc-val">&#8377;{{ slrRequired | number: '1.2-2' }} Cr</div>
      </div>
      <div class="crr-calc">
        <div class="crr-calc-label">Total Reserve</div>
        <div class="crr-calc-val">&#8377;{{ totalReserve | number: '1.2-2' }} Cr</div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <div class="dialog-footer">
    <span>CBSNexora &middot; RBI Liabilities Register</span>
    <span>RBI Master Circular &mdash; CRR/SLR 2024-25</span>
    <button mat-button (click)="close()">Close</button>
  </div>
</div>