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">
      <div class="as-of-box">
        <strong>{{ reportingDateStr }}</strong>
        <span>Reporting Fortnight (45-day lag)</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">&#8377;12,843<span class="cr">Cr</span></div>
      <div class="sc-change up">&#8593; 3.2% vs prev fortnight</div>
    </div>
    <div class="summary-card sc-time">
      <div class="sc-label">Total Time Liabilities</div>
      <div class="sc-value">&#8377;64,618<span class="cr">Cr</span></div>
      <div class="sc-change up">&#8593; 1.8% vs prev fortnight</div>
    </div>
    <div class="summary-card sc-asset">
      <div class="sc-label">Assets with Banking System</div>
      <div class="sc-value">&#8377;8,240<span class="cr">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">&#8377;69,221<span class="cr">Cr</span></div>
      <div class="sc-sub">After deducting banking assets</div>
    </div>
    <div class="summary-card sc-crr">
      <div class="sc-label">CRR Required ({{ crrRate }}%)</div>
      <div class="sc-value">&#8377;{{ crrRequired | number:'1.0-0' }}<span class="cr">Cr</span></div>
      <div class="sc-sub">SLR Req: &#8377;{{ slrRequired | number:'1.0-0' }} Cr ({{ slrRate }}%)</div>
    </div>
  </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>
          }
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3"><strong>Total Demand Liabilities (All 16 Items)</strong></td>
            <td class="right foot-demand">12,114.75</td>
            <td class="right foot-demand">12,843.50</td>
            <td class="right up">+728.75</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>
          }
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3"><strong>Total Time Liabilities (All 13 Items)</strong></td>
            <td class="right foot-time">62,613.10</td>
            <td class="right foot-time">64,618.00</td>
            <td class="right up">+2,004.90</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>
          }
        </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">7,600.70</td>
            <td class="right foot-asset">8,240.20</td>
            <td class="right up">+639.50</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>
          }
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4"><strong>Total Liquid Assets (SLR Eligible)</strong></td>
            <td class="right foot-slr">12,511.70</td>
            <td class="right foot-slr">13,238.80</td>
            <td class="right up">+727.10</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>